2013-04-13 Garamond

I like the Garamond font. This website uses it. Here’s how:

Garamond

@font-face {
      font-family: 'Garamond';
      font-style: normal;
      font-weight: 400;
      src: local('Garamond'), local('GaramondNo8'), local('EB Garamond'), local('EBGaramond'), url(https://themes.googleusercontent.com/static/fonts/ebgaramond/v4/kYZt1bJ8UsGAPRGnkXPeFdIh4imgI8P11RFo6YPCPC0.woff) format('woff');
}

body, rss {
    font-family: Garamond, serif;
    font-size: 16pt;
    line-height: 20pt;
    margin:1em 3em;
    padding:0;
}

As you can see, if you have a font called *Garamond*, Garamond No. 8 or EB Garamond installed, then the web page will use it. Garamond No. 8 is what I use on my GNU/Linux system. If you don’t have any of them, it will download the EB Garamond files from Google Web Fonts.

Garamond No. 8

EB Garamond

EB Garamond files from Google Web Fonts

I hope it works. Thoughts?

​#Web

Comments

(Please contact me if you want to remove your comment.)

⁂

At first, this is what I had installed:

@font-face {
    font-family: 'EB Garamond';
    src: url('http://campaignwiki.org/EBGaramond12-Regular.otf'); /* For IE */
    src: local('EB Garamond'),
    url('http://campaignwiki.org/EBGaramond12-Regular.ttf') format('truetype');
}

body, rss {
    font-family: Garamond, GaramondNo8, "EB Garamond", serif;
    font-size: 16pt;
    line-height: 20pt;
    margin:1em 3em;
    padding:0;
}

My original reaction: Ugh, now that I’m back in the office and sitting at a Windows machine using Firefox, I notice a *delay* between page load and text display. In fact, monospaced text uses a different font and is displayed immediately. Ordinary text using Garamond gets shown with a delay of a few moments. I just checked and it seems that I have Garamond installed. Why the delay?

– AlexSchroeder 2013-04-15 06:46 UTC

---

Well, I looked at `mod_expire` and added the following to my `.htaccess` file:

ExpiresActive On
ExpiresDefault "access plus 1 hours"
ExpiresByType application/x-font-ttf "access plus 1 years"
ExpiresByType application/vnd.ms-fontobject "access plus 1 years"

FileETag none

AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf        .ttf

To no avail! 🙁

Looking back, I see what went wrong: the font is being loaded from a different domain. I was updating the wrong file.

Then I remembered that Google also hosts EB Garamond. They provide a link to a CSS fragment which contains the `@font-face` instruction. I added the following to my CSS file:

Google also hosts EB Garamond

link to a CSS fragment

my CSS file

@font-face {
      font-family: 'EB Garamond';
      font-style: normal;
      font-weight: 400;
      src: local('EB Garamond'), local('EBGaramond'), url(https://themes.googleusercontent.com/static/fonts/ebgaramond/v4/kYZt1bJ8UsGAPRGnkXPeFdIh4imgI8P11RFo6YPCPC0.woff) format('woff');
}

body, rss {
    font-family: Garamond, GaramondNo8, "EB Garamond", serif;
    font-size: 16pt;
    line-height: 20pt;
    margin:1em 3em;
    padding:0;
}

I looked at the page headers being sent back and forth using the Firefox Live Headers extension and saw that the font is requested (even though I think the browser will be using the local font instead) – but at least the server now replies with a `304 Not Modified` status.

Live Headers

Time passes...

Finally I understand what’s wrong! I need to list the alternative local names within the `@font-face` declaration! With the following setup, I can see that no remote font is loaded.

@font-face {
      font-family: 'Garamond';
      font-style: normal;
      font-weight: 400;
      src: local('Garamond'), local('GaramondNo8'), local('EB Garamond'), local('EBGaramond'), url(https://themes.googleusercontent.com/static/fonts/ebgaramond/v4/kYZt1bJ8UsGAPRGnkXPeFdIh4imgI8P11RFo6YPCPC0.woff) format('woff');
}

body, rss {
    font-family: Garamond, serif;
    font-size: 16pt;
    line-height: 20pt;
    margin:1em 3em;
    padding:0;
}

– Alex Schroeder 2013-04-15

Alex Schroeder