Web Fonts: Custom Fonts Using @font-face

Web based platform are increasing in popularity day by day and a huge portion of ‘netizens’ completely depend on internet for their various needs. No wonder then that most of that companies are going online and one of the most important requirements of such sites are the way they are ‘written’, i.e. the fonts they use. Different fonts provide different user interface (UI) or ‘emotions’ of their respective sites and the users browsing a site are often drawn to such sites by the type of font that the site is using. For e.g. a business site which is a formal site and is used by corporate often goes for a simple and soothing look and feel fonts like ‘Arial’ or ‘Verdana’ while a site dedicated to kids might use high fashioned and colorful fonts which would help to attract kids.

The one problem that the webpage’s had in the previous version of the CSS was that it could only ‘read’ and display fonts that were installed or present in the user’s local PC. But this had some serious disadvantages. Problems like ‘Would my site appear clean and formal to my clients (the users who browse my site) when some of their PC’s might not have the font ‘Arial’ installed (don’t worry, this is only an example as Arial is present in almost all the PC’s and laptops…) or ‘would my music site have the perfect rock star look and feel on it?’. Could there be a way where we could dynamically embed font’s that are not in the user.

Before ‘tested’ font embedding methodologies came onto existence, there were a couple of services which were used by the webmasters for recreating the ‘look and feel’ of embedded fonts. They are as mentioned below:

1. sIFR – Takes the help of Javascript and flash to provide the ‘embedding effects’ of different fonts.
2. Cufon – This converts the fonts in SVG format and then uses JavaScript to render the same to various webpages.

The solution of the above problem was what the web developers were looking at and the newer version of Cascading Style Sheet (CSS) seems to have found some solutions towards realizing the problem completely. The result has been new terminology, a CSS jargon – i.e. @font-face.

Web Fonts: Custom Fonts Using @font-face

Are you looking for WordPress Theme?

Get Startup Framework for WordPress now!

With @font-face, the required url’s of different fonts in a site, each present in its corresponding domain, are provided and when the page is opened in the client side, the fonts those have been mentioned in those particular urls are downloaded on the fly and displayed. This feature has helped the web designers greatly and the sites developed by them would no longer have to adhere to a particular set of “web safe” fonts that the users have pre-installed on their computer.

As @font-face is an interesting and very useful feature; lots of present day browsers are equipped to handle them. Browsers especially the Internet Explorer (IE), Mozilla Firefox, Google Chrome, Opera are amongst the most well known browsers that are trying to provide the much needed support for the above mentioned features.

Different Browser Support for @font-face

CSS brought in @font-faces in their second version i.e. CSS 2.0 though it’s functionality was eventually developed completely in the next major version of CSS, i.e. CSS 3.0.

Internet Explorer and @font-face

Internet Explorer supported the feature from as early as its version 4 though there had been some reports of rendering issues on it. What is known clearly that @font-face feature was completely functional on IE5 and in all its subsequent versions. Their implementation depended on a technique called Embedded Open Type (.eot), which is the proprietary format and is used only by IE.

Google Chrome and @font-face

Google Chrome supports @font-face. A quick look at the technicalities show that the CSS implemented for the @font-face takes the following structure:

@font-face {
font-family: NameOfTheRequiredFont;
src: source of the fonts i.e. its Urls;
font-weight: weight; /* optional */
font-style: style; /* optional */
}

If the process that was needed to have the dynamic font embedding was such simple then why was it so late to fully realize it? Why didn’t we have full control over the fonts and just take full advantage of this feature? There seems to be following main reasons why the dynamic embedding of the fonts took so late to be implemented:

1. The font factories, i.e. the companies that create and market, has been strictly opposing this concept as helping the dynamic sharing of font would make webmasters of different sites to use them freely and not pay unnecessary money to buy them.

2. There is a wide gap in the technique different browsers use to display the same font and there might be possibilities when one of the browser supports the font (for e.g. IE) while some others (Opera) might not support the same. This inconsistent display of fonts across different browser was one of the most important technical reasons why dynamic font support had limited success earlier.

3. Also, trying to implementing the dynamic embedding of the font, a situation could arise where the End User Licensing Agreement (EULA) with the font’s production body (i.e. font factories) might be violated.

Font Dynamic Embedding formats

Just a look at the different formats a browser uses to support different fonts can be seen below –
1. TTF and OTF
2. SVG (iphones)
3. EOT (IE)
4. WOFF

The technical requirements that were needed for font embedding had been seeing huge developments recently and because of this, there has been an exponential growth in the advertisement portions which has made the font factories to evaluate the present situation again.

Also, if any site wanted to use their own font families then they need to have a license for the same which would allow them to use the given fonts commercially. Apart from that many different font formats would be required along with the most recent scripts for embedding them. Many independent bodies and organizations have been working tirelessly to help the designers to overcome the difficulties of font embedding and helping out the websites to implement the @font-face features in their site. Some of the most noted bodies who are working towards providing access to these font formats to different websites are:

1. Font Squirell – This site has huge collection of free fonts, scripts for their embedding as well as a font generator that can change the fonts that the webmaster have, into the required format which would support dynamic font embedding.

2. Font Spring – This site is the sister site of Fontsquirell and sells commercial fonts at a very nominal price.

There are certain sites that keep all the headache of fonts embedding for themselves with a very nominal price for providing the required services. All a webmaster needs to do is to identify a font type and copy and paste the required font embedding script in their site. Such sites include:

1. Typekit – is a very large site with an huge collection of fonts developed by Jeffrey Veen and Jason Santa Maria. They also provide a free trial subscription (limited to a single site) for the webmasters to try out their services.

2. Fontdeck – Developed by Clearleft and OmniTI, the site allows webmasters to buy the fonts that his site is using rather than the complete library that the mentioned font is in.

3. WebINK – This is one of the more useful sites which support large font family and a monthly subscription.

4. Google Font Directory – Recently released by Google, this only provides certain licensed fonts and is completely free.

If you would like to be kept up to date with our posts, you can follow us on Twitter, Facebook, Google+, or even by subscribing to our RSS Feed.

Newsletter

3 Comments
  1. Elias Sarantopoulos Aug 4, 12:28 pm

    The first time I saw Cufon being used is with ThemeForrest WP themes. Even if both techniques have some cons I still prefer @font-face cause I can select it and define hover state.

    Reply
    0
  2. Asif Aug 5, 6:56 pm

    I agree with you elias. @font-face technique is better than cufon. Thanks for sharing this info.

    Reply
    0
  3. Umair Apr 6, 10:50 am

    Thanks for you brief explanation about to embed font in a web page. I really appreciated that.

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters