如何从我的网站空间（在第三个站点上）加载 Google webfonts？

Question

我想在第三方网站 (ebay) 上使用我的网站空间中托管的 Google 网络字体。我的代码不起作用。我目前拥有的：

<div id="artikelueberschrift">Überschrift</div>
<style type="text/css"><!--
#artikelueberschrift { font-family:'Roboto',sans-serif;font-weight:300 }
--></style>
<style type="text/css"><!--
/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'),
       url('https://tobiaspietsch.de/Schriftarten/roboto/roboto-v20-latin-regular.woff2') format('woff2'); /* Super Modern Browsers */
}
--></style>

它是如何工作的？

Answer 1

@font-face {
   font-family:myRoboto;
   src: url(https://tobiaspietsch.de/Schriftarten/roboto/roboto-v20-latin-regular.woff2);
}

     #artikelueberschrift
 {
     font-family:myRoboto
    font-weight:300 
  }

请将其设为外部Css文件，在某些情况下属性“url" 不适用于内部 css 样式

Answer 2

要从您的网站空间加载第三方站点的内容，您需要启用 Cross-Origin-Ressource-Sharing (CORS)。 Same-Origin-Policy (SOP) 禁止在第三方站点上从您的网站空间加载内容。这是一项安全措施，用于禁止从其他服务器加载有害内容并禁止对您的服务器进行有害访问。使用 CORS，您可以控制允许从哪个服务器从您的网站空间加载哪些内容。 CORS header 告诉什么是允许的。要允许从任何其他服务器访问文件类型 ttf|otf|eot|svg|woff|woff2，请将名为 .htaccess 的文件添加到您的网站空间，内容如下

<FilesMatch "\.(ttf|otf|eot|svg|woff|woff2)$">
        Header set Access-Control-Allow-Origin "*"
</FilesMatch>

有关详细信息，请参阅此处：htaccess Access-Control-Allow-Origin

如何从我的网站空间（在第三个站点上）加载 Google webfonts？

How to load Google webfonts from my webspace (on a third site)?

html

css

hosting

webfonts