Gone are the days when you had to rely on the fonts that you know are available on everyone’s computers or laptops. Worse off is when the rookie web developer uses a font that is resident on the developer’s machine only to view the website on a different computer and the fonts are all ugly and a total mess. Thanks to Google fonts. A trend was started where browsers can download the right fonts on demand.
So how do fonts work on a web browser? The font to be used is defined by the web designer who makes a hint to the browser with a list of preferred fonts. The browser then looks into the system fonts and tries to use the preferred font(s) based on availability.
If none of the fonts exist on the clients’ computer then the browser results in the default font. This is an example of how fonts can be defined globally in CSS for a website
body{
font-family: verdana, helvetica, serif;
}This code snippet above generally works well most of the time… at least for older websites. Today’s websites want character and they want to show off their personality and style and these default fonts no longer cut it. The solution is to use web-based fonts which introduce cross-browser and cross-platform consistency in the font styles. Using Google fonts as our example, we will show you how you can add them to your website.
Adding Google Fonts to Your Web Page.
There are two ways to which you can add Google fonts to your website. The first involves linking to the web font via a URL in the HTML head and the second method incorporates the web font from within the CSS file.
Step 1: You need to visit fonts.google.com to browse and pick a preferred font by either browsing the directory or by searching for a preferred font and selecting it.
Step 2: Follow the instructions to select the font and to customize it by choosing whether you need light, regular, bold, italic, etc varieties. Ensure you keep an eye on the Load time indicator. Choosing fonts that you do not need will slow down the website so ensure you only pick the customized versions you actually need.
Step 3: Copy the Embed codes provided. There are two options you will be provided with. These are the standard link tag and the @import version. Whichever method you choose, follow the instructions in the respective sections below.
HTML Head Method
Add the following code snippet in the head of your HTML document to look something like this:
...
<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700" rel="stylesheet">
...
</head>
...CSS @Import Method
Add the following code at the top of your CSS file or within the style tags.
<style>
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700');
</style>This method is less desirable than the link method. The link method downloads the Google fonts asymmetrically while the @import method downloads the font symmetrically. What this means is the @import method will stop the browser from processing anything further until the entire font file has been downloaded.
The link tag method, on the other hand, will download the web font in parallel while the rest of the website code gets processed. This has the advantage of speeding up the web page load times.
Finally
Once you have imported or linked the web font files then you can link them to the HTML elements on the page by using this familiar CSS rule specifically for the font we have chosen above.
body{
font-family: 'Open Sans', sans-serif;
}Bonus
For the lovers of JavaScript or for any reason you need to load Google fonts using JavaScript, there is the Web Font Loader from Typekit of which details on how to use the library can be found here on GitHub repository.
Found this article interesting? Follow Brightwhiz on Facebook, Twitter, and YouTube to read and watch more content we post.