@font-face Reminder


I just had an “ooh duh”moment. While using @font-face, I overlooked the fact that I forgot to add the necessary font files to the site I was making. The typeface still displayed, but it did not look quite right.

After some searching and the process of elimination, I realized the files were missing…. I then remembered that if you use a typeface without the @font-face, it checks your local fonts and loads if found, otherwise it uses it’s callbacks in the defined font stack.

I don’t know why the font looked different when pulling from my machine, but it was a curious moment. Take away lesson: make sure you move your font files.

More resources

A quick Google search can yields plenty of helpful sites, but these two are definitely great ones:

Font Squirrel also has a great set of resources for @font-face.

Happy styling!