在本地托管时不会显示Google字体

时间:2018-07-31 13:06:49

标签: css fonts google-webfonts

我正在使用Wordpress建立网站,并希望使用Montserrat Google字体。我意识到,与fonts.google.com建立连接可能会导致有关新的《欧洲通用数据保护条例》的问题,因此我使用Google Webfonts Helper下载了该字体。

我在本地(在我的计算机上)尝试了该网站的副本,并且效果很好。但是,当我将更改应用于实际网站时,字体未显示。

Firefox网络分析工具显示正确下载的字体。

enter image description here

但是它没有出现在字体选项卡中。

enter image description here

关于如何调试这一建议?

编辑:这是CSS

/* montserrat-regular - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/montserrat-v12-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Regular'), local('Montserrat-Regular'),
       url('../fonts/montserrat-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/montserrat-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/montserrat-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/montserrat-v12-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-700 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/montserrat-v12-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Bold'), local('Montserrat-Bold'),
       url('../fonts/montserrat-v12-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat-v12-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/montserrat-v12-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/montserrat-v12-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/montserrat-v12-latin-700.svg#Montserrat') format('svg'); /* Legacy iOS */
}

-

 h1, h2, h3, .widget-title, h4, h5, h6 {
      line-height: normal;
      letter-spacing: 0;
      margin: 0 0 15px 0;
      font-family: "Montserrat", sans-serif;
      font-weight: 400;
      color: #2d2d2d;
      -ms-word-wrap: break-word;
      word-wrap: break-word;
    }

编辑2:使用Chrome浏览器并进入“网络”标签时,字体文件被标记为已取消,而不是200 OK。控制台说它已被阻止,因为“所请求的资源上没有'Access-Control-Allow-Origin'标头。”

编辑3:我注意到在“网络”标签(位于FF中)中,所有资源的主机均为

  

url.com

但是对于字体文件来说

  

www.url.com

2 个答案:

答案 0 :(得分:0)

没有看到CSS代码,很难说出可能出了什么问题。

由于您对法规的关注: 我所知道的是,如果您在信息保护声明中告知打包信息,则使用Google字体是合法的。

希望有帮助

答案 1 :(得分:0)

好吧,我显然弄乱了路径。我将字体文件移到wordpress文件夹中,相应地更改了css中的路径,现在它可以工作了,尽管我真的不知道为什么firefox向我显示GET请求成功。

url('../fonts/....

现在是

url('/fonts/.....