What?

So you've found a font you like, you added a ttf file to your public assets folder, and then you used @font-face to configure it but now you notice that sometimes it flickers and it's difficult to use normal CSS font properties. Your CSS might look like this.

@font-face {    font-family: 'Quicksand';    src: url('fonts/quicksand/quicksand-bold.ttf'); }

The flickering problem is known as FOUT (Flash of Unstyled Text) and we can prevent it easily with these steps plus have it work like any normal font.

Let's fix it

Step 1 - get all your resources

You need every format of your font if you want cross-browser compatibility. Go to font squirrel and upload it. Click on expert mode and make sure woff, woff2, eot compressed, and TrueType are all checked.

Step 2 - embed it for instant rendering

Select base64 encode. Doing this will make your font render with your css and not after since it doesn't need to do another round trip to fetch your font files from the server. Of course, embedding the font makes step 1 feel useless but we need it as a failsafe in case the embed fails.

Step 3 - download it

Now download it. Unzip the content and have a look at the included stylesheet.css file. It will look something like this.

``` @font-face {    font-family: 'quicksandbold';    src: url('quicksand-bold-webfont.eot');    }

@font-face {    font-family: 'quicksandbold';    src: url(data:application/font-woff2;charset=utf-8;base64,d09abunchofstuff) format('woff2'),         url(data:application/font-woff;charset=utf-8;base64,d09abunchofstuff) format('woff'),         url('quicksand-bold-webfont.ttf') format('truetype');    font-weight: normal;    font-style: normal; } ```

Step 4 - make it work

Take this snippet of CSS and copy it to your site. Patch the URLs as necessary to point to the font files in your assets folder. The CSS is still wrong, let's patch it.

In this example we are using a bold font so it needs to be installed that way. Right now the CSS creates a new font family named quicksandbold and that is terrible!

@font-face {    font-family: 'Quicksand';    src: url('quicksand-bold-webfont.eot');    src: url('quicksand-bold-webfont.eot?#iefix') format('embedded-opentype'),         url(data:application/font-woff2;charset=utf-8;base64,d09abunchofstuff) format('woff2'),         url(data:application/font-woff;charset=utf-8;base64,d09abunchofstuff) format('woff'),         url('quicksand-bold-webfont.ttf') format('truetype');    font-weight: 700;    font-style: bold; }

There, notice how we modify font-family to something much more generic and then we modify font-weight to match the actual weight of the font and font-style to express that we are using this particular version of the font as a bold font. Now our CSS will understand something like this.

p.bold {    font-family: 'Quicksand';    font-weight: bold; }

Step 5 - take advantage of local fonts

Sometimes users will have the font installed locally in their machine. How can we take advantage of this? We can use local to try to guess how they installed the font.

@font-face {    font-family: 'Quicksand';    src: url('quicksand-bold-webfont.eot');    src: local('Quicksand'), local('QuickSand'), local('quicksand'),         url('quicksand-bold-webfont.eot?#iefix') format('embedded-opentype'),         url(data:application/font-woff2;charset=utf-8;base64,d09abunchofstuff) format('woff2'),         url(data:application/font-woff;charset=utf-8;base64,d09abunchofstuff) format('woff'),         url('quicksand-bold-webfont.ttf') format('truetype');    font-weight: 700;    font-style: bold; }

All done

Sweet, installing a custom font on your site is not that terrible, there is just a lot of copy/paste involved. What else can we do to make our site or webapp better though? Have a look at caching! I hope to talk more about this on my next post.