Web fonts and Edge, together at last.
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.
Some history
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:
IE4+
Safari 3.1+
Opera 10+
Chrome 4+
Firefox 3.5+
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:
@font-face {
font-family: ‘FertigoProRegular’;
src: url(‘fertigopro-regular-webfont.eot’);
src: url(‘fertigopro-regular-webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘fertigopro-regular-webfont.woff’) format(‘woff’),
url(‘fertigopro-regular-webfont.ttf’) format(‘truetype’),
url(‘fertigopro-regular-webfont.svg#FertigoProRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
.classname {
font-family: ‘FertigoProRegular’, Helvetica, Arial;
font-size:12px;
color:#3AAA35;
}
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.)
Step 1:
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.
Step 2:
Move the font and the generated CSS file to the directory of your Edge composition. Your files should look similar to this.
Step 3:
Click on the “+” icon under “Fonts” in the Library.
Step 4:
Enter your embed code, font name and any fallback fonts and click “Add Font”.
Step 5:
Create a text box and apply your new 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.
Step 1:
Visit Google Fonts and select a font from their library. Chose “Add to Collection”.
Step 2:
Select the “Use” button at the bottom of the screen.
Step 3:
Scroll to the bottom of the page and grab the embed code. Here you will also find your font name.
Step 4:
Click on the “+” icon under “Fonts” in the Library.
Step 5:
Enter your embed code, font name and any fallback fonts and click “Add Font”.
Step 6:
Create a text box and apply your new font.
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.
Step 1:
Visit Typekit and create an account.
Step 2:
Select a font to add to your kit and launch the Kit Editor.
Step 3:
Click on “Kit Settings” and enter the ip “127.0.0.1”. This will allow you to view the fonts locally, You can also add a site for publishing seperated by a comma.
Step 4:
Select “Embed Code” and copy the two lines of Javascript in the window.
Step 5:
Click on “Using fonts in CSS”.
Step 6:
Copy the font name.
Step 7:
Publish your fonts. If you don’t publish, you won’t see your font rendered.
Step 8:
Enter your embed code, font name and any fallback fonts and click “Add Font”.
Step 9:
Create a text box and apply your new font.
Legal Considerations
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!
