There are plenty of ways to make your website stand out from the crowd. The overall look of your site is a reflection of your company, brand, and overall personality. The typefaces you use are a big part of your site’s feel, but there are some things you have to take into account when choosing your type. First, not every typeface will appear on every computer. Each computer has common system fonts that most users will be able to see when they go to your website, but that list is short and limits your ability to be expressive. Luckily, there are several ways to include the font you want on your website which will allow users to view your site the way you intended them to.
Fonts can be embedded in your site, which allows them to stay consistent even if a user doesn’t have the font you use downloaded on their computer. They are also compatible with the major browsers your viewers might be using. There are a variety ways to embed or link your fonts to your website, allowing a browser to access them and show them in your site. Before embedding a font in your website, make sure that the license for that font allows it. If it doesn’t you may have to get an extended license to do so. That being said, each way of embedding has its drawbacks.
sIFR (Scalable Inman Flash Replacement)
sIFR uses Javascript and Adobe Flash that enables text on HTML webpages by replacing them with Flash replacements. It mimics normal HTML text, meaning it can be resized and copied relatively easily. Some downsides of this method are the requirement of Flash and Java make it vulnerable to things like ad blockers and any platform that doesn’t support Flash. It also affects the load time of webpages, but its biggest drawback is that it wasn’t intended for body copy, making it one of the more dated methods.
Cufón
Cufón also uses Javascript, but unlike sIFR it converts fonts into vector images. It’s easy to use, has small file sizes, and doesn’t require Flash which eliminates some of the issues sIFR has. One problem Cufón runs into isn’t new to embedding fonts, and that issue is with Copyright.
Both Cufón and sIFR include the font files making it possible for people to steal the fonts. These methods use JavaScript, Flash and PHP to embed fonts. Something to be aware of about sIFR and Cufón is the conversion of the font into another format (flash and javascript). Some fonts that are free, even for commercially distributed uses, prohibit the conversion of the font file into another format. If you still want to convert them you will need explicit permission from the author of that font.
@font-face
@font-face uses a CSS rule allowing you to download a particular font from your server to a website, allowing a visitor to see that font even if they don’t have it installed. Unlike sIFR and Cufón, it doesn’t embed the font on the site. Instead it tells the browser where to find the font.
As it has progressed, there are now a host of sites that provide Web Fonts that utilize CSS and/or Javascript to embed in your site for use. a web font is a file downloaded from a web server and used by a browser to render the HTML text. Your webpage accesses it using the @font-face rule. Most font files will include each type of file needed to make sure it is compatible on every browser and platform (.eot, .ttf, .otf, .svg, .woff). Every font is controlled by an End User License Agreement (EULA) which will tell you what you can, and can’t, use that font for. Here is a list of a few sites where you can find great web fonts to use on your site:
Fonts.com is a subscription font hosting service with CSS and Javascript embedding available and +3k free fonts to choose from.
YouWorkForThem offers one-off per font licenses you can embed using CSS. With many big name clients, YWFT is a great resource for beautiful fonts.
Typekit is a resource brought to you by Adobe that offers subscription plans, as well as plans through the Creative Cloud to bring you a large collection of fonts which can be embedded using CSS and Javascript.
Fontsquirrel is a great site for typefaces that are %100 free for commercial use. They can be embedded using CSS.
Google Webfonts is open source with 501 free fonts that are available to embed using CSS.
With some options of how to embed font on your site, and some resources to find your typeface, all that is left to do is find the font that fits your company best! With so many to choose from, take your time and find what reflects your brand’s personality. Be creative, but make sure its legible at various sizes and on different platforms.
Photo by: Kyle Van Horn