Diary SiteMap RecentChanges About Contact Calendar

Search:

Matching Pages:

Comments on 2013-04-13 Garamond


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 this page if you need to fix typos. You can subscribe to updates by email without leaving a comment.

A carefully selected set of emoji for you to copy and paste: • ✕ ✓ ✝ ☠ ☢ ☣ ⚛ ☭ ☮ ☯ ⚒ ⚓ ⚔⚙ ★ ☆ ✨ 🌟 🐣 🐤 🐥 🐦 🐧 🐨 🐷 🐻 🐼 🐢 🐝 🐛 🐙 🐒 🐌 🐋 👑 ✊ 👊 ✌ 👋 👌 👍 👎 👏 👸 🍵 🍷 👹 👺 👻 👽 👾 👿 💀 ❤ ❦ ♥ 💔 📓 📖 📜 📝 🔒 🔓 🔔 🔥 🔨 🔪 🔫 🔮 😁 😂 😃 😄 😅 😆 😉 😊 😋 😌 😍 😏 😒 😓 😔 😖 😘 😚 😜 😝 😞 😠 😡 😢 😣 😤 😥 😨 😩 😪 😫 😭 😰 😱 😲 😳 😵 😷 😸 😹 😺 😻 😼 😽 😾 😿 🙀 🙇 🙈 🙉 🙊 🚶 🚲 🚀 🚽

To save this page you must answer this question:

Please say HELLO.