Good typography is an essential component of effective and successful website design. The readability of your content has a direct impact on the message that you get across to your site visitor. To make the process of selecting the right font easier, there are many different subscription-based font services, as well as the option to pay (in some instances very hefty prices) for individual font families. Fortunately, Google’s collection of web fonts is both entirely free and an excellent collection of usable, good-looking and overall professional typefaces. Any of these fonts can be used for both personal and commercial uses, without worry about licensing.
There are many things that makes Google Fonts such a valuable resource. The first couple reasons are both the quality and the size of the collection. Google currently offers 818 different font families, many of which come with different variations of font-style (Italic / Bold) and font-weight (anywhere from 100 to 800). There are great choices in all the categories of Serif, Sans Serif, Monospace as well as more novel styles.
Some standout, widely re-usable fonts in the collection include: Roboto, Lora, Playfair Display, Open Sans and Lato.
Almost even better than the actual collection of fonts, is the user interface. The Google Fonts site is a typography web application in itself, with numerous advanced features for easier selecting of a font. It’s strongly advised to consult with your web developer to ensure you have used the best fonts for full browser and devise compatibility. Sunlight Media LLC specializes in website design & development in Los Angeles. They can assist in making sure you have made the right font choices.
You can test any text you like for any font, change the font and background colors, try different sizes, font-styles, and more customization settings. There are also example blocks of text for paragraphs, numerals, and single sentences, to show how the font will look in these different contexts.
Additionally, the site has advanced searching features, with the ability to filter your search based on font type, language support, number of styles, thickness, width, etc.
How to use Google Fonts on your site
Using a font from Google can be accomplished in a few easy steps. After finding a font you’d like to use, click on the red “plus” button for the font. After clicking on that, a tab labeled “1 Family Selected” will show up at the bottom.
You will see a
<link> tag with code referencing the font file on Google’s servers. For
example, for the Roboto font (with no selected customization), this would be:
<link href="https://fonts.googleapis.com/css?family=Roboto:100i" rel="stylesheet">
After copying the
<link>, you will need to add this to the
<head> element in your HTML file, before the
<link> element for your main stylesheet:
Finally, you will need to add the CSS rule for the HTML element(s) you want to style with your selected font. Copy this from Google Fonts, then add it to your CSS file:
If you would like to have the option of using native style variations that come with the font family (for example, Italic, Bold, or different font-weights), you will need to select these options on the “Customize” tab on Google Fonts:
Select as many of these as you need/want, although keep in mind that every font variation you add will slightly increase page load times. Luckily Google at least gives an indicator of what the potential load time will be with the current font family selections. After making your customization selections, go back to the “Embed” tab and copy the new
<link> element, which includes the selected variations:
- Hottest Conversion Rate Optimization (CRO) Trends in 2017
- Using node-sass to compile Sass files in an npm script
- How to Minimize Your Landing Page’s Bounce Rate