Adventures in @font-face

TIL how to work with the CSS @font-face rule. The short of it is this syntax inside your CSS file:

@font-face {
  font-family: <a-remote-font-name>;
  font-weight: <weight>;
  font-style: <style>;
  src: <source 1> format("<format 1>");
  src: <source 2> format("<format 2>");
  ...
}

For example, trying to get the Magallanes font to work on this site seemed easy at first because I just copied the CSS that MyFonts.com had given me. But the problem is that the font-family attribute was the only thing that was set. As a result by setting the main font to “Magallanes” it wasn’t understanding what to do with the bold and italicized fonts.

The solution was to set:

@font-face {
  font-family: "Magallanes";
  font-weight: normal;
  font-style: normal;
  src: <source 1> format("<format 1>");
  src: <source 2> format("<format 2>");
  ...
}

Then the italics one was:

@font-face {
  font-family: "Magallanes";
  font-weight: normal;
  font-style: italic;
  src: <source 1> format("<format 1>");
  src: <source 2> format("<format 2>");
  ...
}

Then the bold-italic:

@font-face {
  font-family: "Magallanes";
  font-weight: bold;
  font-style: italic;
  src: <source 1> format("<format 1>");
  src: <source 2> format("<format 2>");
  ...
}

And so on.

Another problem of not including the font-weight or font-style was Mobile Safari (iOS/iPhone/iPad) was not using the fonts at all.