I’m working on a few websites right now that want to use a specific font when a viewer loads their site. While that seems pretty easy, there are two ways to make that happen. Each is very different.
The first is to ‘suggest’ the font you want the viewer to use. This is done in the code and generally looks like this
{font-family:”Times New Roman”,Georgia,Serif;}
What that means to a browser is, “When you display this site we would like you to try to use Times New Roman. If your hard drive doesn’t have that could you please use Georgia? Failing that (what kind of a computer are you?) please use anything you have with a Serif. Pretty please?”
That sounds pretty passive right? It is.
Option Two is that we preload a font into the browser as it loads. This means we don’t need to rely on the viewer having it on the hard drive. Instead, our site says to their browser, “Go load this file and use it for this website“.
That font file usually sits on a public server. There’s a few sites out there * but I’ll point out one of the easiest. The Google Fonts API. It’s at Google Fonts.
You can pick and play with a wide variety of fonts to see how they look. You can sort and refine by things like Serif, San Serif, and handwriting.
Once you’ve chosen the font you want to use it’s an easy piece of code that will pull it into your site.
@import url(http://fonts.googleapis.com/css?family=Roboto);
How easy is that?
BONUS:
As a bonus, you don’t have to use just one font. You can use one font for the titles and another for the content. You could even go crazy and use yet another for the sidebars or menus!
A word of caution. loading more fonts takes time. Luckily each font file has a meter of sorts that tells you what this particular font load speed looks like.
There’s a few font plugins available for WordPress as well.
I’ve used WP Google Fonts for a few sites with no issues.
There’s also plugins devoted to the best font in the world – Comic Sans! 😉
* There are alternatives to Google like Fonts.com
Does that help? What font is your Favorite? Need help? Happy to build your site or even just modify the one you have.
- The Ultimate Guide to Writing the Perfect Blog Post - March 14, 2023
- 8 Questions Your Web Developer Should Have Asked - April 27, 2021
- Slack, Chat or Discord? - April 6, 2021