What causes Google fonts to fail on Heroku but succeed when used locally?

I am currently using express and heroku to host a prototype of a landing page.

While the webpage functions properly when running locally, I encounter font loading issues when accessing it on heroku most of the time...

The CSS files are located under /public/css/style.css

@import url("https://fonts.googleapis.com/css2?family=Playfair+Display&family=Helvetica");

An error message appears in the console:

GET https://fonts.googleapis.com/css2?family=Playfair+Display&family=Helvetica net::ERR_ABORTED 403

I have attempted to resolve this by changing how I download the fonts using the link tag:

<link href="https://fonts.googleapis.com/css?family=Playfair+Display&family=Helvetica" rel="stylesheet">

However, the issue persists...

Any suggestions or solutions would be greatly appreciated!

htmlcssexpressherokugoogle-font-api

Answer №1

I had faced a similar issue before, but it was resolved by removing the assets folder within the public directory. This action allows Heroku to precompile the css files instead of relying on locally generated files using rake assets:precompile.

Another user encountered a problem similar to yours as well:

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

Use two fingers to scroll up and down on the screen

I am currently developing a sketch web application (using angular) that utilizes one finger gestures for drawing. My goal is to enable vertical scrolling in the sketch content by using two fingers. However, when attempting to scroll with two fingers, Safa ...

javascripthtmlmobilescrollsafari

Hover effect transition malfunctioning

I've been attempting to incorporate a hover image effect on my website. I included the script in the link below. However, I'm struggling to achieve a smooth fade transition and a 2-second delay on the hover image. Can someone please assist me wit ...

htmlcss

What is the reason for the request body being undefined?

I have a JavaScript file named index.js that contains: const express = require('express'); const bodyParser = require('body-parser'); const cors = require('cors'); const db = require('./db'); const movieRouter = re ...

javascriptnode.jsexpress

How can I configure Express to serve Next.js's default 404 error page?

I need to display a default Next.js error page instead of manually sending a 404 response from my Express endpoints when an exception occurs in my endpoint functions. Currently, I am handling errors like this: try { //... } catch(e) { res.status(404). ...

node.jsexpressnext.js

Creating a new row does not result in the creation of a new span displaying the character count message

Every description field should have its own character counter, with different SpanIDs displayed in respective SpanIds for each new row. How can this be achieved? <div class="row"> <div class="col-s ...

javascripthtmljquerysharepoint-2013

The method for viewing stack traces in Express JS server logs

In my tech stack, I'm utilizing Nuxt (Vue), Express.js, and Axios. Encountering a scenario where a REST call fails, exemplified by the code snippet below: axios.get('api/data-test'); The client displays an error message like this: xhr.js ...

expressvue.jsaxiosnuxt.js

Centered text with custom images in an HTML list

I'm experimenting with customizing lists and currently using a custom list-style-image. I'd like to know how to center the text and image so they are always aligned, even in the case of multi-line text. I've included a picture for reference. ...

htmlcss

Using Express and React with Socket.io

I am currently working on setting up a basic WebSocket connection using Socket.io, Express, and ReactJS. Below is the code for the server: const express = require('express'); const socket = require('socket.io'); const path = require(& ...

javascriptreactjsexpresssocket.io

What is the correct way to write the syntax for wp_register_style function in

I'm attempting to include a cache-buster version in my CSS file. The guides mention: <?php wp_register_style( $handle, $src, $deps, $ver, $media ); ?> However, I've scoured Google and Stack Overflow for the correct formatting of these var ...

phpcsswordpress

Challenges with website design on Safari

When viewing the content under Chrome and IE, the two text blocks are displayed on the same line. However, in Safari 5.1.7, the text appears on different lines (above and below). Could there be something missing in the CSS that needs to be added for Safar ...

htmlcsssafari

Wireless web platform/program

I have been tasked with creating an app that will display real-time power data from a website. The challenge is that I do not have access to the backend of the site, which means I am unable to use PHP protocols to pull the data into my app. I attempted to ...

phphtmlmobilesmartphone

Display icons within each table cell row

Objective: I want to implement a feature where icons appear when the cursor is inside a td row, allowing users to click on them. These icons will contain links. When the cursor moves to a new td row, the previous row should return to its default state a ...

javascriptjqueryhtmlcsstwitter-bootstrap

Stylish grey container with crisp white lettering

Just getting started with HTML and I've been working on a project for my class. Here's what I've come up with: <font style="background-color: grey; color: white; display: block">Black and white copies $.10 per page letter/legal size&l ...

css

Add Text to Bootstrap Modal Window

The bootstrap modal body is not containing all of my content and some of it is overflowing. <div class="modal fade" tabindex="-1" role="dialog" id= "blockModel"> <div class="modal-dialog"> <div class="modal-content"> < ...

jqueryhtmlcssbootstrap-modal

Generate an HTML document from a website page

Having difficulty grasping this concept. I am completely lost on where to begin. It is imperative that I determine how my website can generate a file (whether it be HTML or Text format) and enable users to download it, similar to the functionality in Goo ...

javascriptjqueryhtmlfile

The `user-select: none` property displays distinct behavior in Safari

My Goal I am in the process of creating an input-like content editable div. The idea is to click on tags outside the div and insert them inside the div while still being able to type around these tags. The Issue and Reproduction Steps To prevent tag but ...

javascripthtmlcssvue.jsrangy

Guide to stacking blocks on top of each other

How can I create even spacing between blocks of different heights? For instance, in the image below, you can see that block 2 should be positioned directly under block 1. https://i.stack.imgur.com/RnYbP.png https://i.stack.imgur.com/LHvlz.png ...

htmlcss

Arrange images in a fluid manner around other images

Check out the website I'm currently working on: metroweb.tk I'm in the process of designing a website that mimics the Windows 8 metro UI. However, I've encountered an issue with larger app icons such as notes and clocks sticking out. Is the ...

javascriptjqueryhtmlcssmicrosoft-metro

Tips for resetting an angular smart filter when the reset button is clicked

Currently working on a simple Angular HTML form where I am utilizing Angular Smart Table. Can anyone advise on how to reset the smart table search filter upon clicking the reset button? Here is my HTML: <tr> <th></th> <th>< ...

htmlangularjssmart-table

Exploring the beauty of background color curves in React Native

Struggling to figure out how to create a curved background color on the top (header part) of my design. Check it out I'm looking to achieve this curved design for my header part Here is the code snippet I have so far: <View style={{backgroundColo ...

cssreactjsvisual-studioreact-native