Archive for the ‘Font’ Category

There are a number of fornts for typefaces available which are use @font-face.Typically,you have a typeface
TrueType or Opentype.

@font-face Support Across Browsers

There is suprisingly good support for @font-face accross even older browsers.

EOT:Internet Explorer

The EOT(Enbedded Open Type) format typefaces are supported in all versions of Internet Explorer.

TTF:Safari,Opera,Chrome and Firefox

Safari version 3.2 onwards,Opera version 10 onwards, Firefox version 3.5 onwards and allversions of Chrome support the TTF(TrueType Format) for typefaces in @font-face

OTF: Safari,Opera,Chrome and Firefox

Similarly to the TrueType Forrmat,OTF(OpenType Format) is supported by Safari version 3.2 onwards,Opera version 10 onwards, Firefox version 3.5 onwards and allversions of Chrome
support the TTF(TrueType Format) for typefaces in @font-face

SVG:iPhone and Chrome

The SVG(Scalable Vector Graphics format) is supported by the iPhone and Chrome browsers.SVG font files are specially formatted .svg files that contain vector graphics for each glyph and character of the typeface
is represents, allowing for easy scalability.

WOFF:Firefox

The WOFF(Web Open Font Format) is currently supported by Firefox,but is in the process of becoming a
standard for font formats across all major browsers,including those bt Opera,Microsoft and Mozila.

Converting Typefaces On Online

There are a number of online @font-face conversion tools that generate the necessary CSS and typeface files for you,including Font Squirrel’s FontFace Generator(http://www.fontsquirrel.com/fontface/generator).

Quick and Easy CSS @font-face Code

Posted: May 15, 2011 in CSS, Font
Tags: ,

I’ve been using custom fonts in my designs for quite a few sites now, and have refined what seems to be an ideal chunk of CSS code for implementing the @font-face rules. Some of the sites that include these rules , which look more stylish and refined with the custom fonts in effect. I’ve tested this code on quite a few browsers, including the following:

  • Safari 3.1+
  • Opera 10+
  • Firefox 3.5+
  • Chrome 4.0+
  • Internet Explorer 6+

This technique delivers your custom fonts quite consistently to all of these browsers, and degrades gracefully for those that don’t support it. Of course, there are always weird exceptions contingent in particular scenarios, but overall it’s a solid chunk of code put together from much research, experimentation, and testing. I share it here hoping it will help others implement custom @font-face fonts quickly and easily. Let’s step to it..

Complete CSS @font-face code for embedding custom fonts

After uploading your set of custom font files to a “fonts” directory, add the following CSS code to your stylesheet, which itself should be located in the same directory as your fonts folder:

@font-face { /* declare fonts */
 font-family: "MuseoLight";
 src: url("fonts/Museo300-Regular.eot");
 src: local("Museo 300"), local("Museo-300"),
 url("fonts/Museo300-Regular.woff") format("woff"),
 url("fonts/Museo300-Regular.otf") format("opentype"),
 url("fonts/Museo300-Regular.svg#Museo-300") format("svg");
 }
 /* display fonts */
 h1 { font: 24px/1 MuseoLight, Verdana, sans-serif; }
 h2 { font: 18px/1 MuseoLight, Verdana, sans-serif; }
 h3 { font: 14px/1 MuseoLight, Verdana, sans-serif; }

That’s the magic ticket. In the first ruleset, we are declaring which fonts to use for each of the four different formats. After this, the next three rulesets are used to actually display the fonts according to our desired property values. You can apply just about any CSS styles you wish, so long as the font-family (or simply “font” if you are using shorthand) contains the name of your custom font.

Notice that we declare the font-family as “MuseoLight” in the first declaration block of the first ruleset. Then we also specify MuseoLight as the name of our first font for each of our heading selectors (h1, h2, and h3). After specifying our custom font, we then declare a couple of common system fonts – Verdana and sans-serif – to serve as fallbacks. In other words, this font-embedding technique degrades gracefully when the custom font is not displayed.

For our custom font, we are using the beautiful Museo font by Jos Buivenga. You can embed just about any font you like , so long as you include files for each of the following four formats:

  • .eot – e.g., Museo300-Regular.eot
  • .otf – e.g., Museo300-Regular.otf
  • .svg – e.g., Museo300-Regular.svg
  • .woff – e.g., Museo300-Regular.woff

There are many ways to obtain a good working set of fonts, but my favorite is Font Squirrel. They just make it so incredibly easy to download all of your favorite prepackaged @font-face kits. Just download, unzip, upload, and done!
Important notes
If for some reason your fonts aren’t displaying, here’s a few things to keep in mind:

  • Don’t nest different “@” selectors!
  • Number one reason for failure is incorrect path names
  • Refreshing, force-refreshing, and/or emptying your browser cache may help
  • You may also want to append a query-string parameter to your CSS URL to force refresh the user’s browser

Also important to keep in mind is that font embedding is only possible because of the many talented people who freely share their ideas, knowledge, and discoveries with the open-source community. Thanks to them, we can all look forward a better font-embedding experience in the future.
Closing thoughts
Enhancing your design with some choice typography is a great way to beautify and personalize your website. Sure the CSS code looks rather grotesque, but it’s an effective solution for cross-browser font embedding. Just upload your four font files and slap in the code. It’s pretty simple, but feel free to ask any specific questions in the comments. I’m no font-embedding guru, but I’ve been designing with embedded fonts for quite awhile. As always, if you know of a way to improve on this code, speak up and share your wisdom!