Imported font is functioning correctly when viewed locally but fails to load when accessed from the web

After completing the main page of my website, I encountered an issue with the font imported from Google. Surprisingly, it displays perfectly when viewed locally but does not show up once uploaded to my web server. Could there be a compatibility issue? For context, I am using Ubuntu 14.04 with apache2. Here is the HTML import snippet:

 <link rel="stylesheet" href="css/master.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">

Here's the CSS used:

@import 'https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300';

body
{
    background-color: #dfdfdf !important;
    font-family: 'Open Sans Condensed', sans-serif !important;
}

The font works on local but fails on the web server after uploading.

htmlcss

Answer №1

After some experimenting, I decided to move all the files to a separate domain that I own. Surprisingly, this solved the issue completely. Upon further investigation using Cloudflare, I noticed a discrepancy between the two domains. Both were directing to my server box, but the problematic one had an additional A record with "*" pointing to a different IP address. Once I removed this record, everything started working smoothly again. The purpose of that extra A record remains a mystery to me, as well as why it caused conflicts with my setup.

Answer №2

Have you considered the possibility that the issue may simply be a caching problem? Based on your statement about not seeing your updates in the CSS file when checking the resources, it seems likely that the newest version was not being retrieved.

Going forward, it's advisable to ensure a cache refresh whenever you make changes to an external style sheet by adding a unique identifier at the end of your reference URLs, such as: 

<link rel="stylesheet" href="css/master.css?1">
, and increasing the number with each modification.

The ?1 appended to the URL fools the browser into treating it as a new link, prompting it to fetch the stylesheet again and obtain the most recent version.

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

Troubleshooting: CSS button animation not functioning

Attempting to create a hover animation for buttons on my webpage, I crafted the following CSS code: #B1 { margin: 50px; margin-top: 50px; margin-bottom: 50px; flex: 1 1 auto; padding: 20px; border: 2px solid #f7f7f7; text-align: center; te ...

javascripthtmlcss

The occurrence of Multiple Button events leads to an error message stating: "Uncaught TypeError: Cannot read property 'remove' of undefined"

I am struggling to add an EventListener to each Delete Button (1,2,3) as I keep encountering an error that says "add" is undefined. Do you have any suggestions on how to fix this issue? My goal is to display a confirmation window when the DELETE button is ...

javascripthtmlcss

Ways to reduce the size of images within a bootstrap carousel

I'm currently working on creating a carousel that will serve as a background image cover for my website, similar to the revolutionary slider in WordPress but without using a plugin. I am developing it specifically for my static website. The challenge ...

javascriptjqueryhtmlcsstwitter-bootstrap

The website must automatically adjust the size of all elements on the page, including images and fonts

I am currently facing an issue with the resizing of my web page when the user changes the window size or has a different screen resolution. I have created a jQuery function that triggers on resize or page load, which helps in scaling everything proportiona ...

javascriptjqueryhtmlcsscss-transitions

Showing the value of a JavaScript variable within an HTML input field

Here is an interesting HTML structure that includes a list and input field: <li> <span>19</span> </li> <li> <span>20</span> </li> ...

javascripthtmljquery

What is the method for altering the color of just the text in an anchor link?

Here is the code snippet I’m working with: <a href="#" title="some title"> <span>Do not change color of this text</span> Want to only change this text color </a> I am trying to change the color of the anchor tag text only, w ...

csshover

Aligning a group of divs within a right-floated div in a precise manner

I believe the concept can be explained best through an example: http://jsfiddle.net/kV9yn/16/ This is my simplified code. The issue arises when the rectangular divs on the right don't align properly. Ideally, I would like them to line up from left t ...

htmlcss

Using ExpressJS to pass a variable from a .js file to index.html

I need assistance with integrating [email protected] I am trying to access a variable from main.js in index.html Here is the code in main.js: const express = require('express') const app = express() var router = express.Router() app.use(& ...

javascripthtmlexpressvariablesget

Error: A DATA_CLONE_ERR exception with code 25 was thrown by a web worker

Need help with my web worker: var arrayit = function(obj) { return Array.prototype.slice.call(obj); }; work = arrayit(images); console.log(work); //work = images.push.apply( images, array ); // Method : "load+scroll" var worker = new Worker('jail_w ...

javascriptjqueryhtmldomweb-worker

Steps to ensure that a singular button is visible within a specific jQuery function

I am looking for a solution regarding the placement of a button labeled "add to profile" within a jQuery div. Specifically, I would like this button to only appear after the last "next" button in the sequence. For example, after question 1 and its respect ...

htmlajaxjquery

Extracting table data using regular expressions in Import.io is a powerful method to retrieve specific values

Need some assistance. I am currently utilizing import.io and aiming to extract table data using regex. My goal is to retrieve values from specific columns, below is the code snippet: <table> <tr> <td class='label&apos ...

phphtmlregexweb-scraping

Retrieve the most recent 5 entries from a database using PHP and display them in an ordered list on an HTML page

Currently, I am in the process of learning how to populate an ordered list within an HTML page with the 5 most recent records from a table using PHP. While I have managed to grasp most components (with some difficulties in PHP), my main challenge lies in e ...

phphtmlmysqli

Struggling to activate the link:hover transformation

At this link, you can find an example of using CSS transform to rotate links on hover, but I'm having trouble getting it to work as expected. <!DOCTYPE html> <html> <head> <style> a:hover{ ...

htmlcsstransform

Transitioning the implicit width

Using implicit width, which involves adding padding to an element containing text to give the parent container a specific but unstated width, can be quite elegant. However, it poses challenges when it comes to transitions. Is there a way to achieve a trans ...

htmlcsscss-transitions

What is the best way to conceal an unordered list menu?

Trying to create a menu using ul HTML, but encountering an issue. When the website is opened, the menu shows up by default, whereas I only want it to appear when a mouse hovers over it. Even after attempting to change the CSS class, the desired functionali ...

cssbootstrap-4

Is there a way to display x-overflow on a table instead of the window?

Check out the table at the following link: In my CSS, I set a min-width and overflow-x property for the table. However, on the mobile template, the overflow-x does not work properly. I want the template to display correctly with the header and footer in ...

htmlcssresponsive-design

Togglebox CSS is set to hide elements initially

I am having issues with Lightbox2 as it is not functioning properly when I try to click on the image. Upon inspecting the Developer Console in Chrome, I noticed that the overlay and image are being added to the DOM, but the display property is set to none ...

jqueryhtmlcsslightbox2

What is the method to retrieve the color of a linearGradient in an SVG at a particular

I am working on a unique progress bar that uses a linear gradient and a small ellipse to indicate the completion percentage. The AngularJS binding updates the completion percentage and a function is called. My challenge is to change the color of the ellip ...

javascripthtmlangularjssvglinear-gradients

Maximizing Efficiency: Top Techniques for Emphasizing Grid Rows with jQuery

Currently, I am facing an issue with the jQuery code I am using to highlight the selected row in my grid. It seems to be taking longer than anticipated to select the row. Does anyone have suggestions on how I can optimize this code for better performance? ...

javascriptjqueryhtmlgridview

Setting the width to auto, height to 100, and using overflow hidden does not produce the desired result

In my design, I have two sets of images displayed below: https://i.sstatic.net/pQytw.jpg Both sets of images have the exact same code. The only difference between the images in the first and second set is their dimensions. I aim to make all image blocks ...

htmlcssng-bootstrap