I was just looking over my site and realized I had never done a post on Google Fonts, one of my main website design tools. Although this should probably be included with the 101 tutorials because it’s one of the first things most of my students ask is to how to change the fonts, it’s a little more complicated than the 101 level.
First, a little information about web fonts. Websites have a very limited number of fonts that they can automatically show.
You can find that list here:
http://www.w3schools.com/cssref/css_websafe_fonts.asp
Otherwise, you can set your website to show any font that you want, but if the viewer does not have that font installed on their computer, they will not be able to see it.
Note that the CSS for fonts is written like this:
p{font-family:”Times New Roman”, Times, serif;}
So you would list the font that you want first, and then a backup font or two, in case there is some problem displaying the font you want.
In order to get around this incredibly limiting list of fonts, you can pay to download a font or you can use
They can be found here: www.google.com/fonts And they are fairly simple to use. Find the one you like and then use the Quick Use icon.
Then scroll down on the page to find these two sections:
For the top section, make sure you choose the @import tab and copy and paste that info above any other CSS in your Custom Style Plugin sheet or your style.css file. This is how it looks on my site:
Then you will copy the font-family info as described on the side of the Google Fonts website. Fairly easy to do.
If you are looking for even more font options, check out Adobe Typekit.
Leave a Reply