1stwebdesigner

Adobe Edge Web Fonts – Adding Charm to Words

Posted: 02 Oct 2012 06:00 AM PDT

If you have anything to do with the design industry, whether you are an outright typographer, designer, or even someone with a keen eye for all things that look beautiful (ahem!), good looking words will never fail to impress your eyes. Keeping in sync with your affection for good typography, Adobe has come up with their own font library, Adobe Edge Web Fonts.

For ages, calligraphy and typography have been treated as something that should not be overlooked — both in visual and aesthetic senses. In this digital age, we have fonts that deserve a special mention and have the power to attract (or repel) one's attention.

Introduction

As we know, most designers and digital artists are always on the lookout for awesome fonts to include in their projects. What's more? With the advent of web fonts, you do not even need to download TBs of fonts (though seriously, if you have a font collection spanning TBs, you've taken it to a new extreme). Just add few lines of code, and wookie-dookie! You are good to go!

Speaking of web fonts, Google has dominated the scene so far with their impressive collection of web fonts. However, last week, we witnessed the entry of a new player in this segment: Adobe.

Yes, that's right. Adobe has come up with its own library of web fonts: Adobe Edge Web Fonts. In this article, we shall take a look at the new service.

Okay, What Exactly Is Adobe Edge Web Fonts?

Basically, Adobe Edge Web Fonts is an altogether new font service for you to use and add awesomeness to your projects! Remember Typekit? As we all know, Typekit has now belonged to Adobe for quite sometime already. Edge Web Fonts relies on the Typekit standards and font serving network to provide you with awesome letters. What makes it different then? To begin with, you no longer need an account or a configuration kit. Just pick your favorite font, and off you go! Totally free!

Beyond that, Adobe is also talking about a collaborative effort with Google Web Fonts for the creation and optimization of better fonts, both new and existing ones. You can learn about Google's enthusiasm about this venture here. Just in case you are wondering, this entire project is open source! Yes, absolutely free to use and build upon. By the time of writing this article, Adobe has already come up with two awesome open source fonts (available both via Edge Web Fonts and Google Web Fonts) — Source Sans Pro and Source Code Pro. Go check 'em out, but before you go, do finish reading this article; we've got plenty more to explore!

Can I Have More Details, Please?

Adobe Edge Web Fonts library is a part of Adobe Edge Tools and Services. Among other awesome things on offer, you have a code editor in the likes of Edge Code and other projects that are yet to be released, such as Edge Reflow that lets you create responsive CSS layouts.

So, coming to Edge Web Fonts. The hosted library contains hundreds of fonts brought to you by Adobe, Google and many other designers from all around the world, all for free! The fonts have already been integrated into Adobe services such as Edge Code and Adobe Muse.

However, don't be alarmed after reading "integration into Adobe services": if you are not a lover of proprietary Adobe services (such as myself), you can still make use of the font library in your projects.

Among other finer details, Edge Fonts library, as already mentioned, makes use of Typekit's font serving prowess and relies on JavaScript libraries for browser compatibility and other font events.

Alright, This is Awesome. How Do I Employ Them?

Can't wait to use them, can you? Well, using Edge Web Fonts is pretty simple. For example, let us say, we wish to use Playball on our website.

First of all, we will need to copy and paste this embed code in the head section of the HTML file:

    <script src="<a href="http://use.edgefonts.net/playball.js">http://use.edgefonts.net/playball.js</a>"></script>

Thereafter, in the CSS file, all we need to do is to use the font family name, as follows:

  h1 {  font-family: playball, serif;  }

And, we are done! Cool, eh?

For instance, this is what the code for a simple web page will look like:

    <!doctype html>   <html>   <head>   <script src="<a href="http://use.edgefonts.net/playball.js">http://use.edgefonts.net/playball.js</a>"></script>   <style>   h1 {   font-family: playball, serif;   font-style: normal;   font-weight: 400;   }   </style>   </head>   <body>   <h1>"Sufyan bin Uzayr"</h1>   </body>   </html>

You can check out the full documentation here, for details such as supported protocols, URL specifications and complete list of fonts.

Conclusion

As of now, Adobe Edge Web Fonts has nearly 500 font families for you to choose from. For a project still in its infancy, 500 is an impressive number. With time, this number is likely to expand and considering the fact that unlike Typekit, Edge Web Fonts is open source and non-commercial in nature, it will surely be loved and adopted by more and more users all around the world.

Since this is not a commercial venture, and both Google and Adobe have talked about collaboration, I do not see any sort of competition between Edge Web Fonts and Google Fonts Library. Instead, such collaborative innovations will definitely prove very useful for the community.

What do you think of Adobe Edge Web Fonts? Have you given the font library a try? Feel free to share your thoughts with us in the comments below!