How To Add Custom Font in Blogger Website

Hello Freinds! Today's post I will cover How To Add Custom Font in Median Ui Blogger Theme using the Font Directory or Google Web Fonts. Blogger has increased the collection of fonts available in Template Designer, but the options are still limited. One of the best and easiest ways How to add custom fonts to your blogger website is to use Google Web Fonts with over 600 to choose from you're sure to find one you like.

Font selection is very important for the appearance of a website or blog. If you choose the wrong font, you will feel less comfortable when reading and make visitors not feel comfortable spending time on one article. Definitely don't want that to happen. All visitors will run away, the blog will be quiet.

One of the most popular font providers is Google Fonts. This greatly facilitates web developers and UI Designers in producing interesting work. Apart from having a variety of choices, users are also free of charge or free. There are many cool fonts with various categories and models that can be tailored to your needs.

How To Add Custom Font in Median Ui Blogger Theme or Any Blogger Theme ?

first of all, you need to go to the official Google Font Website then search your favourite font in search bar then select your font.

After selecting your favourite font. there is two method to embed font code in your blogger theme.

Method 1

Step :-1 Add Stylesheet URL

Method 1 <link> is a standard method to install google font in blogger theme. if you want to install google font through this method. You will get the code look like below -


<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
<link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@500&display=swap" rel="stylesheet"/>

First, Go to Blogger Dashboard
Go to Theme/Template Section
Now Click on Edit HTML
Now Search for <head>tag

To find anything in blogger theme section press Ctrl+F buttons and then type term to search and press enter.

Copy the code provided below and paste it below the <head> tag.


<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
<link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@500&amp;display=swap" rel="stylesheet"/>

Step :- 2 How to use Google Font in blogger theme

if you want use this font in blogger website Use this CSS rules to specify font families.

font-family: 'Baloo 2', cursive;

To Apply This Font in Your Headings — copy the below css and Paste it just above the ]]></b:skin> tag.

/* For Changing font of heading */
h1, h2, h3, h4, h5, h6{font-family: 'Baloo 2', cursive;

Change the Font Family Which is marked with your own font family.

Method 2

Step :- 1 Add @import Url

First, Go to Blogger Dashboard
Go to Theme/Template Section
Now Click on Edit HTML
Now Search for <head>tag

To find anything in blogger theme section press Ctrl+F buttons and then type term to search and press enter.

Copy the code provided below and paste it below the <head> tag.


<style>
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500&display=swap');
</style>

Step :- 2 How To use google font in blogger theme

Step 2 are same as Step 2 of Method 1.

Conclusion

I hope you will like this post. This is Best Tutorial on How To Add Custom Font in Blogger Website. This Tutorial is working properly in Median UI and Fletro Pro Blogger Theme.If you face any problem and err you can put up your comment in to comment section.