Now I have to admit, after dozens of failed attempts, heavy experimentation and keyboard-bashing I was almost ready to give up on this and admit defeat.Most of the techniques I tried were either unreliable or simply did not work!
Luckily, @kernest and @abu_farhan came to my rescue via Twitter by pointing me in the direction of Kernest's free (and premium) font-based service.
Why use Kernest?
When designing for the web, @font-face is the most-used technique for replacing boring standard fonts for stylish typographical styles.Using @font-face we would need to find reliable hosting for the fonts we use in our designs that enables us to utilize fonts across with no domain-restrictive policies in place. There are also permission and copyright issues involved with embedding fonts in web pages, making the whole process even more complicated. Particularly as @font-face doesn't play too well with Blogger hosted sites...
Kernest is a free hosted service which we can use to embed a whole variety of free-licensed non-standard fonts in our Blogger template designs with ease:
Cross-domain issues are not an issue when using Kernest, though you will need to sign up for a free account and add the URLs for the sites on which you'd like to use your fonts so they're properly referenced.
You don't need to download or host any scripts on your own hosting account. Simply add the embed URL generated for your site in your Blogger template code and tweak the CSS for the textual areas of your design where you'd like your non-standard fonts to appear.
Kernest offers a huge variety of free fonts under various licenses including Creative Commons and GPL. Premium fonts are also available on a subscription basis. Browse by font style (ie: Serif, Geometric Sans, Oblique); by designer, font foundry or usage permissions.
Some of Kernest's most popular free fonts include:
Chunk5 by The League of Movable Type (one of my personal favorites).
Komika Axis by Apostrophic Labs
Bitstream Vera Bold by Bitstream
MgOpen Modata Bold by Magenta Ltd.How to use Kernest with Blogger templates
In order to use Kernest to embed fonts in your Blogger based sites, you'll need to create an account and sign in.Browse through the archives of fonts available and find a style you'd like to use in your site. Free-to-use fonts will display an "Embed" link beside the example text which opens a pop-up like this:
You can add a new site in which to embed fonts by pasting the URL of your blog in the space provided. After you've added a site, it will appear in the "Your websites" list whenever you are signed in.
Once you've added and selected your site, you'll be presented with the font embed code which you'll need to copy to your clipboard.
Add the font embed code to your template
Go to Design>Edit HTML in your Blogger dashboard and locate the opening
<head> tag. Paste your Kernest embed code immediately after this tag, like this:
At this point, it's a good idea to save your template.
How to change fonts for headings, paragraphs and other text areas of your template
With the embed code in place, we can replace particular text areas of our Blogger design with the font(s) we have chosen from Kernest.This is achieved by referencing the fonts in the CSS font-family tags. For example, to use Romeral for post titles, we could add the following CSS tag just before the closing
</b:skin> tag in our Blogger template:.post-title h3 {
font-family: 'Romeral';
}
The CSS tags you need to use for your preferred font can be found on the project page for each of your sites. You can access the project page while logged in to Kernest by visiting the "Your Websites" link at the top of every page.
Here are some commonly used text areas within Blogger layouts for which you may want to replace the fonts:
| Description | Reference |
|---|---|
| The header section (title and description) | #header |
| Blog title | h1 |
| Post titles | .post-title |
| Body of blog posts | .post-body |
| Sidebar headings | #sidebar h2 |
| Sidebar text | #sidebar .widget-content |
| Footer section | .footer |
Once you've added the relevant CSS tags to the
<b:skin> section of your template, preview your design in your browser to see the font changes in action then be sure to save your template.Do you use Kernest for your Blogger template designs?
If you're already using non-standard fonts with Kernest, please let us know of your experiences using this free service and showcase your sites for others to see this technique in action.Or if you successfully use an alternative technique, I'd love to hear about it so please feel free to leave your comments below.
16 Comments:
This is great! I've been thinking about using font replacements. Kernest sounds perfect!
I just changed my blogger pos title font. It's so easy ;)
nice share, this font make my blog beautiful
Very nice. It took me a little work to figure out the exact class styles I needed to change, but I liked the "Forque" found at http://tup-wanders.kernest.com/fonts/forque and successfully implemented at http://god-at-the-center.blogspot.com/
It's implemented on the links at the top and on the post heading.
Thanks Amanda! I've been tweaking my blogger blog for a while but my recent focus has been reducing upload time. I noticed my upload time was getting crazy long so I went back to my template compressed some CSS, changed how I upload some of my imaging, and started using the page break feature in my posts. This dramatically reduced my upload time. I'd like to add some creative font titles but the methods I've found in the past have killed my upload time. Does your method affect upload time????
Hi Amanda,
The link to 'kernst' seems to be broken. Has anyone else had this problem?
The link is fine. Try refreshing.
I used to come across other services similar to this too.
@Jennifer - I've not really noticed much of a delay when using Kernest. At most there's been a split second delay in loading the fonts (when I'm online with my 3G dongle), but that's all.
If your blog template is loading slowly, could this possibly be related to your host? I host all of my javascripts and images with Google and now see virtually no delays even on image heavy templates (Picasa Web Albums for images, Google Code for scripts, Google Pages for everything else).
If your posts are image heavy, another option would be to reduce the number of posts displayed on the home page and make use of the "more" feature to hide images which appear after your read more link.
Hope this is helpful to you!
Thanks amanda, as usual, great post! :D never taught i could use @font-face on blogger, gonna try it later.
wonder what happen when kernest going down, is it the font change to default or it just disappear just like that?
Can't we use Microsoft Small business office live to use font face?
I have never tried,but probably it should work.
I have used this free service to host javascript and background images for my blog ,their service is really good.
Just launched from Google:
http://code.google.com/webfonts
Very similar to Kernst.
Hey Amanda,
I am wondering why there is a huge space between
"Here are some commonly used text areas within Blogger layouts for which you may want to replace the fonts:" AND
"Description Reference".
Maybe there is/are things that I am not able to see. I'm glad I found this post.
yes thank you for the post packers and movers
It's great, then we can make our blog's fonts exactly same with Google Adsense's fonts. Make our ads not like ads....
thanks for your post ...
pls ,visit my blog.......
http://krazzycollections.blogspot.com
For sharing thank you very much wish success
Post a Comment