At the moment, web fonts are all the buzz.Unfortunately, achieving cross browser support is not easy. In this tutorial, I’llshow you how to getcustom fontsworking in all of the
major browsers.
Preface
If you haven’t been living in a cave for the past few months, you will have heard lots of talk about the @font-face CSS declaration, which lets you usecustom fonts in your web pages. This is very exciting, but unfortunately every browser supports @font-face slightly differently. The latest browserssupport linking directly to truetype or opentype fonts, but this has caused a lot of debate about licensing issues with the fonts. Fortunately, serviceslikeTypekitare trying to solve the licensing dilemma, and if you want to read more about Typekit there are plenty of articles includingone on Nettuts+,
byJeffrey Way.Internet Explorer was the first browser to support @font-face, going all the way back to IE4. They still support it the same way they did then: Using a proprietary format called EOT, or Embedded Open Type. EOTs font have restrictions in place in order to try to solve the licensing problem, for example EOT files can be tied to a particular domain so that other sites cannot hotlink to your font files, or download them for their own use. They alsohave support for font subsetting, or including only the characters that you need in your page. This can drastically reduce file size, which is alwaysimportant when designing anything that needs to be downloaded over the internet. EOT files are a solution to the licensing problem, but some people donot like the fact that they contain a form of DRM. There have been efforts to create a specific web font format that all browsers would support, andwould solve the licensing problem, but like any new web standard, these initiatives would probably take a long time to be finalized and implemented inall browsers. Rather than waiting until then, you can actually use @font-face today with a bit of work. Below is a list of the font formats supported byvarious web browsers.Source:Wikipedia
Step One: Obtain Your Font
Because of licensing concerns, you cannot simply embed any font on your website. Your best bet is to get a free font. There are lots of great free fontsout there, and lots of sites have lists of free fonts that you can use with @font-face. The site I like for getting free fonts isfontex.org. They have all kindsof fonts, and it is pretty likely that you’ll find one that suits your design there.
Gmail - custom fonts working in all of the major browsersfile:///C:/Documents%20and%20Settings/ZERO/Desktop/New%20Fold...1 of 512/1/2009 8:17 PM
Step Two: Convert Your Font
Because of the diversity of formats supported by the popular browsers, you’ll need to create at least three font files in order to get support cross browser. First you need a TTF or OTF font for Firefox 3.5 and Safari. Fortunately, most of the free fonts that you will come across will be in one of these formats. Second you will need an EOT file for Internet Explorer. Microsoft has a tool calledWEFTthat can be used to create EOT files, but itwas created in Windows 98 days, and has an awful user interface, and may not even run on your computer. Luckily, a hacker has reverse engineered theEOT font format, and published a command line tool calledttf2eot. Now don’t fret about having to use the command line, because you don’t have to.There are a few online tools that have created graphical user interfaces for ttf2eot. The one that I’ve found works the best, is the FontSquirrel@font-face Kit Generator . As it’s name implies, it is a tool created specifically for creating fonts for @font-face, and it can generate a number of formats including EOT. All you need to do, is upload your font file to their service, select your output formats and hit download. A folder with all of your converted font files, and a demo page will be downloaded to your computer once Font Squirrel is done converting your fonts.
Gmail - custom fonts working in all of the major browsersfile:///C:/Documents%20and%20Settings/ZERO/Desktop/New%20Fold...2 of 512/1/2009 8:17 PM
>There are a number of different options available in the Font Squirrel converter, such as subsetting the font, that you can play around with. Other than anEOT file for Internet Explorer, Font Squirrel can generate SVG fonts (which we’ll discuss in a minute), and WOFF fonts. A WOFF font is one of thenew proposals for a web font file type, and will be supported by Firefox in version 3.6. Don’t worry about generating that file yet, since no shipping browser supports it.OK. Let’s talk about SVG fonts. You might have heard of SVG as a vector graphics standard, but SVG can also be used to create fonts. All browsersthat support SVG support SVG fonts within SVG files, but some browsers also support the use of SVG files in @font-face. We will be using SVG fontsin order to get support for @font-face in Google Chrome, Safari for iPhone, and the Opera browser. Font Squirrel has the ability to generate SVG files, but they often ended up more twice the size of the original font in my testing. If you are comfortable in the command line, there is another tool that can beused to generate SVG fonts that are about the same size or even less than the original file. If you aren’t comfortable on the command line, you can skiptostep four .The best way to generate SVG fonts, is to use the command line tool ttf2svg from the Java SVG toolkitBatik . You need to have Java installed on your computer in order to use it. Mac users will have Java installed by default, but Windows users might need todownloadand install it. Next, you needtodownloadBatik. Within the downloaded folder, you will find a file called batik-ttf2svg.jar. This is the converter program used to create SVG fonts.Unfortunatly, the converter only deals with TTF files, so you’ll need to convert any OTF fonts that you have into TTF files first. You can usethis onlinefont converter to do that. Open up a command line window, and type the following command:
java -jar /path-to/batik-1.7/batik-ttf2svg.jar FontName.ttf -o FontName.svg -id font
You’ll need to put the correct path to the batik-ttf2svg.jar file on your computer into this command, and replace “FontName” with the actual name of thefont that you are using. The last option used in this command sets the ID of the font in the generated SVG. This will be important later, and you can justleave it as “font” for now.
Step Four: The CSS
OK. We should now have all of the font types that you need to get cross browser support. Now, we just need to write the CSS to actually embed thefonts. Building on the work of Paul Irish and his bulletproof @font-face Syntax, here is the code:
Gmail - custom fonts working in all of the major browsersfile:///C:/Documents%20and%20Settings/ZERO/Desktop/New%20Fold...3 of 512/1/2009 8:17 PM
Search History:
Result 00 of 00
00 results for result for
p.
More From This User
Notes
Load more
