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] or http://[bucket] etc.

  3. Apply the code to your CSS.

    @font-face {
        font-family: 'fontFamilyName';
        src: url('http://[bucket]');
        src: url('http://[bucket]') format('embedded-opentype'),
             url('http://[bucket]') format('woff'),
             url('http://[bucket]') format('truetype'),
             url('http://[bucket]') 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"?>

    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