Anjanesh

Assignment Statements, Comparisons & Observations
Font: Size: + -

How to upload a web-font to Google Cloud Storage and use it in your CSS

Wednesday, December 26, 2012

Replace [bucket] with your bucket name.

  1. Use fontsquirrel's @font-face Generator to download all the font formats required for various browsers.
  2. Upload the fonts to Google Storage :
    gsutil -h "Vary:Accept-Encoding" -h "Cache-Control:public,max-age=31536000" cp -a public-read font-webfont.eot gs://[bucket]/fonts/font-webfont.eot
    gsutil -h "Vary:Accept-Encoding" -h "Cache-Control:public,max-age=31536000" cp -a public-read font-webfont.woff gs://[bucket]/fonts/font-webfont.woff
    gsutil -h "Vary:Accept-Encoding" -h "Cache-Control:public,max-age=31536000" cp -a public-read font-webfont.ttf gs://[bucket]/fonts/font-webfont.ttf
    gsutil -h "Vary:Accept-Encoding" -h "Cache-Control:public,max-age=31536000" cp -a public-read font-webfont.svg gs://[bucket]/fonts/font-webfont.svg

    Now your font is accessible at http://[bucket].commondatastorage.googleapis.com/fonts/font-webfont.eot or http://[bucket].commondatastorage.googleapis.com/fonts/font-webfont.ttf etc.

  3. Apply the code to your CSS.

    @font-face {
        font-family: 'fontFamilyName';
        src: url('http://[bucket].commondatastorage.googleapis.com/fonts/font-webfont.eot');
        src: url('http://[bucket].commondatastorage.googleapis.com/fonts/font-webfont.eot?#iefix') format('embedded-opentype'),
             url('http://[bucket].commondatastorage.googleapis.com/fonts/font-webfont.woff') format('woff'),
             url('http://[bucket].commondatastorage.googleapis.com/fonts/font-webfont.ttf') format('truetype'),
             url('http://[bucket].commondatastorage.googleapis.com/fonts/font-webfont.svg#aller_displayregular') format('svg');    
        font-weight: normal;
        font-style: normal;
    }
  4. Unfortunately the last step is not enough to display the web-font on your website since the fonts need to be on the same domain as the website.

    In order to allow web-fonts to be hosted elsewhere, the location of the web-fonts must have a Access-Control-Allow-Origin header sent.

    For Google Storage, we do this :

    <?xml version="1.0" encoding="UTF-8"?>
    <CorsConfig>
      <Cors>
        <Origins>
          <Origin>http://mydomain.com</Origin>
        </Origins>
        <Methods>
          <Method>GET</Method>
          <Method>HEAD</Method>      
        </Methods>
        <ResponseHeaders>
          <ResponseHeader>x-goog-meta-foo1</ResponseHeader>
        </ResponseHeaders>
        <MaxAgeSec>1800</MaxAgeSec>
      </Cors>
    </CorsConfig>

    Save this as font.xml.
    Hmmm ... Google says :

    gsutil setcors <cors-xml-file> uri

    But using gsutil, we can set CORS to an entire bucket only and not to an object.

    gsutil setcors font.xml gs://[bucket]

    not uri as mentioned

    Similarily, for getcors :

    gsutil getcors gs://[bucket]
    and not
    gsutil getcors gs://cats/mycats.png

0 comments: