Using Custom Font Uploaded from Google Public Folder

Question

I am trying to use a custom font on my website that I have uploaded in a google drive. The reason I have to take this route is, the particular site is blogger which does not allow me to upload custom font. I have read articles where they had suggested to use pro version of dropbox, but at this moment I am not planning to invest in a pro account. The Code I am trying to use as follows

<!DOCTYPE html>
<html>

<head>
  <style>
    @font-face {
      font-family: keycapsflf1-webfont;
      src: url(https://docs.google.com/uc?authuser=0&id=0B80wMxxnziQZQ09hdVFTZWo1NFE&export=download);
    }
    @font-face {
      font-family: keycapsflf1-webfont;
      src: url(https://docs.google.com/uc?authuser=0&id=0B80wMxxnziQZQ09hdVFTZWo1NFE&export=download);
      font-weight: bold;
    }
    div {
      font-family: keycapsflf1-webfont;
    }
  </style>
</head>

<body>

  <div>Testing</div>

</body>

</html>

But, this does not work. Any idea, what might be wrong?

Hey Abhijit, did you find that my answer solved your issue? – David May 07 '15 at 13:31 — David, May 07 '15 at 13:31

score 1 · Answer 1 · edited May 23 '17 at 11:51

1

Its not working because docs.google.com is sending a No 'Access-Control-Allow-Origin' header on the resource.

Here is the error from the console:

"Redirect at origin 'https://docs.google.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access."

I tried removing the &export=download param on the url https://docs.google.com/uc?authuser=0&id=0B80wMxxnziQZQ09hdVFTZWo1NFE&export=download but this didn't work either so its definitely the resource sharing policy at fault.

edit based on Spencer Wieczorek's feedback

After disabling same origin policy in my chrome as follows the font loaded correctly confirming that the Cross-Origin Resource Sharing policy is the only issue that I'm facing with loading the font: Disable same origin policy in Chrome

See screenshot below: example

edited May 23 '17 at 11:51

Community

1
1

answered May 05 '15 at 04:20

David

2,844
2
26
47

1

That's because it's a snippet on Stack Overflow, it may not have a cross-origin policy problem on the OP's site. Also is the last part really necessary? Have you tried disabling cross-origin to see if that is the only issue (on your computer)? – Spencer Wieczorek May 05 '15 at 04:33
thanks spencer for the feedback - i'll look into this again today. – David May 05 '15 at 15:17
Hi Spencer - what are your thoughts now? thanks for your time reviewing. – David May 05 '15 at 18:46
Thanks for taking the time to ensure that was indeed the problem. +1 – Spencer Wieczorek May 05 '15 at 18:51

score 0 · Answer 2 · answered May 08 '15 at 13:36

You can upload custom font to your blog via google sites.

First create a new site by using Google account at http://sites.google.com.
Then create a directory name as "fonts" or whatever you want to choose.
Upload the font and then you will get the url of the font which you upload.
Add the font css source url to blogger header

Eg:

@font-face {
      font-family: keycapsflf1-webfont;
      src: url(https://sites.google.com/site/yoursitename/fonts/fontname.ttf);
    }

Using Custom Font Uploaded from Google Public Folder

2 Answers2