by Sarah Hunt

Created

January 27, 2012

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!

COMMENTS

  • By Robert K - 5:57 AM on July 13, 2013  

    This process (still) needs to become simpler and needs a much more accessible user interface, resonating one of the main points outlined by Peter Villevoye. The ability to add a custom font begs for the ability to open up a dialogue and select the font files from a folder and have the CSS code be generated dynamically. The entire font selection component needs to be designed as something modular that is consistent across the suite of Edge/web tools and allows me to effectively manage my web fonts.

    In addition it is not clear how I can edit the list of custom fonts after I add them, especially when making a typo in the entered code. These are basics and they’ll need to be addressed as soon as possible to make this usable.

    I’m using Edge Animate CC.

  • By tumblr - 10:49 PM on March 12, 2013  

    We are a group of volunteers and opening a
    new scheme in our community. Your site provided us with valuable information to work on.
    You’ve done a formidable job and our entire community will be thankful to you.

  • By sports betting - 11:08 AM on January 17, 2013  

    Wow, this paragraph is nice, my younger sister is analyzing these kinds of things, therefore
    I am going to convey her.

  • By nada - 2:18 AM on August 5, 2012  

    Thank you- the instructions are as clear as it can be.

  • By elaine ossipov - 8:00 PM on March 11, 2012  

    I use typeDNA font manager, which does allow you to view all fonts (webfonts) and your system fonts at the same time. I am very pleasantly surprised at the ease of use and managing of all my fonts and their locations.

    just an fyi :)

  • By fr - 11:22 PM on January 30, 2012  

    Hey Sarah, just one small thing to note, as i tried to demo it :

    If you try to embed different google webfonts in the same doc, you’ll fail, only one working…

    Except if you use the “collection” in google webfonts, to embed them, then you only need to paste 1 javascript, and just the fall back list of the other fonts. (no .js inside) So you’ve got your font list working and many fonts displayed. Click on my link to see the application. (I should change the colors)

  • By Jim Gallaher - 7:36 PM on January 30, 2012  

    One important thing the article should mention is, always check with the font license before using it in your CSS. Some type foundries don’t allow you to embed the font file in your CSS at all, others have certain restrictions.

    • By sahunt - 7:43 PM on January 30, 2012  

      This is an excellent point! I actually included this in my original draft, but I decided to omit it since the post was getting bit lengthy and wanted to focus on how to use the tool. Perhaps I’ll add it back in :)

      Sarah

  • By Gustavo - 12:58 PM on January 30, 2012  

    Hi,

    Please…, can I add more than a font in 1 file?

    Thanks.

    • By sahunt - 1:01 PM on January 30, 2012  

      Hi Gustavo,

      Yes you can. Just click the “+” to add more fonts. If you’re using Typekit, you won’t have to add your embed code twice.

      Sarah

  • By Steve F - 8:21 PM on January 29, 2012  

    I’m trying to add font using local CSS but get stuck on step 2. It says: “Move the font and the generated CSS file to the directory of your Edge composition. ” Huh? Maybe I’m something obvious here. Also, step 3 does not work. I go to library click the “+” button for the font category and nothing happens. I’ve also tried pasting in the text from the CSS file that was generated but that does not work. What am I missing when I try to install a font?

    I am an everyday user who is a teacher first then mess with computer graphics for fun. I am not a professional designer. If Edge is to appeal to wide audience I’m thinking there’s still a lot a work to do to simplify for everyday users.

    • By sahunt - 1:09 PM on January 30, 2012  

      Hi Steve,

      You have to move your font files so they are in the same folder as your Edge composition, as they need to be linked together. The CSS for your embed code would be something like:

      <link rel='stylesheet' href='stylesheet.css' type='text/css' media='screen' />

      Then where it says “Font Fallback List” in the dialogue that pops up enter the CSS name of your font.

      Thanks for the feedback, this is still an introduction to the feature and it will be refined in the future. If you need more assistance check out our Labs Forums, there’s a supportive Edge community there that can help troubleshoot.

      Sarah

  • By Peter Villevoye - 5:29 PM on January 28, 2012  

    Thanks for the quick and kind reply, Sarah.
    And let me be clear on this: I’m not asking for a bitmap-generating feature.

    But honestly, it would be a boon if Edge could offer a less complicated method than this. The current feature is just an extra text input field, slapped onto a watered down version of the Dreamweaver font dialogue. It can hardly be seen as a thrilling “tool” !

    Why not let users collect (or help them collect, or even convert – if allowed) the proper versions of a font into the correct folder automatically, and generate the CSS for them on the fly? That would really be helpful! Or offer buttons that hook me up directly with the font offerings of on-line services like Google and TypeKit?

    I understand and appreciate that the team puts so much work into it to let it function properly, and that there might be some festive “together, at last” atmosphere about it. But it’s just the beginning of implementing a proper interface, which still seems miles away from my (user’s) viewpoint. In order to get the vast majority of designer hands on Edge, it’s imperative NOT to reveal or require a single snippet of manual HTML, CSS or Script coding !

    Don’t try to cloak the complexity of user-side options and decisions. Designers can handle quite some difficult thinking and tweaking in software. In that aspect, Edge really looks like an airplane cockpit, and designers adore that amount of precise control ! But please, don’t bother them with the techniques behind the scenes.

    Looking forward to Preview 5 :-)

  • By Peter Villevoye - 9:56 AM on January 28, 2012  

    So you call this feature the “extremely versatile web fonts tool in Edge” ? Tell me, what’s so damn good about it ? It doesn’t help an average (non-coding) user a single step more than what was already possible, and what most designers deter from: manually embedding fonts and inserting lines of code into cryptic files.

    Come on Adobe, you surely must be able to offer a more integrated and user friendly solution than this ? Especially when it comes to TypeKit (months after the acquisition), I’d expect a much more elegant feature !

    In my opinion, the headline should read:
    “Web fonts and Edge, still miles apart…”

    BTW: why can’t I copy the text of the nicely formatted headline ?
    Isn’t that one of the advantages of using web fonts ?

    • By sahunt - 3:28 PM on January 28, 2012  

      Hi Peter,

      One of the great things about Edge is that we work with web standards to publish your composition to the web. There are limitations to how much we can do to publish fonts while still keeping in line with these web standards. If we were to implement a WYSIWYG font dropdown such as you would find in Illustrator or Indesign, we would also have to introduce a plugin to render those fonts as graphics when exporting your composition which is exactly what we don’t want to do. We also understand that some get a bit shy when dealing with code, which is precisely why we made it so you only have to copy/paste and not write any code yourself.

      There are a lot of things we had to take into consideration when implementing this feature; how to make it available to multiple font services, rendering the fonts on the stage and on local preview, embedding all the behind-the-scenes code, interaction with other type properties, allowing fonts to be exposed to the CSS so the user can overwrite styles, and using multiple fonts in the same composition (just to name a few).

      Right now the feature still needs a bit of design love, but we’re still in a Preview stage and we’re working behind the scenes to give you great new features and improve the ones we have now such as web fonts. This is an introduction to the feature, and it will be improved in the future. Right now we wanted to give the users a flexible tool that would allow them to use any font service they wanted. This is also why I posted these instructions, so users unfamiliar with how web fonts work could take a crack at incorporating them into their Edge designs.

      Try following the mini-tutorial and if you have any questions try the Labs forums, there’s some really helpful people on there http://forums.adobe.com/community/labs/edge/ :)

      Sarah

      • By GP Penati - 7:39 AM on August 16, 2013  

        Sarah, I see you are the wizard here and wanted to ask, if I have two fonts on my desktop and they are not on one of the online font houses(google,font squirrel ….etc). How do I get these fonts loaded into Edge?

  • By Brad Dunzer - 2:16 AM on January 28, 2012  

    Sarah,

    I have just tested in WebINK web fonts as well and it works great. Wonderful to see an app that shows the fonts in design time. We will have a blog post up soon on how to integrate our font service into Edge.

    Great job

    Brad Dunzer
    Product Manager WebINK

    • By sahunt - 1:12 PM on January 30, 2012  

      Hey Brad,

      That’s great to hear! We also made sure to test in WebINK to make sure it worked, but great to see it being applied in the real world :) Looking forward to seeing the blog post!

      Sarah

  • By Usama Ahmed - 8:53 PM on January 27, 2012  

    Nice feature. Would be awesome if Edge could also render web fonts in design view.

    • By sahunt - 8:57 PM on January 27, 2012  

      Hey Usama,

      Your web fonts are rendered on stage as well as in preview/publish.

      Sarah