How To Add Custom Font to Blogger from Google Web Font

How To Add Custom Font to Blogger from Google Web Font


Using the Google Web Fonts service, you run a filter to find select fonts based on width, thickness, and slant.Better yet, you can test out how using the custom fonts in Blogger would appear by modifying the size, and viewing it in a small display window. If you like a couple different fonts, you can save them to your collection to come back to later.

Adding a Custom Font to Blogger from Google Web Font

Step 1 First of all To browse the Google Fonts library,There are 650 font families in the collection right now, and they keep adding more, so you may want to sort them.
To organize the fonts by style, you can use the menu on the left side. The top menu lets you to add and preview your own text using the 'Preview Text' field. From the same menu, you can pick the 'Size' and sort the fonts in 'Alphabetical order', by 'Date added', 'Number of styles' and 'Popularity'

Step 2. Once you decided what font you want to use, click on the 'Add to Collection' button and then hit the 'Use' tab. This will take you to the 'Almost done!' page that will give you a link to the style sheet found in the 'Standard' tab (point 3) and the CSS style (point 4).
The link to style sheet would look like this:

 rel='stylesheet' type='text/css'>
And the CSS style would look like this:
fontfamily:
'FONTNAME', cursive;

Step 3. Now that you have selected the fonts and have a general understanding of the different types of fonts available, you can head over to your Blogger blog. Open up the Dashboard and make sure that the first thing you do is to create a backup of your template: go to Template and press the "Backup/Restore" button on the upper right side. That way, you can revert the changes back to the original in case something goes wrong.
Step 4. From the same "Template" location, press the "Edit HTML" button
Step 5. Click anywhere inside the code area and press CTRL + F at the same time (PC) or Command + F (Mac) to open the Blogger' search box and type inside the search box.Press Enter and it will take you to the tag, which will be highlighted in yellow:
add font on blogger
Step 6. Directly above the tag, copy & paste the link to the style sheet provided by Google Web Fonts (step 2). To prevent any errors, add a forward slash (/) right before the closing angle bracket(>), like this:

 rel='stylesheet' type='text/css' />
Step 7. To apply the font on a specific part of our blog, we'll need to find the CSS selector and add the CSS style (point 4) just AFTER the curly bracket.
For example, if I would want to add the "Rancho" font to the posts and comments titles, I will paste the CSS style like this:
h3.posttitle,
.comments h4 {
fontfamily:
'Rancho', cursive;
fontsize:
28px;}
Where "h3.posttitle, .comments h4 {" is the class selector for the post and comments titles. Note: to change the size of your font, add the "fontsize:28px;" part as well, and change the "28px" value to make the font bigger/smaller.
add google font
You can also add the same CSS to "Template" > press the "Customize" button the right side, navigate to "Advanced" > "Add CSS" tab and paste the CSS code in the empty box.

Step 8. Finally, press the "Save Template" button and you're all set!
Previous
Next Post »

Thank you! ConversionConversion EmoticonEmoticon