Archives for June 2010

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

sIFR is one of the alternative way to change font type to beautify typography, especially in the heading (H1, H2, etc.), like Cufón. This time I’ll share how to use sIFR 2.0 in blogger templates.

The Steps

1. Download sIFR 2.0
2. Upload the javascript files from the downloaded zip file, those are sifr-addons.js and sifr.js.
   If you busy to upload those files, copy below code and paste before </head>
   

   <script src=’http://mbahrizh.googlecode.com/files/sifr.js’ type=’text/javascript’></script>
   <script src=’http://mbahrizh.googlecode.com/files/sifr-addons.js’ type=’text/javascript’></script>

3. Put the CSS code from the zip file, those are sIFR-screen.css and sIFR-print.css. If you busy to do that, copy below code and paste before </head>
   I’ve compress these codes.
   

   <style media=’print’ type=’text/css’>
   /* This is the print stylesheet to hide the Flash headlines from the browser… regular browser text headlines will now print as normal */
   .sIFR-flash, .sIFR-flash object, .sIFR-flash embed{display:none !important; height:0; width:0; position:absolute; overflow:hidden}
   span.sIFR-alternate{visibility:visible !important; display:block !important; position:static !important; left:auto !important; top:auto !important}</style>

   <style media=’screen’ type=’text/css’>
   /* These are standard sIFR styles… do not modify */
   .sIFR-flash{visibility:visible !important; margin:0}
   .sIFR-replaced{visibility:visible !important}
   span.sIFR-alternate{position:absolute; left:0; top:0; width:0; height:0; display:block; overflow:hidden}

   /* Hide Adblock Object tab:the text should show up just fine, not poorly with a tab laid over it. */
   .sIFR-flash+div[adblocktab=true]{display:none !important}

   /* These “decoy”styles are used to hide the browser text before it is replaced… the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower… your own settings may vary… any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */
   .sIFR-hasFlash h1{visibility:hidden; font-size:16px; letter-spacing:40px}
   .sIFR-hasFlash h2{visibility:hidden; letter-spacing:-9px; font-size:14px}
   .sIFR-hasFlash h3{visibility:hidden; letter-spacing:-6px; font-size:20px}
   .sIFR-hasFlash h4{visibility:hidden; letter-spacing:-5px; font-size:21px}
   .sIFR-hasFlash h5{letter-spacing:-4px; visibility:hidden; font-size:14px}
   .sIFR-hasFlash h6{letter-spacing:-4px; visibility:hidden; font-size:12px}
   </style>

4. This is the most importance to use your desire font type.
   Actually when we download sIFR 2.0, it already bundled with flash file to make a font, but there is easier way:
   • Choose your desired font and save in desktop (because if it still in WINDOWS/font, it can be uploaded)
   • Generate your chose font to be a swf file at sIFR Generator. Upload your font, then next and next until finish and download it. In step 2, choose sIFR version 2 because we use this version.
   • Upload the downloaded file to image shack, because image shack can store swf file. After uploaded, take the link, e.g. .
   • Then the last, put javascript below to activate your chose font. Change the URL to your uploaded font link.
     

     <script type=’text/javascript’>
     //<![CDATA[
     /* Replacement calls. Please see documentation for more information. */

     if(typeof sIFR == “function”){

     // This is the preferred “named argument” syntax

     sIFR.replaceElement(named({sSelector:”h1″, sFlashSrc:”http://img291.imageshack.us/img291/2028/hotelcoralessexregular.swf“, sColor:”#AD3C00”, sWmode:’transparent’}));

     sIFR.replaceElement(named({sSelector:”h2, h4, h6″, sFlashSrc:”http://img199.imageshack.us/img199/2368/motorway.swf“, sColor:”#2F1F00”, sWmode:’transparent’}));

     sIFR.replaceElement(named({sSelector:”h5″, sFlashSrc:”http://img508.imageshack.us/img508/6843/jamesfajardo.swf“, sWmode:’transparent’}));

     };

     //]]>
     </script>

     You must change the red code to your uploaded font URL.

5. it’s done! You can edit above code to adjust with your template character, either font size or color.

Note:
The weakness of this sIFR 2.0 is the link text become inactive. So, don’t use heading tag (H1, H2, etc.) for text link.