使用从Google公共文件夹上传的自定义字体

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

我试图在我的网站上使用自定义字体,我已在谷歌驱动器上传。我必须采取这种方式的原因是,特定的网站是博客,不允许我上传自定义字体。我已经阅读了他们建议使用专业版Dropbox的文章,但此时我并不打算投资专业版帐户。我试图使用的代码如下

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

但是,这不起作用。任何想法,可能是什么错?

2 个解决方案

#1

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

它无效,因为docs.google.com正在资源上发送No'Access-Control-Allow-Origin'标头。

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."

“来源重定向'https://docs.google.com'已被阻止通过跨源资源共享策略加载:请求的资源上没有'Access-Control-Allow-Origin'标头。来源'null'因此不允许访问。“

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.

我尝试删除网址https://docs.google.com/uc?authuser=0&id=0B80wMxxnziQZQ09hdVFTZWo1NFE&export=download上的&export = download参数,但这不起作用,因此它肯定是错误的资源共享策略。

edit based on Spencer Wieczorek's feedback

根据Spencer Wieczorek的反馈进行编辑

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

在我的chrome中禁用相同的源策略后,如下所示正确加载的字体确认跨源资源共享策略是我在加载字体时遇到的唯一问题:在Chrome中禁用相同的源策略

See screenshot below: 使用从Google公共文件夹上传的自定义字体

见下面的截图:

#2

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

您可以通过Google网站将自定义字体上传到您的博客。

First create a new site by using Google account at http://sites.google.com.

首先使用http://sites.google.com上的Google帐户创建新网站。
Then create a directory name as "fonts" or whatever you want to choose.

然后创建一个目录名称为“fonts”或任何你想要选择的名称。
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

将字体css源URL添加到blogger标题中

Eg:

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

#1