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.
F**k it, we'll do it live!
Our biggest ever edition of TNW Conference is fast approaching! Join 10,000 tech leaders this May in Amsterdam.
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:
Step 2: Pick Your Typeface(s)
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