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"),
       local("HelveticaNeue-Bold"),
       url(MgOpenModernaBold.ttf);
  font-weight: bold;
}

src

  • 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.

font-family

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