web fonts

posted by misterhaan in track7, webdev, css, fonts on mar 28, 2016

prior to my 2016 redesign, the fonts used on track7 needed to be installed on the device viewing the site. the font i wanted people to see probably wasn’t installed in most cases, which meant my site substituted a different font that was available. i figured with the wide variety of devices with web browsers these days there must be a reasonably well-supported way to embed fonts into a web page, and there is!

css lets you define a fonts which browsers load from a url so i can put my chosen fonts on my site and just about everyone will see them the way i like it. i don’t even need to install the fonts on my computer, which was very nice when i hadn’t yet figured out windows 10 requires windows firewall service to be running in order to install fonts. here’s the css rule that defines the font used for this text:

@font-face {
  font-family: rosario;
  font-style: normal;
  font-weight: normal;
  src: url(Rosario-Regular.woff);
}

with that in place, any reference to the font rosario in my css looks for the file Rosario-Regular.woff in the same directory as the css file and uses that font. actually though, if the text is bold or italic, i have other @font-faces set up with the bold and italic font files. they have the same font-family but font-style: italic; or font-weight: bold; so it can tell which one to use. if there’s bold text for a font that doesn’t have a bold defined the browser will still make it look bold, but probably in a way that doesn’t look as good as supplying the bold font.

i found the three fonts i’m using by looking at various “best web fonts” lists and choosing my favorite. i wanted a serif font for text, probably sans serif for headings, and a fixed-width font for code. i ended up with rosario, monda, and inconsolata which are all available from google fonts. i’m actually using an alternate version of inconsolata though because the one on google has the quote characters angling down to the left as if they were closing quotes, which i find distracting and even misleading.

google offers a link to css they host for including either in html or another css file. they also include javascript but as far as i know that doesn’t actually add anything useful over just css. i prefer to host everything from my own domain, so i opened up google’s css files to find the font files and download them. then i put the required css into my site’s css file.

if you have a font you want your website to use but it’s in a ttf file or something, consider using an online font converter to turn it into a woff file. i think most browsers can understand ttf, but woff is smaller. there’s also woff2 which is smaller yet, but at least one of the current browsers i tried on windows, android, and ios didn’t understand it. it’s possible to provide multiple formats and even local font names but i didn’t feel like the extra complexity was worth it.