Face it: How to link Google Fonts and local fonts to CSS
Have you ever been told to stick to the “web-safe” fonts? That is, those 10–15 fonts that most browsers and computers have pre-installed? Well, since font embedding services like Google Web Fonts and Adobe Fonts came around, now you can incorporate whatever fonts you desire. Still, it is always recommended to use a fallback font that is a web-safe alternative. Now that our word of caution is out of the way, how do you embed a font?
Google Fonts is a directory of thousands of open-source fonts, available for free use. Google Fonts lets us retrieve the link for a single font, multiple basic fonts, or various fonts with the font-weight and font-style properties. Here are the ways to do it.
Linking fonts in the head
When you’ve chosen the font you like, insert the URL in the <head> section of the HTML. You’ve most likely done this already with CDNs or stylesheets. Use the <link> tag and “href” keyword.
<head>
<link href="https://fonts.googleapis.com/css?family=Droid+Serif" type="text/css" rel="stylesheet">
</head>Above is an example of a single font, but you can link several fonts in a single href like so.
<head>
<link href="https://fonts.googleapis.com/css?family=Droid+Serif|Playfair+Display" type="text/css" rel="stylesheet">
</head>Right now, with just a couple fonts selected the load time from our embed link will be fast. But what if we customize our font with more options?
Now our load time has grown slow. One way to get around this is to link our fonts in our CSS rules.
Linking fonts directly in the CSS
To load fonts directly into the stylesheets, we use the @font-face property. Instead of using the font’s link in the HTML document, enter the link into the URL bar in the browser. The browser then loads the CSS rules you will need for your stylesheet. You will need the rules that are labeled Latin. As with the image above, when you have multiple fonts and properties selected, the CSS rules that are labeled Latin are on separate lines. You’ll need to copy each of these. Remember, to correctly load the page, copy the @font-face rules to the top of the stylesheet.
Local font files
What if you don’t want to use an external service for fonts, but you instead want to use local font files? Just like local image files, the key to this is just using a relative file path instead of a web URL. Add a format for each file to specify which font to use. Because different browsers support different font types, it is a good idea to provide multiple font file options. You can use .woof2, .woof, or .tff. Check out Font Squirrel to find fonts to use locally.
@font-face {
font-family: "Roboto";
src: url(fonts/Roboto.woff2)
format('woff2'),
url(fonts/Roboto.woff)
format('woff'),
url(fonts/Roboto.tff)
format('truetype');
}There you have it — two ways to add open-source fonts and one way to add local fonts to your webpages and apps. Google Fonts provides free fonts to use in an HTML file with the <link> tag or the @font-face property in CSS. Add local fonts to a document with @font-face and the path to the font’s source. Then use the named font-family rules as you please (along with a web-safe fallback font), and you’re good to go!
