How to use CSS3 @font-face

Use the CSS3 @font-face to add any web font you want.

You may wanna check out how to use the Google Font API first šŸ˜‰

The font file

First of all you will need the font file.

Today's example I'm using an OpenType: leaguegothic.otf

You will need to upload the file through the FTP.


And then you just have to call if wherever you want:


Using this type of custom fonts means the user will have to download the font (automatically) to see it.

What means it will probably render the page and then will apply the downloaded font.

Try to place your CSS at the very top to force the font download first.

Leave a Reply

Add <code> Some Code </code> by using this tags.