ERR_CONNECTION_TIMED_OUT使用谷歌API字体



当我在客户端服务器上部署我的 Web 项目时,我收到此错误并且页面加载缓慢。

GET https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic net::ERR_CONNECTION_TIMED_OUT

浏览器在Jquery javascript行上给了我这个错误:

<script type="text/javascript" src="/DART/static/assets/plugins/jQuery/jQuery-2.1.4.min.js"></script>
所有

javascript和css文件都在我的项目中,因为在服务器后面,防火墙几乎阻止了所有外部URL。我在 css 中找到了这一行,我应该用本地 url 进行更改。

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic);

从这里我下载了字体如何在我的项目中导入它?谢谢

已解决:

正如 GeorgeGkas 建议的那样,我将从 localfont 获得的文件夹添加到我的项目中,然后我不得不将所有 url 更改为字体.css添加 ../在每个网址之前。例如,url('/fonts/Source-Sans-Pro-300/Source-Sans-Pro-300.eot');已经变得url('../fonts/Source-Sans-Pro-300/Source-Sans-Pro-300.eot');谢谢

据我了解,您希望在项目中手动导入字体。我建议您使用 localfont.com。只需选择您的字体并勾选您喜欢的所有变体。Web 应用将生成指向包含以下内容的 zip 文件的下载链接:

  • 字体格式(.ttf、.woff2、.woff)的字体文件夹你不需要玩这些。
  • 包含所需@font-facefont.css文件。只需将其复制粘贴到您的项目中,如果必须指向字体文件夹,请操作 urls m。

如果您在网站上添加上述问题选项,将获得下面的css文件以及字体文件夹。

@font-face {
  font-family: 'Source Sans Pro';
  font-weight: 300;
  font-style: normal;
  src: url('/fonts/Source-Sans-Pro-300/Source-Sans-Pro-300.eot');
  src: url('/fonts/Source-Sans-Pro-300/Source-Sans-Pro-300.eot?#iefix') format('embedded-opentype'),
       local('Source Sans Pro Light'),
       local('Source-Sans-Pro-300'),
       url('/fonts/Source-Sans-Pro-300/Source-Sans-Pro-300.woff2') format('woff2'),
       url('/fonts/Source-Sans-Pro-300/Source-Sans-Pro-300.woff') format('woff'),
       url('/fonts/Source-Sans-Pro-300/Source-Sans-Pro-300.ttf') format('truetype'),
       url('/fonts/Source-Sans-Pro-300/Source-Sans-Pro-300.svg#SourceSansPro') format('svg');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-weight: 400;
  font-style: normal;
  src: url('/fonts/Source-Sans-Pro-regular/Source-Sans-Pro-regular.eot');
  src: url('/fonts/Source-Sans-Pro-regular/Source-Sans-Pro-regular.eot?#iefix') format('embedded-opentype'),
       local('Source Sans Pro'),
       local('Source-Sans-Pro-regular'),
       url('/fonts/Source-Sans-Pro-regular/Source-Sans-Pro-regular.woff2') format('woff2'),
       url('/fonts/Source-Sans-Pro-regular/Source-Sans-Pro-regular.woff') format('woff'),
       url('/fonts/Source-Sans-Pro-regular/Source-Sans-Pro-regular.ttf') format('truetype'),
       url('/fonts/Source-Sans-Pro-regular/Source-Sans-Pro-regular.svg#SourceSansPro') format('svg');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-weight: 600;
  font-style: normal;
  src: url('/fonts/Source-Sans-Pro-600/Source-Sans-Pro-600.eot');
  src: url('/fonts/Source-Sans-Pro-600/Source-Sans-Pro-600.eot?#iefix') format('embedded-opentype'),
       local('Source Sans Pro Semibold'),
       local('Source-Sans-Pro-600'),
       url('/fonts/Source-Sans-Pro-600/Source-Sans-Pro-600.woff2') format('woff2'),
       url('/fonts/Source-Sans-Pro-600/Source-Sans-Pro-600.woff') format('woff'),
       url('/fonts/Source-Sans-Pro-600/Source-Sans-Pro-600.ttf') format('truetype'),
       url('/fonts/Source-Sans-Pro-600/Source-Sans-Pro-600.svg#SourceSansPro') format('svg');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-weight: 700;
  font-style: normal;
  src: url('/fonts/Source-Sans-Pro-700/Source-Sans-Pro-700.eot');
  src: url('/fonts/Source-Sans-Pro-700/Source-Sans-Pro-700.eot?#iefix') format('embedded-opentype'),
       local('Source Sans Pro Bold'),
       local('Source-Sans-Pro-700'),
       url('/fonts/Source-Sans-Pro-700/Source-Sans-Pro-700.woff2') format('woff2'),
       url('/fonts/Source-Sans-Pro-700/Source-Sans-Pro-700.woff') format('woff'),
       url('/fonts/Source-Sans-Pro-700/Source-Sans-Pro-700.ttf') format('truetype'),
       url('/fonts/Source-Sans-Pro-700/Source-Sans-Pro-700.svg#SourceSansPro') format('svg');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-weight: 300;
  font-style: italic;
  src: url('/fonts/Source-Sans-Pro-300italic/Source-Sans-Pro-300italic.eot');
  src: url('/fonts/Source-Sans-Pro-300italic/Source-Sans-Pro-300italic.eot?#iefix') format('embedded-opentype'),
       local('Source Sans Pro Light Italic'),
       local('Source-Sans-Pro-300italic'),
       url('/fonts/Source-Sans-Pro-300italic/Source-Sans-Pro-300italic.woff2') format('woff2'),
       url('/fonts/Source-Sans-Pro-300italic/Source-Sans-Pro-300italic.woff') format('woff'),
       url('/fonts/Source-Sans-Pro-300italic/Source-Sans-Pro-300italic.ttf') format('truetype'),
       url('/fonts/Source-Sans-Pro-300italic/Source-Sans-Pro-300italic.svg#SourceSansPro') format('svg');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-weight: 400;
  font-style: italic;
  src: url('/fonts/Source-Sans-Pro-italic/Source-Sans-Pro-italic.eot');
  src: url('/fonts/Source-Sans-Pro-italic/Source-Sans-Pro-italic.eot?#iefix') format('embedded-opentype'),
       local('Source Sans Pro Italic'),
       local('Source-Sans-Pro-italic'),
       url('/fonts/Source-Sans-Pro-italic/Source-Sans-Pro-italic.woff2') format('woff2'),
       url('/fonts/Source-Sans-Pro-italic/Source-Sans-Pro-italic.woff') format('woff'),
       url('/fonts/Source-Sans-Pro-italic/Source-Sans-Pro-italic.ttf') format('truetype'),
       url('/fonts/Source-Sans-Pro-italic/Source-Sans-Pro-italic.svg#SourceSansPro') format('svg');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-weight: 600;
  font-style: italic;
  src: url('/fonts/Source-Sans-Pro-600italic/Source-Sans-Pro-600italic.eot');
  src: url('/fonts/Source-Sans-Pro-600italic/Source-Sans-Pro-600italic.eot?#iefix') format('embedded-opentype'),
       local('Source Sans Pro Semibold Italic'),
       local('Source-Sans-Pro-600italic'),
       url('/fonts/Source-Sans-Pro-600italic/Source-Sans-Pro-600italic.woff2') format('woff2'),
       url('/fonts/Source-Sans-Pro-600italic/Source-Sans-Pro-600italic.woff') format('woff'),
       url('/fonts/Source-Sans-Pro-600italic/Source-Sans-Pro-600italic.ttf') format('truetype'),
       url('/fonts/Source-Sans-Pro-600italic/Source-Sans-Pro-600italic.svg#SourceSansPro') format('svg');
}

最新更新