How To Install And Optimization Google Font - Gudio Tutorial

    Social Items


How To Install And Optimization Google Font


How To Install And Optimization Google Font - Hello blogger, wherever you are. Meet again with me in Gudio Blog. Gudio Blog is a blog that discusses web, desktop and mobile programming tutorials, blogger tutorials, tips and tricks and others related to technology and information.

And, this time I will give you a tutorial on "About Google Font". Why should it be optimized? yes clearly, the goal is to speed up loading the pages of your blog or website.

what I will explain here is my own experience. Where at first I did the testing using PageSpeed ​​Insight and the result was Eliminate rendering blocking resources and details, which is on the Google font that I used on my web. I searched for references on other websites and did not find the explanation I was looking for. and I found this way in an unintentional way. While reading the topic in a discussion group on the internet that discusses Blog Speed ​​Optimization, and yes, I finally found a way.

And maybe this is a suggestion for you, if if you find a problem and you search the websites but have not found an answer, try to search the discussion group. of course a discussion group that deals with the problems you experience. And never give up, "Because Every Problem Always Has a Solution".


What is Google Font?

Google Font is one of the services provided by Google that is provided to its users for free. This service is in the form of font usage intended for web developers so that the appearance of the developer's web design can be more beautiful. Google Font has 900 fonts families.

Google Fonts (previously called Google Web Fonts) is a library of 900 libre licensed fonts, an interactive web directory for browsing the library, and APIs for conveniently using the fonts via CSS and Android. From Wikipedia: https://en.wikipedia.org/wiki/Google_Fonts

How Do You Use Google Fonts?

To be able to use and install Google fonts on a website or blog, first you have to choose what font you will use. You can see the fonts provided by Google, please go to this link: https://fonts.google.com/

How To Install And Optimization Google Font


In the picture above, if you scroll down, you will find lots of fonts that you can choose to use on your website or blog. If you have found the type of font that is suitable for your website or blog and you like the font, click the red plus sign as shown below:

How To Install And Optimization Google Font

In this tutorial, I will try to use the Roboto font type. And click the add button, a form will appear as below:

How To Install And Optimization Google Font


I will try to explain the purpose of the number in the picture above.
  1. Image with No. 1: this section is an embed font code that you will attach to your HTML website or blog.
  2. Image with No. 2: in this section you can choose to use any type of font. In this section, there will be a choice of Light, Regular, Medium, Bold, Italic and Black. And at the bottom of "Language", you can specify the type of language supported by this font type.
  3. Image with No. 3: in this section, it contains notifications to you, the loading speed of the font you selected. This speed will depend on the type of font choice you use and the language you use. My advice, just use Regular and Bold for the font type, because if you use all types (Light, Regular, Medium, Bold, Italic, Black), then of course, your website will be slow to load this font. So be wise in choosing the type of font.
  4. Image with No. 4: the code that you must attach to your HTML website or blog so that the font you choose can appear. Install the code under the <head> tag
  5. Image with No.5: the same as in figure number 4, you also have to install this code in the HTML of your website or blog, usually in the <body> tag.


Example of Use:

<!DOCTYPE html>
<html>
<head>
<title>How To Install Google Font</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" type='text/css'>
 
<style type="text/css">
   .open{
       font-family: 'Roboto', sans-serif;
         }
</style>
 
</head>
<body>
   <h2>How To Install Google Font [Gudio]</h2>
   
   <h3>Reguler Font:</h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   Nulla erat dolor, ullamcorper in ultricies eget,
   fermentum rhoncus leo. Curabitur eu mi vitae metus
   posuere laoreet.</p>
   
   <h3>Roboto Font:</h3>
   <p class="open">Lorem ipsum dolor sit amet, consectetur
   adipiscing elit. Nulla erat dolor, ullamcorper in ultricies eget,
   fermentum rhoncus leo. Curabitur eu mi vitae
   metus posuere laoreet.</p>
</body>
</html>

Result :

How To Install And Optimization Google Font

Do you see the difference in the picture above? Yes, the difference is in the type of writing. In the Regular text on the image, use regular fonts, namely the default font from the browser (without google font). Whereas in the Second Post, in the picture, use the type of Roboto font that I downloaded earlier from Google Font.

How is that? of course it's very easy to install Google Font on a website or blog. And I'm sure, you all can certainly install it.

For blogger, you can install it by selecting the "Theme" menu, "Edit HTML" on your blogger dashboard. But if you already have a Google Font on your blog, I suggest you first back up your blog template, so that if a problem occurs, you can immediately return to the original template.

How Do I Optimize Google Fonts on Blogger?

After we have successfully installed Google Fonts on bloggers, there is one thing we can do to optimize it. My experience, after I installed Google Font on my blog, I checked using PageSpeed ​​Insight, there was rendering blocking with the "Eliminate rendering-blocking resources" problem, below I show it with the picture.

How To Install And Optimization Google Font

In the picture above clearly seen in the results of the PageSpeed ​​Insight test, there is rendering blocking resources. Of course if you want to get a good score on PageSpeed ​​Insight, then the score must be above 90, if you get that score then the website or blog is classified as fast (according to PageSpeed ​​Insight).

Render-Blocking Resources is that CSS blocks the rendering process when loading the blog. So, when you open a Website page, then indirectly, you will also download the html + css file, then the browser will render it into a webpage. And when this happens rendering blocking, maybe because the css is too much or the size of the css is big or it can be, in the css there are other external links.

So To Improve as Follows:


First, because we are going to copy the css from Google Font, of course we need to have a hosting to put the copy of the CSS that we made. Here I use GitHub to put the copy of the css. I assume you already have an account on GitHub and we proceed to the next step.

Copy the google font css link on your website or blog and paste it in the address bar of your browser. And you will see the code from the Google Font CSS that you are using.

How To Install And Optimization Google Font

As we saw in the picture above that I have marked with the red box, we see that the css from google the font downloads the font via the link. That is the problem why there can be rendering-blocking resources on the google font css. And that's what we will optimize.

Create a new file on github and give it a name with the css extension. Example, yourstyle.css. Then copy all the CSS code on the Google font and paste it on your CSS on Github. Example like the picture below:

How To Install And Optimization Google Font


Copy the link on the google font css and paste it in the address bar in the browser. Example: "https://fonts.gstatic.com/s/ptsans/v9/jizaRExUiTo99u79D0-ExdGM.woff2". Then the browser will automatically download the font.

And after we get the downloaded font, then we have to encrypt the file with the Base 64 Encoder method. Then, access to the following link: Base 64 Encoder

Click the browse button on the website and navigate to the location where you saved the downloaded font. If so, then you scroll to the bottom and make settings like the following:

How To Install And Optimization Google Font

If you have made settings like in the picture above, then now you click the "Encode" button. Then, the encryption results will appear from the font you downloaded.

Copy all the encryption code in the box and paste it on your css on github. The format is as below:


@font-face {
    font-family: 'Exo 2';
    src: url("data:application/x-font-woff;charset=utf-8;base64,encryption of your font") format('woff');
    font-weight: 400;
    font-style: normal;

}

Replace the "encryption of your font" above with your encrypted code that you got from the Base 64 Encoder website.

Do the above steps for all fonts on the google font css. So your CSS will be like this:

How To Install And Optimization Google Font - Final CSS

After you have finished encrypting fonts on the Google Font CSS, save your CSS. And paste your css link from Github to the HTML of your website or blogger. The placement is the same as the google font placement in my previous explanation above.

After everything is finished, the last step is to test again through PageSpeed ​​Insight. And optimization should work. Below is the result of an optimization on this blog.

How To Install And Optimization Google Font


Okay, this article is finished. Hopefully what I share in this article is useful for all of you. And don't forget, if this article is interesting and useful for you, please share this article to your social media and of course don't forget to follow my social media account.

We meet again at other times and of course with other interesting articles. see you later

How To Install And Optimization Google Font


How To Install And Optimization Google Font


How To Install And Optimization Google Font - Hello blogger, wherever you are. Meet again with me in Gudio Blog. Gudio Blog is a blog that discusses web, desktop and mobile programming tutorials, blogger tutorials, tips and tricks and others related to technology and information.

And, this time I will give you a tutorial on "About Google Font". Why should it be optimized? yes clearly, the goal is to speed up loading the pages of your blog or website.

what I will explain here is my own experience. Where at first I did the testing using PageSpeed ​​Insight and the result was Eliminate rendering blocking resources and details, which is on the Google font that I used on my web. I searched for references on other websites and did not find the explanation I was looking for. and I found this way in an unintentional way. While reading the topic in a discussion group on the internet that discusses Blog Speed ​​Optimization, and yes, I finally found a way.

And maybe this is a suggestion for you, if if you find a problem and you search the websites but have not found an answer, try to search the discussion group. of course a discussion group that deals with the problems you experience. And never give up, "Because Every Problem Always Has a Solution".


What is Google Font?

Google Font is one of the services provided by Google that is provided to its users for free. This service is in the form of font usage intended for web developers so that the appearance of the developer's web design can be more beautiful. Google Font has 900 fonts families.

Google Fonts (previously called Google Web Fonts) is a library of 900 libre licensed fonts, an interactive web directory for browsing the library, and APIs for conveniently using the fonts via CSS and Android. From Wikipedia: https://en.wikipedia.org/wiki/Google_Fonts

How Do You Use Google Fonts?

To be able to use and install Google fonts on a website or blog, first you have to choose what font you will use. You can see the fonts provided by Google, please go to this link: https://fonts.google.com/

How To Install And Optimization Google Font


In the picture above, if you scroll down, you will find lots of fonts that you can choose to use on your website or blog. If you have found the type of font that is suitable for your website or blog and you like the font, click the red plus sign as shown below:

How To Install And Optimization Google Font

In this tutorial, I will try to use the Roboto font type. And click the add button, a form will appear as below:

How To Install And Optimization Google Font


I will try to explain the purpose of the number in the picture above.
  1. Image with No. 1: this section is an embed font code that you will attach to your HTML website or blog.
  2. Image with No. 2: in this section you can choose to use any type of font. In this section, there will be a choice of Light, Regular, Medium, Bold, Italic and Black. And at the bottom of "Language", you can specify the type of language supported by this font type.
  3. Image with No. 3: in this section, it contains notifications to you, the loading speed of the font you selected. This speed will depend on the type of font choice you use and the language you use. My advice, just use Regular and Bold for the font type, because if you use all types (Light, Regular, Medium, Bold, Italic, Black), then of course, your website will be slow to load this font. So be wise in choosing the type of font.
  4. Image with No. 4: the code that you must attach to your HTML website or blog so that the font you choose can appear. Install the code under the <head> tag
  5. Image with No.5: the same as in figure number 4, you also have to install this code in the HTML of your website or blog, usually in the <body> tag.


Example of Use:

<!DOCTYPE html>
<html>
<head>
<title>How To Install Google Font</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" type='text/css'>
 
<style type="text/css">
   .open{
       font-family: 'Roboto', sans-serif;
         }
</style>
 
</head>
<body>
   <h2>How To Install Google Font [Gudio]</h2>
   
   <h3>Reguler Font:</h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   Nulla erat dolor, ullamcorper in ultricies eget,
   fermentum rhoncus leo. Curabitur eu mi vitae metus
   posuere laoreet.</p>
   
   <h3>Roboto Font:</h3>
   <p class="open">Lorem ipsum dolor sit amet, consectetur
   adipiscing elit. Nulla erat dolor, ullamcorper in ultricies eget,
   fermentum rhoncus leo. Curabitur eu mi vitae
   metus posuere laoreet.</p>
</body>
</html>

Result :

How To Install And Optimization Google Font

Do you see the difference in the picture above? Yes, the difference is in the type of writing. In the Regular text on the image, use regular fonts, namely the default font from the browser (without google font). Whereas in the Second Post, in the picture, use the type of Roboto font that I downloaded earlier from Google Font.

How is that? of course it's very easy to install Google Font on a website or blog. And I'm sure, you all can certainly install it.

For blogger, you can install it by selecting the "Theme" menu, "Edit HTML" on your blogger dashboard. But if you already have a Google Font on your blog, I suggest you first back up your blog template, so that if a problem occurs, you can immediately return to the original template.

How Do I Optimize Google Fonts on Blogger?

After we have successfully installed Google Fonts on bloggers, there is one thing we can do to optimize it. My experience, after I installed Google Font on my blog, I checked using PageSpeed ​​Insight, there was rendering blocking with the "Eliminate rendering-blocking resources" problem, below I show it with the picture.

How To Install And Optimization Google Font

In the picture above clearly seen in the results of the PageSpeed ​​Insight test, there is rendering blocking resources. Of course if you want to get a good score on PageSpeed ​​Insight, then the score must be above 90, if you get that score then the website or blog is classified as fast (according to PageSpeed ​​Insight).

Render-Blocking Resources is that CSS blocks the rendering process when loading the blog. So, when you open a Website page, then indirectly, you will also download the html + css file, then the browser will render it into a webpage. And when this happens rendering blocking, maybe because the css is too much or the size of the css is big or it can be, in the css there are other external links.

So To Improve as Follows:


First, because we are going to copy the css from Google Font, of course we need to have a hosting to put the copy of the CSS that we made. Here I use GitHub to put the copy of the css. I assume you already have an account on GitHub and we proceed to the next step.

Copy the google font css link on your website or blog and paste it in the address bar of your browser. And you will see the code from the Google Font CSS that you are using.

How To Install And Optimization Google Font

As we saw in the picture above that I have marked with the red box, we see that the css from google the font downloads the font via the link. That is the problem why there can be rendering-blocking resources on the google font css. And that's what we will optimize.

Create a new file on github and give it a name with the css extension. Example, yourstyle.css. Then copy all the CSS code on the Google font and paste it on your CSS on Github. Example like the picture below:

How To Install And Optimization Google Font


Copy the link on the google font css and paste it in the address bar in the browser. Example: "https://fonts.gstatic.com/s/ptsans/v9/jizaRExUiTo99u79D0-ExdGM.woff2". Then the browser will automatically download the font.

And after we get the downloaded font, then we have to encrypt the file with the Base 64 Encoder method. Then, access to the following link: Base 64 Encoder

Click the browse button on the website and navigate to the location where you saved the downloaded font. If so, then you scroll to the bottom and make settings like the following:

How To Install And Optimization Google Font

If you have made settings like in the picture above, then now you click the "Encode" button. Then, the encryption results will appear from the font you downloaded.

Copy all the encryption code in the box and paste it on your css on github. The format is as below:


@font-face {
    font-family: 'Exo 2';
    src: url("data:application/x-font-woff;charset=utf-8;base64,encryption of your font") format('woff');
    font-weight: 400;
    font-style: normal;

}

Replace the "encryption of your font" above with your encrypted code that you got from the Base 64 Encoder website.

Do the above steps for all fonts on the google font css. So your CSS will be like this:

How To Install And Optimization Google Font - Final CSS

After you have finished encrypting fonts on the Google Font CSS, save your CSS. And paste your css link from Github to the HTML of your website or blogger. The placement is the same as the google font placement in my previous explanation above.

After everything is finished, the last step is to test again through PageSpeed ​​Insight. And optimization should work. Below is the result of an optimization on this blog.

How To Install And Optimization Google Font


Okay, this article is finished. Hopefully what I share in this article is useful for all of you. And don't forget, if this article is interesting and useful for you, please share this article to your social media and of course don't forget to follow my social media account.

We meet again at other times and of course with other interesting articles. see you later
iklan related post
Load comments