How to Get a Personal Font Into Blogspot

You'll have to work with a bit of code if you want to use a custom font for Blogspot.

Using a personal font for Blogspot posts can be a hassle if you don't know Javascript. But some sites can help speed through the process by using sample code and sIFR, a free open-source Javascript solution for dynamic fonts. In order to use it, you'll need to put the font in SWF format and upload it to a hosting site. Some choices for free hosting include HostWebs and 000webhost.com.

Things You'll Need

• Personal font, in SWF format
• Webhost

Instructions

1. Upload your font to your webhost. Remember the URL for your font, which is usually something to the effect of: "username.hostname.com/font.swf". You'll need it later.

2. Download sifr.css, sifr.js, blogger-sifr.js, and index.htm from KevinAndAmanda.

3. Open blogger-sifr.js in Notepad. In the first codeblock, replace the URL after the word "src:" with the URL of your font in single quotes. The second, third, and fourth codeblocks apply the personal font to the title, date, and sidebar text respectively, so delete them if you don't want your font to be used for those blocks. If you want to also apply your personal font to your post text, create a new codeblock identical to the title codeblock but change the text after the word "selector" to "#main-wrapper h3," and decrease the font size to 20 px. Save the file.

4. Upload the files you downloaded in Step 2 to your webhost. Remember the URLs of these files as well, and keep them all in the same directory

5. Go to your Blogspot dashboard. Click "Layout," then "Edit HTML."

6. Before the closing header tag "</head>" place the following code:

   <link href='[sifr.css url]' media='all' rel='stylesheet' type='text/css'/>
   <script src='[sifr.js url]' type='text/javascript'/>
   <script src='[blogger-sifr.js url]' type='text/javascript'/>

   Replace the [url] blocks with the actual URLs of the files you uploaded.

Tips & Warnings

• You can convert a .ttf font file to a swf using the sIFR Generator website.

• You may have to restart your browser before seeing any font changes.

References

• KevinAndAmanda: How to Use a Cute Font For Your Blogger Post Titles

Resources

• sIFR Generator