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

Having trouble with jQuery's 'OR' not functioning properly when iterating through mandatory input elements

In the process of creating a fallback for required HTML5 attributes for different input types, I encountered an issue with checking the ':checked' status of radio buttons and using the 'OR' || operator within the loop: if (self.val() = ...

Strange behavior of Lambda function in Typescript

Within a larger class, I'm working with the following code snippet: array.map(seq => this.mFunction(seq)); After compiling using the tsc command, it becomes: array.map(function (seq) { return _this.mFunction(seq); }); Everything seems fine so f ...

Exploring the contents of this JSON array

I'm trying to fetch data from this link: <script type="text/javascript"> $.getJSON('http://api01.notaion.com/?item&id=120001462', function(data) { }); </script> I am uncertain whether I need to use a callback=?, a ...

Tips for Iterating through Nested Arrays using the Inside Array in a Dynamic Way

I am facing an issue with my code as it lacks flexibility when a new array is added to the nested array, in which case the new array is not considered. My main concern is how to access the elements of each nested array simultaneously. Here's an examp ...

Chrome will automatically retry an AJAX POST request if it times out after 10 seconds

I am in the process of creating a React JavaScript application using a back end powered by Node.js and Express. The software versions being used are as follows: React: ^16.0.0 Node: v8.0.0 Express: ^4.14.0 Chrome: Version 63.0.3239.84 (Official Build) (64 ...

Eliminate the symbol "$" followed by the formatted sum up to two decimal places

I have been using the Pengoworks jquery calculator and I am encountering an issue where my sum is being rounded off. For example, if the sum should be 19.99, it is rounding down to 19. I believe the problem lies in this line of code: "$" + sum.toFixed(2) ...

The range filter is exclusive to the initial controller

My range filter (see code below) is only working on my first controller. I have added the same filter to other controllers in the app.js and HTML, but it's not functioning for some reason. I checked the console for errors, but there are none. Here i ...

Creating a grid UI in AngularJS using Typescript: utilizing functions as column values

I am working on an AngularJS app that includes the following UI grid: this.resultGrid = { enableRowSelection: true, enableRowHeaderSelection: false, enableHorizontalScrollbar: 0, enableSorting: true, columnDefs: [ { name: &apos ...

Creating a carousel with three thumbnails arranged in two rows

Currently, I am using a slider for my thumbnails. If you want to check out the code for this thumbnail slider, click on this link: thumbnails slider code My goal is to display 6 thumbnails in total, with 3 thumbnails shown in each row (2 rows total). Add ...

Generating a highchart visualizing a pie chart using data from a local JSON file (OBJECT)

This is the JSON data from my JSON file {"diskspace":100,"diskspace.free":50,"time":8,"time.played":2,"controllers":25,"controllers.used":3, "controllers.new":10, "controllers.broken":12} I want to represent this JSON data in various forms of pie cha ...

"Utilizing Ramda's map function to integrate dynamic keys: A step-by-step guide

I am currently working with an array structured like this : array = ['2020-06-03', '2020-06-05', '2020-06-06'] My task is to transform it into the following format : Object { "2020-06-03": Object { "selec ...

Leveraging API data within React: A step-by-step guide

I have a React application where I am making API calls. To manage these calls, I created a separate file called dataService.js to contain all the functions for interacting with the API. However, when trying to log the data in my component, I am getting a ...

There seems to be an issue with the next-sitemap image location showing as undefined in the sitemap

I am having an issue with creating a sitemap in image:loc. When I view my xml in the browser, loc is showing as undefined. The goal is to display images present in blogs. Additionally, when I use console.log, the link displays in the terminal but shows as ...

Issues with jQuery Ajax functionality in Rails application not achieving successful completion

When a card is moved onto another stack, an Ajax call is triggered twice. This only happens when there are multiple stacks. However, if the cards are rearranged within the same stack, the call is triggered only once. The Ajax call sends an array of IDs fo ...

The Wordpress admin-ajax.php script is failing to process the function and returning a "0" error code

I have been experimenting with processing AJAX requests in Wordpress and I'm following a particular tutorial to achieve this. The goal is to create a basic AJAX request that will display the post ID on the page when a link is clicked. The Approach ...

Troubleshooting issue: `will_paginate` and jQuery integration not functioning properly due to non-responsive

I'm currently implementing a pagination feature in my application using jQuery, similar to how it's done on platforms like Facebook and Twitter. However, when I try to load "next" results, the entire HTML page is being loaded instead. It seems li ...

Is it possible to preserve the query parameters from the previous page using Vue Router's Navigation guard feature?

Hey there! So, I'm looking to pass a query from the current page to the next one without manually coding it into all of my push functions. I was wondering if there's a way to do this through Navigation guard or some hooks? I did some research an ...

Is it possible to nest CSS Variables within CSS Variable names?

Is it feasible to embed a CSS Variable inside another CSS variable's name or perform a similar action like this: :root { --color-1: red; --index: 1; } span { color: var(--color-var(--index)) } ...

Optimizing HTML/CSS performance: Comparing flexbox and tables for handling extensive datasets

Creating a React table component with hundreds of lines and variable cell widths can be complex. Would it be better to implement this using flexbox or a traditional table structure in HTML/CSS? ...

Click the button to save the text to your clipboard with a customized

Can anyone suggest a method for duplicating div text using JavaScript while preserving the style attributes (italics, font family, size, etc.)? My goal is to paste the copied text into Word and have it maintain the same appearance as on the webpage. For e ...