woff file, if you want to be as requirements of different web browsers, as each have limitations as to what file types they can support. Stands for: OpenType Font and TrueType FontĪlthough being phased out in preference for WOFF, OpenType has the capability to include swashes, ligatures and alternate characters, which is a bonus for many designers.Īlthough you may be able to get away with just using the. This format was created by Microsoft and is the only format that IE8 and below will recognize when using (we’ll cover this in Step 3) within a stylesheet. Currently SVG fonts are not supported by Firefox, IE or IE Mobile. This format is the only one allowed by version 4.1 and below of Safari for iPhone. Stands for: Scalable Vector Graphics (Font)Īn SVG is a vector re-creation of the font, which makes it a smaller file size, and is also great for mobile use. This format is generally preferred because it can also include metadata and license info within the font file itself.
WOFF fonts were created specifically for web use, and often load faster than other formats because they use a compressed version of the structure used by OpenType (OTF) and TrueType (TTF) fonts. You’ll notice there are a variety of different formats that webfonts come in: You’ll be using your new web fonts in no time :).
There is a full text version of this tutorial below, but I’ve also put together a short video walking you through each step of the process. There’s no need to be intimidated or put off from using web fonts, and as this guide will show you, they’re quite easy to use once you understand the basics.
One of the great features of this bundle is the inclusion of desktop fonts and webfonts allowing you to utilise them not just to make your print/graphic designs stand out, but your web designs too.Īfter several community members asked about exactly how to use the web fonts available in this bundle, we decided to put together a helpful guide, for all you guys who are new to working with web fonts. Jo here with little bonus for you this week! You’ve already had a couple of tutorials for some inspiration on how to use the resources in the current 30 Best Selling Creative Fonts (With Web Fonts and Extended Licensing) deal, which we hope you’re enjoying.