Category: font-face

Don’t just copy the @font-face out of Google Fonts URLs

I don’t think this is an epidemic or anything, but I’ve seen it done a few times and even advocated for. This is what I mean… You go to Google Fonts and pick a font like Open Sans, and it gives you either a <link> or an @import with a URL there in which to ready this font for usage on your site...

How To Rename a Font in CSS

Nothin’ like some good ol’ fashioned CSS trickery. Zach Leatherman documents how you can use @font-face blocks with local() sources to redefine a font-family. It can actually be a bit useful as well, by essentially being an abstraction for your font stack. @font-face { font-family: My San Francisco Alias;...

Combining Fonts

Another one from Jake Archibald! This one is using two @font-face sets for the same font-family name. The second overrides the first, but only select characters of it, thanks to unicode-range. You know how designers love ampersands? It’s a thing. Dan Cederholm once pointed out some advice from Robert Bringhurst:...

What’s the deal with declaring font properties on @font-face?

I hope you read that title out loud in your best Seinfeld impression. A recent question in our forums made me aware that there are more properties that can be added to @font-face than the usual font-family and src suspects. What are the point of those? Why would you want to declare other font declarations there? IR...