Google Font for Blogger And WordPress
Today I will show you how to use custom Google font in website. Be it your blogger or WordPress site, you can easily use any custom font.
First, you have to decide which language and which font you will use. To do this, open the Google Fonts site and select the font.
Then you have to decide – in the site article, heading, subheading, the title, what font to change? You can use different fonts for these if you want.
However, I would recommend that you use a font for the title, a font for all the headings, and a font for the paragraph. Use these three types of fonts, but you can use only one font if you want.
With the code I will give you today, you can change only the font of the title and paragraph. First, you download my file and open it in your notepad.
In Notepad you need to prepare the code for your site and then use it. Open two tabs in your browser – the website Admin panel, Google Font site. Also, open the notepad and follow the steps below.
past code after <head> tag:---------
<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
CSS Code:---------
p {
font-family: 'Dosis', dosis;
}
H1 {
font-family: 'Roboto Slab', serif;
}Two different fonts will be used here, so two separate “stylesheets” will be inserted in the head section. If only one font was used, then only one “stylesheet” should be used.
In this case, you need to use the CSS code separately, for titles, paragraphs, and headings. But in CSS code the font will remain the same, the only change will be p, h1, h2, etc.
First Customize Font Code
Step 1:-
- First, go to the Google Fonts site and choose the font for the title.
- Copy font title,
- Remove “Dosis” from the first “stylesheet” line and paste the title of your font,
Note:- If the title of your font is more than one word, leave no space between the two words. Fill in the “+” sign between the two words, see the second “stylesheet” line for an example.
Step 3:-
- Visit the Google Fonts site again and select the font for the paragraph,
- Copy font title,
- Remove “Roboto+Slab” from the second “stylesheet” line and paste the title of your font,
Note:- Read the note above.
Step 4:-
- In the first CSS code(p) you will see two font names. Remove the two font names and paste your paragraph font name.
- In the second CSS code(H1) you will see two font names. Remove the two font names and paste your Title font name.
Note:- Each word in the first font name in each CSS code will start with a capital letter. And the second font name will be in lower case.
Now that your font customization is complete, follow the steps below, according to your site.
Use Custom Google Font on WordPress Site
Step 1:-
- Copy two lines of “Stylesheet”,
- Go to your WordPress admin panel,
- Click on Theme file editor option under Appearance section,
- Choose header.php from right sidebar,
- Find <head> and past code after <head> tag,
- Update changes.
Step 2:-
- Back to the Admin panel,
- Click on customize option under the Appearance section,
- Now click on the Additional CSS option,
- Then copy the two CSS codes and paste after the complete CSS code,
- Update,
- Now Visit your site.
Use Custom Google Font in Blogger Site
Step 1:-
- Go to Your Blogger admin panel,
- Click on the Theme option,
- Then click on arrow mark and click on edit HTML option,
- Find <head> and past code after <head> tag,
Note:- There is a “>” at the end of both lines, you need to “/” before that, otherwise the theme will not be saved. That means a close tag (/>) must be applied.
Step 2:-
- Now search ]]</b:skin> tag,
- Past two CSS code before ]]</b:skin> tag,
- Save changes,
- Finally visit your site.
