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.
Komentar
Posting Komentar