Can I Use Google Fonts In Google Drive Web Hosting?

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 i

Solution 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!

Solution 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:

<stylemedia="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>