by Sarah Hunt
With the launch of Adobe Edge Preview 4 we are excited to bring you the new web fonts feature! The web fonts tool in Edge is extremely versatile by letting you use your font service of choice to display web fonts and custom font stacks in your composition. We’ll go over some how-to steps to get you started with some popular web font services.
It’s a myth that @font-face has only been in use since the introduction of CSS3. @font-face support has been around since IE4! Currently web fonts are supported by the following browsers:
Modern browsers have gone their separate way as far as font support goes. For this reason it’s good for your @font-face declaration to contain several fallback font files.
Internet Explorer only supports EOT
Mozilla browsers support OTF and TTF
Safari and Opera support OTF, TTF and SVG
Chrome supports TTF and SVG.
Mobile browsers like Safari on the iPad and iPhone require SVG.
A typical CSS file with an @font-face declaration will have something similar to the following:
src: url(‘fertigopro-regular-webfont.eot?#iefix’) format(‘embedded-opentype’),
font-family: ‘FertigoProRegular’, Helvetica, Arial;
If you’re having problems with displaying web fonts, check first to make sure you have all available font types. For example if your web font only has an EOT and TTF file, your font won’t display on an iDevice.
How to Embed Web Fonts Using Local CSS
In this example, you will be using a local CSS file containing the @font-face declaration. In this instance you will need the CSS file and your web font files (preferrably in the same directory.)
If you do not already have a CSS file with an @font-face declaration or your web font files, go to fontsquirrel.com to generate a font kit using an existing font.
Click on the “+” icon under “Fonts” in the Library.
Enter your embed code, font name and any fallback fonts and click “Add Font”.
How to Embed Web Fonts Using Google Fonts
In this example, you will be using a hosted CSS file containing the @font-face declaration. In this instance we will be using Google Fonts.
Visit Google Fonts and select a font from their library. Chose “Add to Collection”.
How to Embed Web Fonts Using Typekit
In this example, you will be using a hosted JS file containing the @font-face declaration in conjunction with an online font service. In this instance we will be using Typekit.
Visit Typekit and create an account.
Added January 30, 2012
Most fonts come with an EULA that specifies how the font can be used. For example you can purchase a font to use for print, but the EULA can say you are not allowed to embed that font for web use. In the past few years a lot of font foundries and font services have been picking up on the trend of web based fonts and writing EULAs that specifically target web use (how many sites can be embedded, how many views, etc.) For the purposes of the Web Font tool in Edge, the onus of liability is left up to the user to know what their limitations of the font file are. There simply isn’t a feasible way for Edge to determine if the EULA for the font is valid or not, especially since Edge only handles the CSS stylesheet for the font and not the file itself.
These are just some of the options you have for using web fonts in Edge, and by following the steps you can apply the same method to use other font services. Happy typesetting!