Before We Begin...First things first, for this to work, you will need the following:
- A Blogger Blog
- A font file that permits Web Embedding. This is very important. Many fonts require the purchase of an additional license if they do permit web embedding. All of my fonts do for instance, for the most part at least. So be sure that you are allowed
Completing the Generator FormDirecting our attention back to the Cufón website, begin the form by clicking on the browse button under the Heading that reads, "Select the font you'd like to use," to do just that. (Screen capture shown below)
Make sure the checkbox regarding permission to web embed is checked. (As shown in screen capture below)
Proceeding down the form are the options pertaining to the glyphs or characters to be included in your custom font. "Basic Latin" is checked, and you might also want to check the box just below that as well, "Latin-1 Supplement" which should cover some commonly used accent characters. (Depicted in screen capture below)
A section labled, "Security" comes after this on the form. If using a custom domain, it is a good idea to enter your domain in the text box provided, this limits your custom fonts usage to that domain. Otherwise leave this textarea blank/empty. (Shown in screen capture below)
Options for the Performance and Size of the custom font will be next. I recommend using the default input for font scaling, which I believe is 360 units per em. I would however, change the "units allowed for path optimization" to "0" and uncheck the box beside it that reads "Allow path optimization," however this is optional and may not suit your needs.(Shown in screen capture below)
I would also make sure the box next to "Include kerning tables (improves readability but slightly increases file size)" is also checked. It may increase file size, but... if the file is not too large already and the font is well kerned, it might be worth it. It's really a matter of preference or necessity really.
Depending on your browser, you will somehow be prompted to save this file. (Shown in screen capture below)
Highlighted in green in the code above is the h3 tag. It designates that all occurances of text within an h3 tag are to be replaced with Cufón. I chose to use h3 since in the majority of Blogger templates, h3 tags are used for post-titles. In that case, all post titles will display in the custom font. If you would like or feel capable, add or change this section as desired.
<head>section, just after
]]></b:skin>(Get to your Blogger HTML via the Blogger Dashboard under the "Design" tab and subcategory "Edit HTML")
Save your new template & then take a look at your blog to see your new custom fonts in action! For more advanced styling options, visit GitHub Styling.