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.

@font-face

font-face { font-family: "League Gothic"; src: url(leaguegothic.otf) format("opentype"); }

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

font-family:League Gothic;

Speed

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.

About Rick

Senior Front-end Software Engineer from Barcelona, Haidong Gumdo Instructor (korean martial art of the sword), street photographer, travel lover, TV addict, Boston Red Sox fan, and privacy advocate.

Leave a Reply

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

*
*