luca luca - 5 months ago 28
Javascript Question

ERR_CONNECTION_TIMED_OUT with google apis fonts

when I deploy my web project on client server I receive this error and pages load slowly.

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


The browser gives me this error on Jquery javascript line :

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


All javascript and css files are inside my project because behind the server the firewall blocks almost all external url.
I found this row into css, I should change with a local url.

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


From here I downloaded the fonts
How can I import this in my project? Thanks

RESOLVED:

As GeorgeGkas suggested me, I added to my project the folder obtained from localfont, then I had to change all urls into font.css adding ../ before each url. For example
url('/fonts/Source-Sans-Pro-300/Source-Sans-Pro-300.eot');
has become
url('../fonts/Source-Sans-Pro-300/Source-Sans-Pro-300.eot');

Thanks

Answer

As I understand, you want to import the font manually in your project. I recomend you to use localfont.com. Just Select your font and tick all the variants you like. The web app will generate a download link to a zip file that contains:

  • a fonts folder with fonts format (.ttf, .woff2, .woff). You don't need to play with those.
  • a font.css file that contains the @font-faces you asked for. Just copy paste it to your project and manipulate the urlsm if you have to point in the fonts folder.

If you add you above question options in the website will get the bellow css file, as well as the fonts folder.

@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');
}
Comments