High level notes on @font-face in CSS.

It's okay to use multiple @font-face rules in a site to define multiple custom fonts.

@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"),
  font-weight: bold;


  • local() checks for a font on the user's own computer.
  • url() specifies a path to a font.
  • the url() can be either relative to the site or abosulte to anywhere
  • often we use them together with url() as a fallback.


  • specifies the name that can be used in font-family CSS properties.