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.
