In the past, there were a very limited amount of fonts that web designers could confidently use on their sites. These are called web-safe fonts. They are fonts that are standardized for all (most) browsers. These include basic fonts like Georgia,Verdana,Times New Roman, and Helvetica. There are a total of 46 web-safe fonts, which doesn't leave much room for creativity. Alternatively, there are 708 Google web fonts that are absolutely free. Several sites provide alternatives to using the plain web-safe fonts, which means that there are hundreds and hundreds of fonts that web designers can choose from to really customize their sites.
Here are some examples of cool web fonts that web designers in the past would not have been able to use:
Pacifico
Candal
Lobster
Poiret One
Playfair Display
Indie Flower
While these fonts may all be different and interesting, they are only scratching the surface of possibilities.
The Process of Installing Other Fonts
One method for bringing in external fonts is through a website like Font Squirrel. Font Squirrel allows you to select from many free fonts that they will package together and prepare for web use. Alternatively, you can upload fonts from other sources, and they’ll do the same to prepare it for web. Follow the steps below to try it.
Open the zip file and move files that are .eot, .svg, .ttf or .woff into your project’s CSS folder.
Open the CSS document that downloaded in the zip file. Copy and paste the contents into the top of your CSS document.
Lastly, in your CSS document, choose the text you want to make this font. In your code, write, “font-family:” and the name of the font. You should choose a font weight to determine the thickness of the font. It should look something like this:
p {
font-family: 'Roboto', sans-serif;
font-weight: 300;
}
The Process of Applying Google Web Fonts
Google fonts is a really good database for fonts. They are also very easy to apply to a site. Follow the steps below to try it.
Go to www.google.com/fonts and find a fonts that you like. You can filter for specific categories like serif, sans-serif, display, handwriting and monospace. Once you find a font you like, you can click on it to see the variations of weight and italics, select the pop out window to learn more about it, and when you are ready to use it, select the button labeled “quick-use” For this tutorial, we’ll try a sans-serif font called Lato.
Now that you have a font to use, select the variations that you’ll want to use on you site. Each is labeled which a thickness (thin,light,normal,bold, etc…) and a weight (100,300,400,700, etc…) Select as many as you want, but notice that the more variations of fonts that you add to your site, the slower the load time will get. See the meter on the right side of the page.
The next step is choosing which character set to use. Most of the time, Latin will be sufficient.
In the next section Google will have created a custom link tag for you to add to your code. It will look something like this:
link href='https://fonts.googleapis.com/css?family=Lato:400,700,300,100' rel='stylesheet' type='text/css'
Copy and paste that link into the head of your html document.
Lastly, in your CSS document, choose the text you want to make this font. Then paste the code written at the bottom of the google fonts page. You should choose a font weight to determine the thickness of the font. It should look something like this:
p {
font-family: 'Lato', sans-serif;
font-weight: 300;
}
Enjoy your newly styled site. Notice that you can also download fonts at the top of the google page to use on your computer as well.
Font-Families
You may be wondering why we wrote “sans-serif” in our code after the name of our font. This is to accommodate for different browsers and users who won’t be able to view the unique font that you have chosen for your site. Essentially what this is doing is giving it a backup. If for some reason our Lato font can’t be viewed, the user will see a standard sans-serif font instead. You can have as many backups as you want. For example, I can write:
font-family: 'Lato', Calibri, sans-serif;
This means that under normal circumstances Lato will be the font that is used. If that doesn’t work, Calibri is next up, and if by some act of God, that isn’t possible either, it will default to our standard sans-serif.