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.