The absolute beginner’s guide to using Adobe’s new Edge Web Fonts on your site

As shown in the Create The Web event, Adobe recently launched an entirely new family of Edge products focused on emerging Web technologies and open standards. This is a promising development on Adobe’s part, and should help make working with HTML5, CSS3 and JavaScript a bit easier for beginners.

Edge Web Fonts is one of the recently launched Edge products that caught our attention, as it helps to extend Adobe’s offering of free and open source fonts to users that aren’t interested in the restrictions of a Typekit trail membership or the Adobe-less Google Web Fonts. Best of all, the service doesn’t require you to sign up at all, but is hosted for free by Typekit.

If Web typography is only something you’ve dabbled with or avoided in the past, all you need to do is look below. If you’ve played with Web type before, head on over to the Edge Web Fonts site, as this guide is just for beginners.

Step 1: The Site

Getting started, make sure you have a basic site ready. I kept things extra simple for the sake of clarity:

The 💜 of EU tech

The latest rumblings from the EU tech scene, a story from our wise ol' founder Boris, and some questionable AI art. It's free, every week, in your inbox. Sign up now!

Step 2: Pick Your Typeface(s)

Head hereand pick your typefaces through the drop-down pannel under “Preview Edge Web Fonts.” I went with Abril Flatface and the new Source Sans Pro. The JavaScript embed code and related CSS styles are automatically generated below. Add that script within your site’s head tags like so:

Then, make a new style.css file and make sure it’s linked as shown above and in the same folder as your HTML file. You should have something close to this, adding in simple styles of the Body of the page.

Step 3: Finishing Up

That’s it! You’re all set now to start designing your site. I went ahead and made things prettier with a bit more CSS (full size here):

There you have it. Implementing Web typography is an extremely easy process that can make even the simplest of sites look sophisticated. What’s your favorite typeface in Edge Web Fonts?

Image Credit: Thinkstock