All posts by admin

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.

Turning off the responsive CSS

There are some websites that work brilliantly with a responsive layout and some that don’t. I’ve been playing with this layout for a few weeks now and the responsive mode just mashes everything up. I’ve decided that for the time being to turn it off until I can get it all in working order rather than have the text walk all over itself—it just looks worse that way.

The thing about responsive design in my opinion is that it is yet another dimension of complexity to understand. It’s probably the case that a few gentle tweaks would suddenly make the whole layout work out, but it requires time I don’t have at the moment.