Web Typography

Typography on the web is not what it used to be. Today, the web is a much friendlier place for custom fonts.

Back in the old (~ 4 years ago) days, if you wanted a custom font in your web design, you were forced to use images to render those custom typefaces. Not only was this very unwieldy, it had a tendency to really slow down your website. Eventually, developers started using image sprites to help with the load times, but it was still not an ideal solution. Then came the rollout of HTML5 and all of it’s new features, such as @font-face.

The clouds cleared, the sun came out, and all was good in the development world! This HTML5 feature allowed developers to create and use custom fonts in their websites without all the bloat that came with using images. Developers could now use any font without worrying about how they were going to implement this custom design choice.

Early in the @font-face life, it was still difficult to access some fonts to use them legally on a website. Hosting services and font converters had not been introduced yet, so developers were on their own to figure out this new feature. Today, there are many services out there that offer hosting for custom fonts. Many of these services are a paid subscription that give you access to numerous hosted fonts. Every service is unique, so you have to choose the one that is right for you. On the flip side, Google has a free font-face hosting service with many options as well. They are easy to implement and work well for a developer on a budget. Most of the fonts on Google Fonts are not mainstream fonts, but many alternatives and replicas are available and will work just as well.

Like most things on the web, this is a ever-changing feature and strategies for using @font-face come out every day. I encourage you to do some research to help you decide on the best service and process for your project. Below are some links for services and articles about using @font-face.

Paid Services

Free Services

Tutorials