Originally introduced in 2010, Google Fonts were then known as “Google Web Fonts.” A Google Font is basically a Web Font introduced by Google. It is important to pick an appropriate font for any website for a proper design. These fonts have a collection of as many as 916 distinct fonts, which means there are a lot of options. The font selected is likely to improve user experience and readability. It is critical for delivering your messages in a better manner to the visitors. On the flip side, the inclusion of such a fond might bring down the speed performance of a website. The article guides you on how to install Google fonts locally.
Merits of installing Google fonts
Let us look at the merits before learning how to install Google Fonts locally. Web fonts offer merits, as well as demerits for a website. These fonts are downloaded to the browser of a user while the webpage is rendered. The fonts are applied to your text then.
A major merit of web fonts is that companies can use fonts to integrate with their specific brand image. Such fonts help to accomplish a consistent feel and look across various media. These fonts can also include a specific personality to a website, particularly in subheads and headlines.
These font displays made on a website can be also viewed on tablets or smartphones. Another key advantage of using web fonts is that .jpg image headlines can be eliminated. When web fonts are included, all words on the page will be 100 percent index-able and searchable. There is no requirement of ALT Tags for a search engine to recognize what the text says. Thus, it makes your code more manageable and cleaner.
Some demerits
A major demerit of using web fonts on your website is inconsistent or slow performance. These fonts can reduce your website’s load time as calls are being made to a remote server, which is not within your control. These web fonts can also lead to Cache Validator errors while tested with Google PageSpeed. They can also generate ExpireHeader errors while tested with Yahoo YSlow due to cross-site access.
Like other Web Fonts, Google fonts are not pre-installed on phones, tablets, or computers. The web browser should download them before making the display. The web font used is basically an extra HTTP request and another DNS lookup. Fonts.googleapis.com can be seen to procure the .CSS file. The font.gstatic.com is required to download these.
Each web visitor has to ensure these files to be downloaded when a page is loading. When Google Fonts are hosted locally, these requests will arrive from a single domain. There is no need for this additional .CSS file too.
Another major demerit is that older web browsers offer restricted support for CSS3 that is needed to utilize web fonts. As mentioned earlier, when you host Google Fonts locally, it does not essentially signify that the speed of your web page will be higher. First, Google Fonts might be already cached on the computer of your visitor while going to another web page. Also, when the other web page uses that same font, which is being used by you, the visitor will have it installed already.
Additionally, when the user is not using a Content Delivery Network such as KeyCDN or Cloudflare, it can slow down the speed of your website. That is because your fonts are hosted locally. A Content Delivery Network brings down DNS lookups. It also increases the overall website speed. The network has been specifically designed to do this functionality and Google also performs it as well. Thus, their fonts download relatively faster while compared to downloading certain assets from average-performing servers. It is recommended not to host Google Fonts locally when the user is not using a Content Delivery Network or CDN.
What happens when Google Fonts are added from the Content Delivery Network?
Let us first see what happens if you extract Google Fonts from the Content Delivery Network of Google. It is important to do this before hosting these fonts locally on your server. Let us assume that a user wishes to add the font Montserrat on their website. The font features 18 static variants although you want to include just four- bold italic, bold, italic, and regular.
Google Fonts are known for their user-friendly interface. So, one needs to just choose the styles you wish to include. It will automatically generate a tag called <link> that has to be inserted into their HTML file.
How to overcome the demerits?
As the web fonts are Open Source by nature, these can be downloaded to the browser of the end user from your website directly. There have been occasions when site stalls have to wait for Google’s response. It might not be a fault of Google but a DNS issue with your host. Irrespective of what the case could be when you serve Google Fonts from your server directly, the load time will reduce. It will also be free of issues, which may arise when contents are downloaded from other websites.
Let us now see how to install Google fonts locally step-by-step. To summarize, here are the steps to do so:
1. The CSS of the Google Fonts has to be retrieved
2. The Google Font(s) have to be downloaded
3. Next, upload that fond to the server.
4. The font should be added to the style sheet
A step-by-Step method to host Google Fonts locally
Here are the explanations for step-wise how to install Google Fonts locally.
1. See the fonts that you are using
It is possible to notice the fonts which are loading. Go to a tab called “Waterfall” and check out for the fonts.gstatic.com. When you move the mouse over the requests, you will get to know the Google Font that you are using.
2. Next, download all those Font files that are required
In case you navigate to the website for the Google Fonts, it is possible to choose, as well as, download all the fonts required by you. However, here, they are available with the file extension .ttf. A converter is required to get another and more contemporary compression to .woff2 and .woff.
To put it simply, the easiest way a Google Font can be downloaded is to use the Google Webfonts Helper, which comes free. You have to first select the font and thereafter choose the styles that are required. For instance, you choose the Google Font as “Lato” and the styles as Bold (700) and Regular(400). You also need both Charsets “Latin-ext” and “Latin.
The free service enables a user to download the Google Fonts in files with different extensions. Options for “Modern Browsers” and “Best Support” can also be given. You will get all file types with “Best Support.” On the other hand, the version “Modern Browsers” will restrict it to .woff2 and .woff, which are the most compressed.
Soon after, you will also find that the CSS code will be automatically available to get the fonts. Simply copy this CSS to the local clipboard and then download your font files.
3. The font(s) have to be uploaded to your server
After all the Google Fonts have been downloaded to your computer, the next step is to upload them using File Transfer Protocol. The files should be copied to the child theme directory. Typically, a fonts directory can be created in your child theme directory. The fonts can be copied there.
.4. Your next step is to include the uploaded fonts to the CSS
You now have all the necessary files in place. So, your next step is to refer to them via CSS. Several WordPress themes enable the users to include custom CSS to a website. However, you may also place them in the Child-Theme. You have to paste the copied CSS into the style sheet.
5. Use Google Fonts on your Desktop
In case you have downloaded the entire Google Font package from the source mentioned above, it should have an Open Type (otf) or a True Type (ttf) font. Your Operating System font installer can then be used to include the font in the font collection of your desktop.
You have to ensure the correctness of your source URL. The source URL should be pointing to the files that have been uploaded using File Transfer Protocol. In case you are using a Content Development Network, you have to alter the file path so that the CDN can be referred to.
While your files may be coming from a remote server, they are still regarded as local assets for you. Hence, you may safely mention that you are hosting Google Fonts locally. Also, you did that all with the help of CSS.
Finally, once the Google Fonts are installed, you have to call the newly added “font-face.” It is possible to include several CSS classes depending on your requirement. At times, you have to check your page CSS. It should be done to find out which classes are asking for those fonts. Then add them to the list. We hope you are now clear about how to install Google Fonts locally.
