blog.si.log. \'blòg-së-lòg\

BLOG-ger. SI-nangag (fried rice). it-LOG (fried egg).
CUSTOMIZE YOUR BLOGGER BLOG.
All the tricks, hacks and treats while enjoying your breakfast.




Blogger 101. How-to's, tutorials, all the basics you need to learn about Blogger (dot) com.
Blogger Tweaks. Style and dare to tweak your blog. Make it custom. Make it different.
Blogger Fixes. Encountered errors, glitches while blogging? Check here for possible solutions.
Blogger Conditional Tags. If, Else then WHAT? Learn the secret behind most of the tweaks on blogger.

2 ways to add custom fonts to your blog

View demo.


Want to have a customized font for your header, post and sidebar titles, even your post content? There are actually two ways to go about this.


custom font on blogger


Technique #1. Using Google Web Fonts.
The Google Font Directory provides high-quality web fonts that you can include in your pages using the Google Font API.

Applying a font is easy: just add a special stylesheet link to your web page, then use the font in a CSS style.

-Google Code Labs

View demo for a customized sidebar title.

It's pretty easy to install a stylish Google web font.
1. Choose a font from Google font directory.
Google Web Font version 1
Google Web Font version 2
2. Filter the search based on category, thickness, script and style.
3. Once you find a font to suits your preference, ADD IT TO COLLECTION.
4. REVIEW.
5. If you're okay with it, get ready to USE it.
6. Follow the instructions from Google on how to add and integrate it to your website.


How to install Google Web Font to Blogger?
Here is a step-by-step procedure from Simple Blog Tutorials, including:
1. How to get rid of the XML error:
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The reference to entity "subset" must end with the ';' delimiter.

2. How to add the customized font to different sections on Blogger.


Browser Support for Google Web Fonts.
Per Google Font API, the browser compatibility are as follows:
Google Chrome: version 4.249.4+
Mozilla Firefox: version: 3.5+
Apple Safari: version 3.1+
Opera: version 10.5+
Microsoft Internet Explorer: version 6+



Technique #2. Using sIFR Generator.
This technique is more handy IF (1) your desired font isn't included in the Google Web Fonts directory and (2) you want a custom font COMPATIBLE TO ALL BROWSERS. However, this would require you to use an online sIFR generator and an account to host the javascript, flash (swf) and css files (e.g. Hostwebs or Awardspace for Blogger users.) The custom font may be added to post titles, sidebar titles, and even post content.

View demo for custom post titles.
View demo for custom post content.

Here's how:
How To Use A Cute Font For Your Blogger Post Titles
How To Use a Custom Font for Your Entire Blogger/Blogspot Posts


Remember:
1. Using several font styles may slow down the loading of your website.
2. Using one or two font styles on several sections of your blog (including the post content) may have the same effect as above.


Related Blogs and Website.
Google Web Fonts
Add Custom Fonts to Blogger with Google Web Fonts
How To Use A Cute Font For Your Blogger Post Titles
share. comment. subscribe. link.


Share.This.Post.
Share.Your.Thoughts.
Subscribe.To.The.Comments.
Subscribe.To.Websilog.
Create.A.Link.


<< 5 Shared Thoughts >>


Kathrine
March 2, 2012 at 10:44 PM

Thank you so much for the post.

Read 2-3 articles to use custom fonts for my blog but ended up unsuccessful.

After reading this post I solved the problem. Cheers.

And your blog design and fonts look awesome. =)

Thanks.

Kathrine

Anonymous
April 7, 2013 at 9:44 AM

Attractive section of content. I just stumbled upon your site and in accession capital to assert that I get
in fact enjoyed account your blog posts. Any way I'll be subscribing to your feeds and even I achievement you access consistently fast.

Also visit my homepage; christianlouboutinoutletshopx.com

Anonymous
April 21, 2013 at 11:03 PM

Would you be involved in exchanging hyperlinks?


Take a look at my website - クロエ バッグ

Unknown
February 2, 2016 at 2:43 AM

how to add custom fonts to your blog html great thanks for great posting

Ace Utilities Keygen

Unknown
September 16, 2018 at 11:25 PM
This comment has been removed by the author.

Share.Your.Thoughts.

Copy below HTML link to quickly create a link to this post.



back to share



about web.silog
Curabitur sodales leo et quam venenatis eu faucibus quam placerat. Aliquam metus diam, pretium nec commodo at, tristique nec mauris. Vestibulum urna massa, convallis vel laoreet in, ultrices eu nisl. Nulla facilisi. Nam tristique mollis semper. Mauris ac vestibulum lorem. Mauris erat libero, lobortis nec faucibus non, tempor in leo.

Nulla facilisi.
Nulla facilisi.
Nulla facilisi.


about the blogger
My Photo
In hac habitasse platea dictumst. Aenean congue, lacus in sagittis tempus, dui risus pretium nunc, semper bibendum arcu libero sollicitudin diam. Pellentesque lectus lectus, consectetur at sodales sit amet, sollicitudin eu augue.