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

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