Dan Hunter view portfolio

Ha! In your @font-face!

5th January

Up late again and when debating the relative merits of bothering to support browsers that don't use @font-face, I opt not to.

This time Typekit isn't viable as it's only for a tiny project and not worth upgrading my account just yet, but I really would like to use League Gothic.

Fortunately the font is available in it's many formats from FontSquirrel so I went ahead and downloaded the pack.

I had just finished putting together the bare bones of the Sinatra app upon which this site operates, and still thirsted for something to further my exposure to Sinatra. Being an avid fan of Formula 1 I decided to build an app to tell me exactly how long until the next race, deciding that Heroku would do very nicely for the hosting.

My desperation for motorsport and my currently excessive free time neatly bundled into one URL.

What I'd like to share is a couple of the pitfalls I unwittingly stumbled into during development, specifically using @font-face, lest another does the same.

First up:

ArgumentError - invalid byte sequence in US-ASCII:

In tests I've attempted between building the F1 app and writing this, I've been unable to recreate this error. I'm not exactly sure how, as everything seems to be identical. I thought I'd include it anyway as I received the error originally and it may still be relevant for someone else.

The cause seems to be the css generated by FontSquirrel (or possible elsewhere) - which generally looks something like this:

@font-face {
	font-family: 'LeagueGothicRegular';
	src: url('LeagueGothic-webfont.eot');
	src: local('☺'), 
	  url('LeagueGothic-webfont.woff') format('woff'), 
	  url('LeagueGothic-webfont.ttf') format('truetype'), 
	  url('LeagueGothic-webfont.svg#webfontOTINA1xY') format('svg');
	font-weight: normal;
	font-style: normal;

The issue is that clever little ☺ character used to divert the attention of Internet Explorer, it's part of the Bulletproof method that is the default option of the FontSquirrel @font-face generator.

The solution is, predictably, to replace the content of the local() method. If you're comfortable doing so, you can use the name of the font in the hopes the user has it installed already. Otherwise, you could use gibberish to try and ensure no local font is found, thereby forcing the browser to download a copy.

For more details, read Paul Irish's explanation.

Here's what I use:

@font-face {
    font-family: 'LeagueGothic';
  	src: url('fonts/LeagueGothic-webfont.eot');
    src: local('League Gothic'),
      url('fonts/LeagueGothic-webfont.woff') format('woff'),
      url('fonts/LeagueGothic-webfont.ttf') format('truetype'),
      url('fonts/LeagueGothic-webfont.svg#font') format('svg');

Next up:

Failed to load resource: the server responded with a status of 500 (Internal Server Error)

This error appeared in the Safari web inspector notifying me of Safari's inability to download the TTF version of the font. Usefully, it shrugs off this minor discretion and downloads the SVG instead, but it needed to be fixed in any case.

The solution is to define the mime type of the .ttf file format as one recognised by Safari. I initially used ol' faithful octet-stream and added the following to my Sinatra app:

mime_type :ttf, 'application/octet-stream'
mime_type :woff, 'application/octet-stream'

Which worked, as hoped, but still fired a warning:

Resource interpreted as font but transferred with MIME type application/octet-stream.

The correct assertion should be as follows, and causes no warning:

mime_type :otf, 'font/otf'
mime_type :ttf, 'font/ttf'
mime_type :eot, 'application/vnd.ms-fontobject'
mime_type :svg, 'image/svg+xml'

That's all for now.

If you want, check out the F1 app I keep mentioning. Disclaimer: there's a pretty harsh FOUT that I haven't addressed yet.