 |
| GOOGLE-FONTS-ON-BLOG |
My dear bloggers, today you will learn about how to install Google Web Fonts on your blog or website to improve text format. Google offers a lot of free Web Fonts. You can choose your favorite font.
The better look of any website is an important part of success. If your site is not looking better, the user will not like your site in spite of the quality content on the site. So it is very important for a website or blog. With Google Web Fonts, you can change the text format and make your site's design better.
If you are a WordPress user, then you can easily install Google Fonts on the WordPress blog using the plugins. For this, you can use Easy Google Fonts Plugins. But if you are a BlogSpot(Blogger) user and want to add google web font with the CSS code, you will have to follow the below steps.
If you are a WordPress user, then you can easily install Google Fonts on the WordPress blog using the plugins. For this, you can use Easy Google Fonts Plugins. But if you are a BlogSpot(Blogger) user and want to add google web font with the CSS code, you will have to follow the below steps.
How to install Google Fonts on your Blogger Blog?
Step 1:
First, you go to the Google Fonts website. Here you will find lots of fonts. You can search the font according to the categories, trends, and languages. Some of the top categories are given below.
1. Roboto
2. Serif
2. Serif
3. Sans Serif
4. Display
5. Handwriting
6. Monospace
You can also search the font through the search box as well. You can search the font according to your choice. Follow the below steps.
1. Click on Plus Icon in fonts.
 |
2. Click the BlackBoard in the bottom.
Step 2:
Now here you will find Embed, Customize, Standard and @ Import options. You can customize the fonts with these options. As you want to change font-weight or change the font's language then you can click on the Customize option. In Font-weight, you can make the font smaller, bold, bolder and boldest. In my opinion, you can select Regular 400.
Now you have two methods. You can add direct Google fonts to the blog and second you can add google fonts through the CSS code. You will learn both the ways as below.
Method 1: Add Google Fonts on Site Directly
You don't have to follow more steps in this option. You can use google font only by following two steps.
Add Stylesheet URL On Site Header:
In this, there is a stylesheet link of the fonts. Which you have to add direct to your site's <head> section or <body> section. It is better to Paste this code before </ head> section of your blog or </ body> section.
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
If you are using this link in Blogger (BlogSpot), you have to close this link with backword slash (/) because blogger template or theme is coded in XHTML and empty tags are always followed by backward slash (/).
If you are using this link in Blogger (BlogSpot), you have to close this link with backword slash (/) because blogger template or theme is coded in XHTML and empty tags are always followed by backward slash (/).
Change font-family on CSS:
Now open the CSS file of your blog and paste this code. If there is any other font-family replace it otherwise fonts will not work.
If you are a blogger user then go to the blog dashboard >> Template >> Edit HTML section and add this code in CSS code. If you are a WordPress user then you can add this code to the style.css file by going to the WordPress dashboard >> Appearance >> Editor option.
Method 2: Install Google Fonts on Your Site Using Only CSS
How to add google fonts to blog using just CSS code. If you do not want to use extra script and stylesheet files on blogs, then you can use google fonts in the blog only with the help of CSS coding.
1.Add style URL in CSS file using @import:
For this, you can add the given URL in the stylesheet code in your blog's CSS file. From this, you can add font-family instead of Roboto whatever you want to do you can.
@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Roboto');
If you do not want to add font-family CSS code in this way, then follow this second method.
2. Add Fonts Only CSS Code:
In the second method, you can open the link which is given in the google fonts stylesheet code, which contains the CSS code that you want to add in CSS coding of the blog.
Copy the below URL paste this in the browser to get CSS code
Like here, the URL of the "Roboto" code is given, it gets the CSS code when you open it. Copy this code and add it to your blog's CSS file.
3. Replace Other Font-family to your Font-family
Now, if there is a other font family, you have to change it with your font family in the css file, then change it. Finally, all the process is completed. Now open your site and press Ctrl + F5 to refresh the page and see the font style of your site has changed.
When some one searches for his required thing, therefore he/she wants to be available that in detail, so that thing is maintained over here.
ReplyDeleteƬhis іs a bin of unsharpened Swiss Army Knife
ReplyDeletebⅼades.
Thank you for writing this amazing post on how to add google fonts in blogger.
ReplyDelete