How To Rename a Font in CSS

Chris Coyier on

Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today.

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;
  src: local(system-ui), local(-apple-system), local('.SFNSText-Regular');
}
p {
  font-family: My San Francisco Alias, fantasy;
}

Direct Link →