Diary SiteMap RecentChanges About Contact 2013-04 Calendar

Search:

Matching Pages:

2013-04-13 Garamond

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

@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.

I hope it works. Thoughts?

Tags: RSS

Comments


AlexSchroeder
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



AlexSchroeder
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:

@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.

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;
}

AlexSchroeder 2013-04-15

Please make sure you contribute only your own work, or work licensed under the GNU Free Documentation License. See Info for text formatting rules. You can edit the comment page if you need to fix typos. You can subscribe to new comments by email without leaving a comment.

To save this page you must answer this question:

Please say HELLO.

Show Google +1