ADVERTISEMENT
I have been asked many times how I use my own font LT Oksana, as a custom font throughout this blog as I do. The answer is simple, with Cufón of course! And I am going to share with fellow user's of the Blogger platform just how to use Cufón in your Blogger blog!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
- A place to host javaScript files. Some that I have heard of are DropBox, Google Code, Fileden, and Ripway
Grab the Cufon Script
If all of those things have been aquired, head on over to the Cufón website, and click the "Download" button (circled in pink in the screen capture image shown below) to get a copy of the main Cufón javaScript you will need. Saving the file depends on your browser, but just be sure it saves with a ".js" extension.
Completing the Generator Form
Directing 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.
Complete the form by checking the box beside the text reading, "I acknowledge and accept these terms," (above screen capture) and click the "Let's Do This!" button (Shown in screen capture below) to generate your own custom font javaScript file.
Depending on your browser, you will somehow be prompted to save this file. (Shown in screen capture below)
Adding the Code
Now that you have downloaded the Cufón javaScript as well as the script for your custom font, you will need to upload them to your javaScript host and get their public URL's.Insert those URL's where indicated in the code shown below:<script type="text/javascript" src="YOUR_MAIN_CUFON_SCRIPT"></script>
<script type="text/javascript" src="YOUR_CUSTOM_FONT_SCRIPT"></script>
<script type="text/javascript">
Cufon.replace('h3');
</script>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.
Back up your Blogger template by downloading the current template, then paste the code (edited to replace my dummy text with your actual javaScript URL's) into your Blogger HTML's
<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.
