HOW TO USE GOOGLE FONTS:
Fonts are different styles of writing texts in our documents. Fonts helps in customizing our projects and makes them stand out.
Custom fonts are already installed and available on systems and editors but there is still a wide variety of free fonts available on the google fonts website.
If you are new to using web fonts, i suggest you go through the W3schools fonts tutorial to help you understand how to use fonts before proceeding any further.
There are two ways to which a font can be used on your site.
- CDN (Content Delivery Network) LINKED
This way a font is linked to your html document by attaching a url of the font link on the google fonts website.
Using Google fonts ONLINE
*Open the site up
*The display shows up with many fonts and their previews in sentences.
*You click on the plus symbol at the top right corner of the box containing the font you want to use.
*A pop-up shows up, you hover over it with your cursor and it comes right up.
Inside the pop-up, you see a link tag containing the URL source of the font you selected.
*You can go ahead and copy the link and paste it right in the document of your text editor. This link should be pasted above all other link tags in the head tag that contains them.
NOTE
You can pretty much navigate through the site in a case where you decide to customize the fonts by changing the font weight in the customize section by marking up the style option/options you choose. In doing this, the link URL actually changes and you'll need to copy the new link URL and paste it below the original first link tag.
In a case you decide to use another >font, you deselect the previous one by >clicking on the minus symbol in the pop >up content.
Pros:
This way enables the font source to be accessed faster and loads smoothly on your web page.
Cons:
This can only be used when there is internet access on your computer system.
NOTE:
The link tag to which the url name of the font file is attached to should always be put at the top before all other link tags in the head tag. The reason for this is that the compiler when executing code does it line by line and therefore would first execute the top link first and then use that information to process the rest of the code in your document.
2 HOSTED LOCALLY:
This way the font zip file is downloaded from the website directly.
After downloading the zip file, you can extract the contents to a folder and then saved it your projects file directory where you have your html and css file so you can access it in your document.
-This way the link tag wont be needed as the file would be used from either your internal css file or directly from your external css stylesheet.
Using Google fonts OFFLINE
- In this case after you've selected your font, instead of copying the link, you download it.
*You can download the font file for offline use by clicking on the download icon the far top right of the pop-up content.
*After the file has been downloaded in zip format, you extract it to a folder and place the folder in your main project directory folder.
NOTE:
The external css style is used here.
- Then we use the @font-face rule at the top of the document to access and implement the font file that was downloaded. It is used thus:
- Here the
src:is used to access the font file
NOTE:
*You should take note of the directory the font file is located in order to access it properly.
*Fonts generally have different file types that are used in the web. Examples are:
- Truetype fonts (.ttf)
- OpenType fonts (.otf)
- The Web Open Font Format (.woff)
- Embedded OpenType fonts (.eot)
the extension of the font file should be included in the name e.g (fontname.ttf)
Then after the name has been put in the src: then we used the font family property to name the file. This name is customizable and can be named whatever we want but you'll want to take note of the name used as that will be used later in the document to access the font file.
USING THE FONT:
The font file can be accessed using the font-family property and the customizable name of the font file.
Pros:
This way your font file can be accessed at any time without the need for internet. It is processed offline.
Cons:
Compared with the former online method, this method is a little bit slower when loading the fonts on your web page as the compiler when processing your code tries the retrieve the file from its source and display it on your page.
CONCLUSION:
Fonts are great resources used for customizing and making our web pages personal and unique. I hope this tutorial has been able to help you navigate your way towards using fonts both online and locally on your system. I encourage you to leave your comments and suggestions kindly about this brief overview of using google fonts. KEEP LEARNING AND GOODLUCK ON YOUR JOURNEY!!
Top comments (2)
Another pro for self hosting: google can't use font requests to their servers to collect data / tracking ;)
To make the self hosting easier there is google-webfonts-helper (described more in depth in this article)
Thanks for the info arnoson
I'll check it out