Google Font Generator

Create beautiful font for your website or app

Customize Your Text

Preview

Type something here...

CSS Code

font-family: 'Roboto', sans-serif;
font-weight: normal;
font-size: 16px;
color: #333333;

Instructions

  1. Type your text in the input area.
  2. Select any font from the Google Fonts collection. (Ensure you have a valid API key for a full list)
  3. Choose the font weight.
  4. Adjust the font size using the slider.
  5. Pick a font color using the color picker.
  6. See the changes instantly in the preview area.
  7. Click "Copy CSS Code" to copy the generated CSS styles.

How to Use These Fonts on Your Website

1. Add this code to your HTML <head> section to load the selected font (e.g., Roboto):

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&display=swap" rel="stylesheet">

2. Then apply the font to your elements using the copied CSS, for example:

.your-element {
  font-family: 'Roboto', sans-serif;
  font-weight: normal;
  font-size: 16px;
  color: #333333;
}
Loading...