Can I use google fonts in Google Drive web hosting?

Question

I was curious to try Google fonts in webpage that is hosted in public folder on Google Drive - but the fonts dont show up - is there a technique to use them in Google Drive or is it restricted?

Answer 1

I found a technique to use Google Web fonts for myself by creating a secure link to Google's font apis - change the http to https like so:

<link href='https://fonts.googleapis.com/css?family=Francois+One' rel='stylesheet' type='text/css' />

You should find this works!

Answer 2

For whatever reason Google Drive web hosting doesn't like linking to external CSS. Not sure how to fix it but I got around the problem by manually adding the google fonts css code to my css file. For example:

Open the link from that HTML code they give you and you'll see some CSS code:

the HTML:

<link href='http://fonts.googleapis.com/css?family=Francois+One' rel='stylesheet' type='text/css' />

The CSS that link leads to:

@font-face {
  font-family: 'Francois One';
  font-style: normal;
  font-weight: 400;
  src: local('Francois One Regular'), local('FrancoisOne-Regular'), url(http://themes.googleusercontent.com/static/fonts/francoisone/v6/bYbkq2nU2TSx4SwFbz5sCHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

If you copy that css code straight into your css file your fonts will display in a Google Drive hosted site. If you don't have a separate css file you can just embed the css straight into your html code like so:

<style media="screen" type="text/css">
  @font-face {
    font-family: 'Francois One';
    font-style: normal;
    font-weight: 400;
    src: local('Francois One Regular'), local('FrancoisOne-Regular'), url(http://themes.googleusercontent.com/static/fonts/francoisone/v6/bYbkq2nU2TSx4SwFbz5sCHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
  }
</style>