How To Install Google Fonts Into Blog Templates

How To Install Google Fonts Into Blog Templates - Fonts or fonts used on a web page greatly affect the level of population of the website, the use of font types and font sizes that can make the reader disappear suddenly. The ideal font size that makes the reader comfortable is 15px to 17px, while the ideal font types for websites / blogs are open sans, regular arial, raleway and many more, but the point is to choose general fonts that are neat and lightweight, so they don't shocking the eyes of the reader and burdensome loading site.

How To Change Fonts (Fonts) In Blog Templates?
Login to blogger, click template> click advanced, you can choose the header font, page font or content that is available there. But I did not discuss it further because I think all understand that choosing fonts from template settings. But what if we find that we don't find the font type that we want in the template settings, then we can use Google Fonts by installing it directly into the blog template. Google has a lot of good font types in Google fonts, maybe hundreds or 300 types of fonts maybe even more than that, I never counted it.

Choose the Type and Retrieve Font Code
Visit https://fonts.google.com to choose fonts
After finding the right font type, click the + sign,
A little setting on the window that appears like the image below.

Caption:
On the costumize tab, select regular 400 and bold 700, it is the most common font thickness measurement (font-weight :valu_}; note also the green indicator in the image, it is a safe sign or the loading speed value). if we choose 3 font sizes such as 400,700 and 800, then the green indicator will usually turn yellow or red, giving a sign that selecting 3 font sizes will make loading fonts heavier.
Tab-Embed, Copy the two codes that are given Google font, save them in notepad or notes for a while

How to Install Google Fonts into HTML Templates

Login to Blogger Dashboard> Click Template> Edit HTML
Look for the closing tag-heading code that is </head> and paste the google font code directly above the code </head> then save the template.

See the example below.

<link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet">
</head>

Note: The process of installing google fonts into html templates is not complete, if at the time of saving it turns out there is an error (our template cannot save the google font code), then change the google font code to be as follows.

<link href = 'https: //fonts.googleapis.com/css? family = Raleway: 400,700' rel = 'stylesheet' />

Note the difference is in the tip of the code, namely; Add a string before the closing tag.
Next save the google font code just above the </head> tag as explained above, After the google font code is saved, then the next step is to set the css element that is targeted for example the p element or example paragraph:

p {font-family: 'Raleway', sans-serif;}
Enter the google css code directly above the code]]> </ b: skin>

with the format as below.

p {
font-family: 'Raleway', sans-serif;
}

The letter "p" means paragraph, then the above css asks "show all paragraphs of text with raleway font". while the sans-serif function; is a backup font, if the internet network is not good then the raleway font will be replaced with sans-serif for shorter loading.

In addition to the format as above, the google font css can also be installed in a format like the following example;

.post-body {
font-family: 'Raleway', sans-serif;
}

The .post-body code is the class name or target id for the article page, so everything on the article page will be loaded with a raleway font. So that this article is longer, then I give another example which is to install the Google CSS font with the following format;

.post-body, .post-tittle, .popular-post {
font-family: 'Raleway', sans-serif;
}

Css means asking for article titles, article pages, and popular posts to be displayed with the raleway typeface.

Important: .post-body, .post-tittle and .popular-post codes are common "id" elements in blogger templates, inspect elements to find out the "id or class name" of each of your template elements, starting with a dot at behind the name class and separate each class name with a comma, as seen in the css example above, add font-size to set the font size and font-weight for the font weight or weight as in the following example;

.post-body or body {font: normal normal 17px 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 1.42857143; color: # 616161; font-weight: 400;}

font-weight: 400; is the normal font weight and font-weight: 700; is a bold or thick font weight, I think that's all I have to say about how to install the Google font into a blogger template. Hope it can help you resolve web font issues.