Font CSS Style Generator

Add your text here

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

Your CSS Code

Copy Code

Spread the word

Share on facebook
Share on twitter
Share on linkedin

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?

font css style generator add text

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.

font css style generator select font

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="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

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

font css style generator font size

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”. 

font css style generator font color

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

font css style generator font style options

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

font css style generator text shadow

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.

font css style generator copy code

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.

Scroll to Top