How to use custom fonts on Blogger Blog?

It seems you are bored with the limited fonts on blogger! You can use only the available ones(if you are new in blogging. But after reading this post, you will be able to use custom fonts on blogger!). Though there are hundreds of fonts available on Google Fonts, why can we use only some of them?

So you wanna use custom fonts on blogger, right?
There are some ways with which you can use them!

In this post, I am gonna describe to you how to do it at all! So follow me till the end!

There are two ways to do this, one is using Google Fonts and the other is hosting your own fonts. So follow me:

1. Using Google Fonts

Google Fonts is a comprehensive way to use fonts on your website. The fonts are open source(freely available for use!) and can easily be used on websites(unfortunately not on blogger!).

So, to use Google Fonts, go to the Google Font's web page. Select your fonts and copy the link which they'll provide:

Now go to Blogger dashboard, select your blog and then click theme on the left sidebar:

Then click Edit HTML:

Now add the copied link in the head tag but don't forget to add the trailing slash(/) at the end of you copied text like this:

<link href = "https://fonts.googleapis.com/css?family=Ubuntu" rel = "stylesheet" />

Add it like this:

After doing this, search for header.title.font. You will be taken to the <Variable /> section. Now edit its value both for the header.title.font.small and header.title.font.Large to the font name you desire(here Ubuntu). Don't forget to use it as said in the Google fonts website. Here in this case, it will be like(for Large):

<Variable name="header.title.font.large" description="Title font (large)" type="font" default="$(default-value)"  value="normal normal 36px Ubuntu, sans-serif"/>

And this will be for small font(for mobiles):

<Variable name="header.title.font.small" description="Title font (small)" type="font" default="$(default-value)"  value="normal normal 24px Ubuntu, sans-serif"/>

Now save the theme!
And you will be able to see the font available on your blog!

Now you saw how to use a custom font on blogger using Google Font.

So now, we will use our web hosting to load web fonts on blogger! For this, you must have your own web hosting, i.e., a place where you edit and store your webpages and files!

Now, upload all your .ttf, .otf, .eot, .woff, .woff2 files on the folder that you can remember. Remember you have to upload all versions of the font with the given formats. This is because some web browser supports only specific fonts, and the others use only specific fonts. So upload all formats of the font files! You can generate your font kit using this tool.

Once you upload the files correctly, add the following code to the .htaccess file:

<FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
    <IfModule mod_headers.c>
        SetEnvIf Origin "http(s)?://(www\.)?(example.com)$" AccessControlAllowOrigin=$0
        Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
        Header merge Vary Origin
    </IfModule>
</FilesMatch>

Here, example.com is your domain.
So now open Theme tab again and add this code in your <Variable>

@font-face {
    font-family: 'fontName';
    src: url("example.com/fonts/font.ttf")format('truetype'),
           url("example.com/fonts/font.woff")format('woff'),
           url("example.com/fonts/font.woff2")format('woff2'),
           url("example.com/fonts/font.eot")format('eot');
}

Now you can edit the <Variable /> tag just as done ago but use fontName in the Value parameter as done ago with Ubuntu, sans-serif.

Hurray, now you have learned two methods of adding custom fonts to your blogger blog! Now you can use any font in your blog provided that you must have all the formats of that font!

Hope you liked this post! If so, don't forget to let me know how this was helpful for you in the comments section below!