Font css style generator

Family

Size

Color

Weight

Transform

Style

Decoration

Line Height

Letter Spacing

Text Shadow OnOff

Add your text here

Grumpy wizards make toxic brew for the evil Queen and Jack.

Your CSS Code

#text{
    font-family: ABeeZee, sans-serif;
    font-size: 16px;
    font-weight: 100;
    color: #rgba(0, 0, 0, 1);
    text-transform: none;
    font-style: normal;
    text-decoration: none;
    line-height: 2em;
    letter-spacing: 0px;
}

Copy Code

Spread the word

What is Font CSS Style Generator?

Font CSS style generator is an online tool for creating font style css easily. You can add your own text and choose any font from the google fonts library to style them.

With this online font style maker, you can do all the font styling like color, font-weight, text-transform, text-decoration, line-height, etc, you can also add text-shadow to your font as well.

As you go along styling your font you can see a live preview of your font style how it looks. With each change you make the css will also update live, so, once you are happy with your font style just copy the css and you are good to go.

How to use this Font CSS Style Maker?

1. Add the text you want to generate css style for, this optional but I would advise you to add your text so you can check how the text actually looks.

2. The next step is to choose the font from the dropdown. You can choose any font from the Google fonts library just search the name.

Remember to add the font in your WordPress theme or Html site from the Google fonts library, in order to use the font on your site.

The code should look something like this

<link href="//frontendresource.com/wp-content/uploads/omgf/omgf-stylesheet-40/omgf-stylesheet-40.css?ver=1661408770Roboto&display=swap" rel="stylesheet">

In case you are looking for some premium fonts alternative google font check this list.

3. Change the font size by dragging the slider or you can directly add the font size in the box. You can choose from different font unit types like “px”, “em” and “rem”.

4. Choose the font color from this elegant color picker. From this color picker, you can control the opacity of the color as well.

5. You can adjust different font styling options like “font-weight”, “text-transform”, “font-style”, “text-decoration”, “line-height”, “letter-spacing” etc.

6. If you want to add text shadow to your text just turn on the Text Shadow toggle, once done you will see options to adjust the text shadow use the slider or you can directly add the values.

7. This is the section from where you can check your css, as you adjust the styling option the css will get updated automatically. Check the preview of your text once you are happy with the look just hover over the section and click on Copy Code button and the css will be copied.

Thank you for using our tool.

[elementor-template id="4141"]

Other Tools