 |
| Before |
 |
| After |
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).
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 '3. Add this code to your website', and copy the code shown.
This is what I've got:
Now, scroll down to item '3. Add this code to your website', and copy the code shown.
This is what I've got:
<link href='http://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>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:
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='text/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:
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)
b) To change post title font (Dynamic View)
c) To change body text font (Dynamic View)
d) To change link font (Dynamic View)
e) To change Description font (Dynamic View)
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.
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{
!important;
font-size: default !important;
}
!important;
font-size: default !important;
}
b) To change post title font (Dynamic View)
.article-header h1.title a{
!important;
font-size: default !important;
}
!important;
font-size: default !important;
}
c) To change body text font (Dynamic View)
body{
!important;
font-size: default !important;
}
!important;
font-size: default !important;
}
d) To change link font (Dynamic View)
a, a:visited, a:hover{
!important;
font-size: default !important;
}
!important;
font-size: default !important;
}
e) To change Description font (Dynamic View)
#header .header-bar .title h3{
!important;
font-size: default !important;
}
!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.
