Web Typography: Putting your best (font-)face forward
This week I thought I’d go over something I see often overlooked on web projects, leading to a lot of extra work on the part of the front end team. Covering the basics of @font-face declarations can make for much simpler development and more natural inclusion in our CSS.
While web font services dominated the earlier years of support for real fonts, it seems to be more and more common to self-host font files — at least with the projects and teams I’ve been coming across. Between packaged-up design systems, more self-hosting licensing, and the desire for more control over hosting and use of CDNs, it’s far more likely you’ll end up needing to craft the @font-face rules yourself. While it may be tempting to take whatever Font Squirrel gives you, it’s worth it to take some time to understand how the pieces fit together so you can make your life a little easier down the line.
Set your standards
I know that the designers in our little community might be ready to skip down to the web font news and move on, but hang in there for a minute. There are two important things you can do that will help realize your design vision and make it less likely to break the way HTML (and therefore any sort of content editing system) naturally behaves.
