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

Tag: Font embedding

Installing Indian Rupee Symbol

Installing Indian Rupee Symbol

I know its quit late to tell  you about this but still many people don’t know about this About “Installing Indian Rupee Symbol” . As our older keyboard supports signs like Dollar ( $ ) , Euro ( € ) , Pound ( £ ) , Yen ( ¥ ) and many more. but it will take some time including it in the day to day life and computers , So Mangalore’s Foradian Technologies they made an Rupee font . This Font is true type font and is unicode that is accepted very were so its easy but one problem that the font is need to be installed in your PC or in the PC were the other person will be watching

Preview of Indian Rupee Symbol :

If you haven’t seen it yet then here’s a preview. but i guess that you would have seen it surely because its India’s Pride

Indian Rupee SymbolNow lets Get back to Installing it :

  1. First we have to download the font , so to download it visit : Foradian’s Technologies Blog
  2. If you are using Windows Vista or Windows 7 then Just right click the font and click on Install font :D
  3. If you are using windows XP or Older version then Follow this steps :
    1. Extract the Font
    2. Then Copy the Font to Fonts Folder
    3. The fonts Folder is Located in Control Panel and then click on Fonts

if you are still not able to understand to make you understand i found out a video from youtube that will help you

October 12, 2010 Ritesh Sanap Solutions Cool things, Font embedding, windows, Windows 7

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

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

Using sIFR 2.0 in Blogger Templates

sIFR in blogger templates

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.

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

Alternative Ways to Change Blog’s Font Type

Hi! Introducing the new category at B2K, Font embedding. This time, I just share some ways to change the font type in your blog. Later, I’ll write about how to integrate these one by one.

There are some alternative ways to change the font type to be nonstandard anymore, need not to use images, so your blog’s typography will more and more interesting.

  1. Cufón

    Cufon

    “Cufón aims to become a worthy alternative to sIFR, which despite its merits still remains painfully tricky to set up and use. Cufón consists of two individual parts – a font generator, which converts fonts to a proprietary format and a rendering engine written in JavaScript.”

    Article about Cufón integrating:
    >>> Exploring Cufón, a sIFR alternative for font embedding

  2. sIFR 2.0 and sIFR 3

    sIFR

    “sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems. It accomplishes this by using a combination of javascript, CSS, and Flash.”

    Article about sIFR integrating:

    • This is How You Get sIFR to Work
    • How to Use sIFR 3 (video Tutorial)
    • How To Implement sIFR3 Into Your Website
  3. FLIR

    FLIR

    “FLIR (Facelift Image Replacement) dynamically generates image representations of text on your web page in fonts that otherwise might not be visible to your visitors. The generated image will be automatically inserted into your web page via Javascript and visible to all modern browsers.”

    Article about FLIR integrating:
    >>>How To Use Any Font You Wish With FLIR

  4. Typeface

    Typeface

    “With typeface.js you can embed custom fonts in your web pages so you don’t have to render text to images.”

    Other format from typeface:
    >>>Type Select, Selectable Text Replacement

Update : Sifr3 is down or its not being supported instead now you can try Google Webfonts.

June 13, 2010 Ritesh Sanap Blogger Blog Design Series, Font embedding

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

Download Avira Anti Virus Bootable Rescue CD Free

August 9, 2008 By Ritesh Sanap Leave a Comment

Jquery – Create Float Menu with Scroll Follow Effect

April 19, 2010 By Ritesh Sanap 5 Comments

How to Find Best web hosting according to your needs

July 26, 2010 By Ritesh Sanap Leave a Comment

Creating your Own Run command

February 29, 2008 By Ritesh Sanap Leave a Comment

How to Notify Unconfirmed Subscribers

December 15, 2010 By Ritesh Sanap 2 Comments

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