Best 2 Know

The Ultimate Blogging Resource

  • Advertising
  • WebHosting
  • Contact Us
  • Blogger
    • Blogger Templates
    • Blogger Tutorials
  • Browser
    • Firefox
    • Google Chrome
  • Google
  • Internet
    • Facebook
    • Twitter
  • Thesis
  • Windows
  • WordPress
    • WordPress Themes
    • WordPress Plugins
  • More
    • Linux
    • Review
    • Solutions
    • Announcements

Change Blog’s Font Type with Cufón


Still at the font embedding series, this time I’ll share how to change blog’s font type with Cufón. Few days ago, I write about how to change blogs font using some services. Also I’ve write about one of them, sIFR, which we know it use Flash. Cufón is different, it use javascript to render the font type.

Step 1 – Download Cufón

Download the Cufón javascript file. You can download the compressed version or uncompressed version. But I suggest you to use the compressed version.

Step 2 – Generate Font

Generate your font on its official site. The name of the resulting file will include the name of the font and the weight of the font (as a number – 400 is equivalent to “normal” and 600 means “bold”). The name of the file doesn’t actually matter at all, but it makes it easier for you to identify your fonts.

Step 3 – Integrate on the Blog

This is the step where you must add the javascript code to your blog. This code placed before </head>

<script src=”cufon-yui.js” type=”text/javascript”></script>
<script src=”Vegur_300.font.js” type=”text/javascript”></script>
<script type=”text/javascript”>
Cufon.replace(‘h1’);
</script>

Code above is just example and it use one type of font.

Step 4 – Make IE Work

Unfortunately one problem remains with Internet Explorer. In most cases, there is a short but visible delay before the text is replaced. You can avoid this issue by inserting the following code right before the closing </body> tag (or before any external scripts such as Google Analytics).

<script type=”text/javascript”> Cufon.now(); </script>

Its Done!!! Save your template and preview.

Also see

>>> Official Cufón Documentation

Subscribe via Email

Share this:

  • Twitter
  • Facebook
  • Pocket
  • Print
  • WhatsApp
  • Email

Related

June 17, 2010 Ritesh Sanap Blogger Tutorials Blog Design Series, Font embedding

Comments

  1. Leemara says

    June 18, 2010 at 9:07 am

    nice post brother..,

    Reply
  2. Ritesh Sanap says

    June 18, 2010 at 9:38 am

    @Leemara
    Thank you . We always try to help you in a simplified way

    Reply

Leave a Reply Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Post navigation

Previous Previous post: How to add Custom Favicon to blogger blog
Next Next post: How to host javascript on blogger

Currently Trending

  • How to download Specific parts of YouTube videos
  • How to Change the Welcome/Login Screen in Windows XP ?
  • h4x0r ( Hacker ) - Blogger Template
  • Windows Vista CD key
  • Add/Remove page/Post View Counter Widget For Blogger
  • Free Online Angry Birds game
  • How to Make Your Own Avatar
  • How to Download Documentation for offline viewing - Dash
  • How To Change Windows XP Shutdown Dialog Box

Get Latest post in your Inbox

Random Posts

From Netbook to Jetbook- Make your notebook super fast

March 14, 2009 By Ritesh Sanap 5 Comments

How to add Programs to Right-Click – Customise your Right Click

July 10, 2008 By Ritesh Sanap Leave a Comment

Alternate Table Row Color

February 3, 2012 By Ritesh Sanap Leave a Comment

Making India Proud – Abhinav Bindra Wins Olympic GOLD MEDAL

August 11, 2008 By Ritesh Sanap Leave a Comment

ASCII Text Generator

March 19, 2009 By Ritesh Sanap Leave a Comment

WordPress

HTTP2 Server Push for W3 Total Cache Minify plugin

August 17, 2016 By Ritesh Sanap 5 Comments

How to Disable Emojis in WordPress

January 6, 2016 By Ritesh Sanap Leave a Comment

JetPack Related posts and Sharing not working with NGINX

November 10, 2015 By Ritesh Sanap Leave a Comment

Simply Pure – WordPress Theme

November 2, 2014 By Ritesh Sanap 2 Comments

Advanced What should we Write about next? – WordPress Plugin

July 28, 2014 By Ritesh Sanap Leave a Comment

How to Disable Self Pingback or TrackBack

January 16, 2014 By Ritesh Sanap Leave a Comment

BlueStrap – WordPress Theme

January 1, 2014 By Ritesh Sanap 15 Comments

How to Create Multiple Excerpts in WordPress

December 24, 2013 By Ritesh Sanap Leave a Comment

How to Disable Auto Update in WordPress

November 21, 2013 By Ritesh Sanap Leave a Comment

How to Delete Feedbacks from JetPack Contact Form

November 19, 2013 By Ritesh Sanap 9 Comments

Recent Posts

  • HTTP2 Server Push for W3 Total Cache Minify plugin
  • How to show hidden files and folders in Mac OS X
  • How to Disable Emojis in WordPress
  • Canva – Online Photo Editor
  • JetPack Related posts and Sharing not working with NGINX

Archives

Recommends

  • DigitalOcean – Cloud Hosting
  • Dropbox – Cloud Storage
  • Elegant Themes – WordPress Themes
  • LastPass – Password Manager
  • Like us on Facebook
  • Follow on Twitter
  • +1 on Google
  • Subscribe via Email
  • RSS Feed

© 2023 Best 2 Know · All Rights Reserved · We ♥ DigitalOcean