embed fonts

[chadwhitacre]

Once we have font licenses for web use (#515) we need to convert them to whatevers and host them wherevers.

[chadwhitacre]

From @joonas on #515:

I would probably use Font Squirrel (@font-face generator) for any kind of @font-face conversion stuff, if the other 2 fonts (not including Helvetica Neue) need to be turned in to a @font-face format :)

I'm just nervous as heck about cross-browser compatibility. Lato burned me so bad. 😞

[chadwhitacre]

If Edmondsans is only used for the logo and the small numbers then let's not embed it. The logo is the one thing that should be an image, and it's not worth the extra page weight to have the numbers be in Edmondsans.

[chadwhitacre]

cc: @nicksergeant

[chadwhitacre]

Sadly, neither Edmondsans nor Blanch are designed for @font-face use.

Permission for @font-face integration is something that varies from font to font, and designer to designer. There are a few reasons why a designer would choose to disallow their font from @font-face use: and it's usually because of how the font will display on the web in your browser. Not all fonts are hinted properly for web use - this is why we have indicated @font-face compatible fonts with a badge on their download page. It looks like this:

http://losttype.com/about/

Here's an example of a font with the badge: Cubano.

Neither of the fonts spec'd for us have the badge. We need to use different fonts.

[chadwhitacre]

I guess it doesn't matter for Edmondsans, we can still use it in the logo. We need to replace Blanch, though.

[chadwhitacre]

Maybe http://www.losttype.com/font/?name=mensch?

[chadwhitacre]

I downloaded Mensch, and it comes with a font-face folder holding files compiled w/ Font Squirrel. Yay! :)

[chadwhitacre]

Hrm, Mensch Bold is hinted poorly for Windows (Chrome, FF, IE9). Look at "YOUR" in 16 and 21pt:

Looks good on Mac (Chrome, FF, Safari):

Regular looks okay on both.