In this post, you will learn what makes a font web safe and get familiar with four effective font replacement methods so that your fonts will render the way you want.
A great design requires great typography. Great typography is more than just making sure the words are legible (but that’s important too!). A picture may be worth a thousand words, but can you design with words as easily as you do a picture?
With web design, getting your words to render exactly as designed can be difficult, especially when you are using custom non-web fonts. That’s because when a web page loads, the browser is told to produce text onto the screen using a specific font. For things to work properly, that font must be stored on the computer that is operating the browser. If the web page’s code calls for a font that the user does not have installed on their computer, the designated font won’t show up! What will show up is the browser’s choice for a substitute font. Since you can’t control that substitution, you can’t control what the user will see. Sometimes those default fonts are not a pretty sight.
There are only a few generic fonts that are deemed “web safe”. If you use anything else you run the risk that your fabulous design won’t display properly.
To be regarded as web-safe, a font must be common to most browsers. Remember, if a site visitor does not have the specified font, the browser selects an alternative. That alternative can be based on author-specified fallback fonts and generic families or it may use a font substitution that is defined by the visitor’s operating system. Windows and Mac operating systems have different font sets installed. Only fonts that are covered by both operating systems are considered to be web-safe fonts.
Only five fonts are considered universal:
You can try to work around the problem of web-safe fonts by defining a fallback font. A fallback font is a reserve typeface that contains symbols for as many Unicode characters as possible. If the browser or OS encounters a character that is not a part of any of the available fonts, a symbol from a fallback font is used instead. Typically, a fallback font will contain symbols representative of the various types of Unicode characters. If you’ve ever seen a crazy looking character in the subject line of a spam email, it’s caused by the use of a fallback font. You don’t want your design to remind people of spam, so fallback fonts aren’t a great work-around.
You can try to replace your custom font text with an image, but there are risks with this approach. First, because it is an image it is resolution dependent, but even more important when you use images for text you create a whole new set of problems:
As you can see, these aren’t good ways to get your fancy fonts on the web. Let’s look at what will work and address the pros and cons of each solution.
OK, we ruled out fallback fonts and substituting images for those fancy fonts. Let’s see what will work!
This is by far the most basic solution to your font problem. @font-face requires no web technology other than CSS. It lets you load a font file from your CSS and then apply that font to the styling of your HTML text. You should be familiar with @fontface, but if you aren’t here’s a quick guide.
Pros:
Cons:
The distribution issue is a biggie. This means you can’t use this method for templates or themes without first securing your own distribution license.
Fonts.com has a specialized web font service which boasts over 40,000 fonts for you to use in your web designs. It is a subscription-based service that it is priced on a monthly basis. They even have a free, limited service if you want to just dip your toe in the water to see if you like it. In comparison with Typekit (another font service), there are far fewer restrictions on the fonts. The free package limits access to 8000 fonts but the Standard package gives you access to the entire library. With a font library that large, you know you will find great standards such as Helvetica, Univers, and Franklin Gothic as well as an amazing array of custom fonts.
Pros:
Cons:
Since Google first launched its Google Fonts API, the service has grown to include over 700 fonts that are freely available for use in your designs. Even though it started with a small collection, the service was a hit from the start. Now that it has an entire library of styles available it’s certainly one of the best free custom font solutions. Did we mention it was free?
Pros:
Cons:
If you need professional or classic fonts for corporate branding, Typekit is definitely the best solution. Unlike free services, Typekit by Adobe allows the embedding of popular premium fonts such as Futura, Meta, and Cocon. Because you purchase the license, distribution is not a problem.
Pros:
Cons:
There’s no need to limit your designs to just a handful of web-safe fonts. With a little CSS or use of a reliable web font service, you can design with unique, beautiful fonts that meet your needs and be confident that your design will render perfectly. Still in doubt as to which method is better? Just reach out to us and we’ll help you select a solution that is most suited for your site. As always, don’t hesitate to share your thoughts and feedback in the comments below!
Have a glimpse into what professional Shopify Web Development involves E-commerce has a great impact on today’s global business landscape. According to Statista, e-commerce retail sales worldwide will reach the whopping number of over $6.5 billion. Compare it with slightly above $1.3 billion this industry generated in 2014. Such huge growth has been achieved largely […]
Read this post to learn how to back up a WordPress site by just using the terminal and why this method is better than installing backup plugins.
Learn why a PSD to HTML Converter will hardly be able to beat a front-end developer in the foreseeable future The world of web design and development has made tremendous progress over the past few years. New front-end frameworks such as Bootstrap 4 have greatly facilitated the web development process. Present-day websites are highly dynamic, […]
