There are about 84 Google Web Fonts that you can readily select from your Template Designer to be used in your Template. On the other hand, there are about 600+ supported web fonts in Google Fonts library - and yes, there's a way to use them in your blog. Here's how:
Note: This method will also work for non-dynamic templates.
Step 1:
Go to Google Fonts and search for the font that you want to use. In my example, I'm going to search for 'Amatic SC'. In your search result, you should see three smaller buttons next to a big blue button that says 'Add to Collection'. You need to click on the middle button (Quick-use).
Step 2:
-Now, scroll down to item
-Locate 'Add this code to your website' and copy the code shown in the 'Add this code to your website' column.
This is what I've got:
Next, go to your Blogger's Dashboard
- Template
- Edit HTML
- Find for <head>
- Paste the code that you've gotten directly below <head>
Input the line that you've copied here:
Step 5:
Next, depending on what you want to change, copy one of the CSS codes below, and go to Template Designer
- Advanced - Add CSS
- paste the whole code
- Press enter after the last character of the last line
- Apply to Blog.
a) To change Blog title font (Dynamic View)
#header.header .header-bar span.title a h1{
font-family: 'Amatic SC', cursive !important;
font-size: default !important;
}
b) To change post title font (Dynamic View)
.article-header h1.title a{
font-family: 'Amatic SC', cursive !important;
font-size: default !important;
}
c) To change body text font (Dynamic View)
body{
font-family: 'Amatic SC', cursive !important;
font-size: default !important;
}
d) To change link font (Dynamic View)
a, a:visited, a:hover{
font-family: 'Amatic SC', cursive !important;
font-size: default !important;
}
e) To change Description font (Dynamic View)
#header .header-bar .title h3{
font-family: 'Amatic SC', cursive !important;
font-size: default !important;
}
As usual, I can't possibly list down the code for all the sections here. So, if there's a particular section that you'd like to change and it hasn't been covered already, feel free to leave a comment, and I'll update the list accordingly.
Note: This method will also work for non-dynamic templates.
Step 1:
Go to Google Fonts and search for the font that you want to use. In my example, I'm going to search for 'Amatic SC'. In your search result, you should see three smaller buttons next to a big blue button that says 'Add to Collection'. You need to click on the middle button (Quick-use).
Step 2:
-Now, scroll down to item
-Locate 'Add this code to your website' and copy the code shown in the 'Add this code to your website' column.
This is what I've got:
Next, go to your Blogger's Dashboard
- Template
- Edit HTML
- Find for <head>
- Paste the code that you've gotten directly below <head>
Step 3:
Before clicking on 'Save Template', copy and paste '</link>' (without quotes) towards the end of the line that you've just pasted, as such
<link href='http://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='t
ext/css'></link>
You can now hit the 'Save Template' button
Step 4:
Go back to the Google Font page and copy the CSS bit from '4. Integrate the fonts into your CSS'
Next, paste what you've copied, WITHOUT THE SEMI-COLON ';' AT THE END OF THE LINE into the box below, then click on 'Generate Code'.
Input the line that you've copied here:
Step 5:
Next, depending on what you want to change, copy one of the CSS codes below, and go to Template Designer
- Advanced - Add CSS
- paste the whole code
- Press enter after the last character of the last line
- Apply to Blog.
a) To change Blog title font (Dynamic View)
#header.header .header-bar span.title a h1{
font-family: 'Amatic SC', cursive !important;
font-size: default !important;
}
b) To change post title font (Dynamic View)
.article-header h1.title a{
font-family: 'Amatic SC', cursive !important;
font-size: default !important;
}
c) To change body text font (Dynamic View)
body{
font-family: 'Amatic SC', cursive !important;
font-size: default !important;
}
d) To change link font (Dynamic View)
a, a:visited, a:hover{
font-family: 'Amatic SC', cursive !important;
font-size: default !important;
}
e) To change Description font (Dynamic View)
#header .header-bar .title h3{
font-family: 'Amatic SC', cursive !important;
font-size: default !important;
}
As usual, I can't possibly list down the code for all the sections here. So, if there's a particular section that you'd like to change and it hasn't been covered already, feel free to leave a comment, and I'll update the list accordingly.
EmoticonEmoticon