The Easiest Way to Change Blogger Fonts

How to Change Blogger Fonts – The main content of a blog is writing or text. Good writing will be easier to read. It’s like we write on a paper, when our writing is good, people will feel at home in reading our writing.

Writing or more specifically, letters have various styles and shapes that we can call fonts.

Font itself is one of the important things in a design, especially blogger template design.

In choosing a font, the first thing we should emphasize is not how beautiful the font is, but how comfortable it is for visitors to read.

Back again, the main purpose of a blog itself is to present written content. If the writing cannot be read, visitors will also not feel at home for long on our blog.

So in changing blogger fonts, we not only pay attention to the design aspect but also the convenience aspect. Just go to the tutorial on how to change the blogger font CHAPTER 3 in create your own blog template.

How to Change Blogger Fonts

Font Provider Site

There are many sites that provide fonts, some are free and some are paid. For the font that we will use in this practice, I suggest taking it from Google Fonts. Because we don’t have to bother hosting the font. We just need to import it using CSS.

There are also many types of fonts on Google, so you don’t have to worry about running out of options

Selection of Fonts

There are many types of fonts. However, what is recommended for blogs, especially for content and titles, is 2, namely serif and sans-serif.

install google fonts on blogspot

serif

Serif is a type or form of font that has a hook at the end of the line. Example: Times New Roman, Roboto Slab, etc

Sans-serif

Sans-serif is the opposite of serif which means it doesn’t have a hook at the end. Example: Arial, Roboto, etc

We can choose one of these font types or we can choose both and combine later.

Easy way to change blogger template font

Site access fonts.google.com

Filter category with serif and sans-serif checklists.

how to change blogger font

Select the desired font.
My recommendation for serif is roboto slab, noto serif, or merriweather and for sans-serif you can use roboto, noto sans, open sans, quicksans, poppins, etc.

In this tutorial I’m using noto sans(sans-serif) and merriweather(serif). You can choose according to your taste, the most important thing is that the writing can still be read.

Next there will be a choice of styles to be imported.

how to change blogspot font

Select the style by clicking the +Select this type button.

change blog font

Normally what will be used in our blog is regular 400, regular 400 italic, and bold 700. But if you want to select all of them it’s also okay, maybe in the future the font will be varied to some additional elements.

A menu will appear on the right side of our screen.

Focus on use on the web.

install google fonts on blogger

Select the link that I marked as above and copy and paste it into word or notepad first. The point is to save
https://fonts.googleapis.com/css2?family=Noto+Sans:ital,[email protected],400;0,700;1,400

Don’t forget to save the CSS rules first, which will later be used to call the fonts that we have imported.


font-family: 'Noto Sans', sans-serif;

How to install google fonts on your blog

Enter the following code above </head>


<script type="text/javascript">
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("link disini")
//]]>
</script>

Replace the link here with the google font url that was saved earlier. If the imported font is more than one, add the loadCSS again. More or less like the following


<script type="text/javascript">
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("link disini"); loadCSS("link disini")

//]]>
</script>

The final result of the script is more or less like this


<script type="text/javascript">
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,[email protected],400;0,700;1,400;1,700"); loadCSS("https://fonts.googleapis.com/css2?family=Merriweather:ital,[email protected],400;0,700;1,400;1,700")

//]]>
</script>

If you have added the CSS font family to the element that we want to change the font.

For those who follow the guide to creating their own blog template, first we change the font as a whole or the font that will be used for the main content.

Look for the CSS body code that we added in the previous series as follows


body{
	position: relative;
	background-color: #f8f8f8;
	font-size: 14px;
	color: #656565;
	word-wrap: break-word;
	margin: 0;
	padding: 0;
}

Add CSS rules in it to be more or less like the following


body{
	font-family: 'Noto Sans', sans-serif;
	position: relative;
	background-color: #f8f8f8;
	font-size: 14px;
	color: #656565;
	word-wrap: break-word;
	margin: 0;
	padding: 0;
}

For the title font, please look for the CSS heading, which looks more or less like this


h1,h2,h3,h4,h5{display:block;font-weight:700}

Add CSS font family to be like this


h1,h2,h3,h4,h5{display:block;font-weight:700;font-family:'Merriweather',serif}

Save the template and reload your blog. Then the font will automatically change.

change blogger blog font title

If there are errors or difficulties, you can ask them directly in the comments. Or you can match your source code with mine.

Here you can download the final source code for this session

Congratulations, until here you have completed Chapter 3 in The Complete Tutorial to Create Your Own Blog Template for Beginners.

Please continue to the next chapter or see the Table of Contents Guide to Creating Your Own Blog Template For Beginners

Leave a Reply

Your email address will not be published. Required fields are marked *

Get Free Online Cooking Classes
Are you looking for resources on how to cook online that will help you in the culinary arts?
Yes, Please