The error message "ERR_CONNECTION_TIMED_OUT when trying to access Google APIs fonts

Upon deploying my web project on the client server, I encountered an error and noticed slow page loading.

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

The browser displayed an error related to the jQuery javascript code:

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

All CSS and JavaScript files are contained within my project due to firewall restrictions blocking external URLs. I identified a line in the CSS file that needs to be replaced with a local URL.

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

I downloaded the required fonts from localfont.com. How can I integrate them into my project? Thank you

RESOLVED:

Following GeorgeGkas's advice, I added the folder obtained from localfont.com to my project. Subsequently, I had to modify all URLs in the font.css file by adding ../ before each one. For instance,

url('/fonts/Source-Sans-Pro-300/Source-Sans-Pro-300.eot');
was changed to
url('../fonts/Source-Sans-Pro-300/Source-Sans-Pro-300.eot');
Thank you

Answer №1

It seems like you're interested in manually importing a font into your project. I would recommend using localfont.com. Simply choose your desired font and select the variants you prefer. The website will then provide a download link to a zip file that includes:

  • a fonts folder containing font formats (.ttf, .woff2, .woff). You won't need to make any adjustments to these files.
  • a font.css file which includes the necessary @font-face declarations based on your selections. Just copy and paste this code into your project and adjust the urls accordingly if needed.

If you input your font preferences as per your question on the website, you'll receive the following CSS file along with the fonts folder:

(CSS code examples are here)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Learn to leverage JavaScript in Node-RED to dynamically display messages based on selected dropdown options

After reviewing this Node-red flow: https://i.stack.imgur.com/y4aDM.png I am struggling with the implementation in my function. There are 3 options in each dropdown, one for meat type and the other for doneness. Once I select a combination from the drop ...

Deleting tasks from the to-do list using Node.js and Express with EJS

Looking to implement functionality where each list item can be removed from a Node.js array by clicking on an HTML button using EJS and Express: I am considering placing an HTML button next to each list element so that the selected element can be removed ...

Encountering: error TS1128 - Expecting declaration or statement in a ReactJS and TypeScript application

My current code for the new component I created is causing this error to be thrown. Error: Failed to compile ./src/components/Hello.tsx (5,1): error TS1128: Declaration or statement expected. I've reviewed other solutions but haven't pinpointed ...

Show content when box is ticked

I am looking to display a row of text when a checkbox is checked, but I am finding it challenging as a beginner in this. Despite trying to understand other answers, I still struggle with the process. Here is what I have attempted so far: function RiskPl ...

What is the trick to incorporating nested tabs within tabs?

My tabs are functional and working smoothly. To view the jsfiddle, click here - http://jsfiddle.net/K3WVG/ I am looking for a way to add nested tabs within the existing tabs. I would prefer a CSS/HTML solution, but a JavaScript/jQuery method is also acce ...

Implementing a feature to insert a horizontal rule button in React Draft Wysiwyg

I am currently working on implementing a custom button in React Draft Wysiwyg that will allow me to add an <hr> tag to my content. Although I have followed the demos and documentation, I have encountered an issue where the custom button successfully ...

What are the potential causes of receiving the error message "No Data Received ERR_EMPTY_RESPONSE"?

I often encounter this issue on my website, especially when I have a thread open. It seems to happen whenever I am actively checking for new posts and notifications via Ajax every 10 seconds or so. However, I'm not sure if this continuous reloading is ...

Convert an AJAX JSON object into values for multiple text boxes

When making an ajax call, I receive the following JSON input: var json = { "id_u":"1", "nombre_usuario":"JESUS", "apellido_paterno_usuario":"DIAZ", } I have text inputs that correspond to each key in the JSON object: <input type="text" name="id ...

Customize button appearance within mat-menu in Angular versions 2 and above

Is there a way to style my mat-menu to function similar to a modal dialog? I am having difficulty with the styling aspect and need advice on how to move the save and reset buttons to the right while creating space between them. I have attempted to apply st ...

Resolving issues with JavaScript caused by Polymer updates

I am a novice when it comes to working with Polymer. From what I have gathered, there seems to be compatibility issues with Mozilla and Safari. After researching on StackOverflow, I found that adding addEventListener('WebComponentsReady', funct ...

What is the reason Angular is unable to locate a controller for a directive in an external file?

As a newcomer to Angular, I'm struggling to comprehend John Papa's recommendations. His guidelines suggest placing controller logic inside directives, but this approach doesn't seem intuitive to me. Despite my efforts to implement it myself, ...

Adjusting the X-axis in Highstock: Tips and Tricks

Is there a way to adjust the X axis on this chart? My goal is to shift it so that it only covers half of the width, leaving the other half blank for future plotlines. Any suggestions on how to achieve this? Thanks! :) ...

What is the best way to retrieve the directory path from a FileReader in Java

Hey there, check out these codes I have for reading the file that the user uploads: function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { $('#myImg' ...

What is the reason that object-fit does not affect the width or height?

I am facing an issue with an image in a div where the image is not resizing properly when using object-fit: contain. The width of the image remains unchanged, causing padding to appear around it. https://i.stack.imgur.com/D0wym.png Is there a way to make ...

Modify the image source using Javascript

I need to update the src attribute of an image in a parent element nested within a ul li when a link is clicked. Here's my code so far. I know how to use JavaScript to change the src attribute, but I'm not sure how many levels I need to go up to ...

Adjust the size of images using jQuery to perfectly fit the container dimensions

I am currently working on a script to automatically resize images that are too large for the container: $('img').each(function(i){ var parent_width = parseInt($(this).parent().width()), image_width = parseInt($(this).width()); ...

Send a request for a multidimensional array to a PHP file using AJAX

I am in need of an array containing subarrays. Within my ProcessWire page, there are pages and subpages with various fields. I have organized this information into an array of arrays as shown below. <?php $allarticles = $pages->find("template=a ...

Is there a way to reset useQuery cache from a different component?

I am facing an issue with my parent component attempting to invalidate the query cache of a child component: const Child = () => { const { data } = useQuery('queryKey', () => fetch('something')) return <Text>{data}& ...

Utilizing Thymeleaf With JavaScript in Spring Boot: A Comprehensive Guide

Within my Spring Boot project, I am attempting to utilize Thymeleaf for injecting data into a JavaScript file that undergoes preprocessing with babel via WebPack. The Thymeleaf setup is outlined as follows: @Bean public SpringTemplateEngine templateEngine ...

What is the process for creating the token?

I've encountered an issue when generating a token while creating a user account. Despite my efforts, I keep getting an empty set. What could be causing this problem? Could there be an error in the syntax? Take a look at the controller file: import m ...