Using Adobe Edge Web Fonts on any Website

—

by

San
typekit-web-fonts

Just like Google Web Fonts directory, Adobe has launched a free service that provides access to collection of fonts that may be used in any web page. Since this is a partnership project by Adobe and Google, the library also contains those fonts which are originally commissioned by the Google Web Fonts project.

The fonts are served by Typekit, so performance and stability are inheritance. Unlike GWF, which provides CSS link for embedding fonts, the AEWF can be embedded by JavaScript call. Let me show you how.

Import a Single Font File

You only need to have the name of file to import. and use this script in <head> section.

<script src="http://use.edgefonts.net/passion-one.js"></script>

Now use this font name in your style definition. Like for a H1 tag, you may write

h1 {
     font-family: passion-one, serif;
     font-style: normal;
     font-weight: 400;
}

So a full web page with all these codes may look like this.

<!doctype html>
<html>
<head>
  <script src="http://use.edgefonts.net/passion-one.js"></script>
  <style>
    h1 {
      font-family: passion-one, serif;
      font-style: normal;
      font-weight: 400;
    }
  </style>
</head>
<body>
  <h1>This is a Passion One style text</h1>
</body>
</html>

So far so good, Now we will learn to import multiple web fonts in a single request. This will optimize our coding and will improve page loading time. The concept is if you write separate import coding, some older browsers will create problem which only have 2 connections open per domain at a time. Also this will reduce residency.

Import Multiple Files in Single Request

Here we are importing two font collection ‘gfs-neohellenic’ and ‘glass-antiqua’ in a single import code.

<script src="http://use.edgefonts.net/gfs-neohellenic;glass-antiqua.js"></script>

One can also defile the subset and styling of font to import. Like if I want to get only italic style, I need to write:

<script src="http://use.edgefonts.net/gfs-neohellenic:i4;glass-antiqua.js"></script>

Other abbreviations are n4,i4,n7,i7 for Regular, Italic, Bold and Bold Italic respectively. You can find list of all available fonts here. For preview, use this link.