Is anyone else experiencing issues with loading a font from a CDN? It works perfectly fine on Chrome Browser and Safari for iOS Simulator, but for some reason, it's not loading

It's driving me a bit crazy as I'm not sure where I've gone wrong.

I'm currently working with NextJS and have loaded this font into my <Link />. While it displays perfectly on Chrome and Safari in the iOS simulator, it fails to load when I access the site on my personal device.

The font in question can be found here:

_document.tsx

import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <link href='http://fonts.cdnfonts.com/css/gagalin' rel='stylesheet' />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

global.css

html,
body {
  font-family: 'Gagalin', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
    Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  margin: 0;
  padding: 0;
  background-color: black;
}
javascripthtmlcssnext.js

Answer №1

Although not completely understood, a solution could be to directly embed the CSS code for defining font-family into a stylesheet within the HTML's head tag.

const div = document.createElement('div');
div.innerHTML = 'some text added by JS';
document.body.append(div);
@font-face {
  font-family: 'Gagalin';
  font-style: normal;
  font-weight: 400;
  src: local('Gagalin'), url('https://fonts.cdnfonts.com/s/57473/Gagalin-Regular.woff') format('woff');
}

html,
body {
  font-family: 'Gagalin', monospace;
}

There seems to be an issue with IOS not loading fonts if it doesn't detect their usage (especially when content is generated purely by JavaScript), which partially explains why placing the font-face declaration directly in the stylesheet works.

It might be worth trying out using rel="preload" on the link instead, but for now, the mentioned workaround appears to be effective.

UPDATE:

Turns out the solution is simpler than previously thought.

By changing the HTTP call in the link to HTTPS, everything works smoothly:

const div = document.createElement('div');
div.innerHTML = 'some text added by JS';
document.body.append(div);
html,
body {
  font-family: 'Gagalin', monospace;
}
<link href='https://fonts.cdnfonts.com/css/gagalin' rel="stylesheet" />

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

Utilize JavaScript to establish an object with key and value pairings

Wanting to loop through and create an object that contains key => [value], if the key already exists, simply add the value. Here is what I have tried so far: let dataName = []; let obj = {}; checkboxes.forEach(checkbox => { if (checkbox.che ...

javascript

The <form> element is giving me headaches in my JavaScript code

Trying to troubleshoot why my HTML pages render twice when I add a form with JavaScript. It seems like the page displays once with the script and again without it. Below is the basic HTML code: <form action="test.php" method="post"> <div class=" ...

javascripthtmlforms

The mouseover animation doesn't reset to its original position during quick movements, but instead continues to move without interruption

Greetings! Welcome to my live page. Currently, I am facing an issue with the sliding animation on the header. Specifically, the small gray slide-up divs at the bottom of the sliding pictures are not behaving as expected. They are meant to slide up on mous ...

jqueryhtmlcss

Managing authentication sessions in React

I have been working on a two-part application that combines React, Express, and Apollo for GraphQL. To handle authentication, I have been studying guides and tutorials, and I have made progress by utilizing JWT tokens and the Context API in React: When a ...

javascriptnode.jsreactjsexpressjwt

Utilizing the Power of AJAX in Combination with an Event Loop

I have a function that is supposed to make AJAX requests with an event loop while taking 9 inputs at the top and querying them from a database. Currently, it only logs to the console but will eventually perform more actions. However, I am encountering an ...

javascriptajaxloopsfor-loopevents

The re-assignment of `req.session.variable` in Express-session does not carry over between two different routes

I am currently working on a basic app that allows logged in users to search and book train journeys using Express, MongoDB, Mongoose, and Express-session. The selected journeys are temporarily stored in the req.session.order variable (which I believe is gl ...

javascriptmongodbexpressmongoose

An elaborate warning mechanism in Redux-observable that does not trigger an action at the conclusion of an epic

I'm currently working on implementing a sophisticated alert system using redux and redux-observable. The requirements are: An action should request an alert: REQUEST_ALERT An action should create an alert and add an ID: SET_ALERT (handled in the ep ...

javascriptrxjsrxjs5redux-observable

"Ensuring Contact Information is Unique: A Guide to Checking for Existing Email or Phone Numbers in

I'm encountering an issue with validating email and phone numbers in my MongoDB database. Currently, my code only checks for the presence of the email but does not respond to the phone number. const express = require("express"); const router ...

javascriptnode.jsmongodbexpressmongoose

Updating by clicking with auto-prediction feature

I have implemented an autosuggestion feature to display results from a database table while typing in an HTML field, and I am looking to utilize JavaScript to post another value from the same row where the autosuggested values are stored. https://i.stack. ...

javascriptphpmysqlajax

Uncovering unseen tags generated by JavaScript on a webpage using Python

I have THIS LINK page that contains javascript. To view the javascript, simply click on show details. How can I extract data from this URL source? Should I use re? Here is what I attempted with re: import urllib import re gdoc = urllib.urlopen('Tha ...

javascriptpythonhtmlseleniumxpath

What is the best way to set `:global` as the default in css-modules within next-js?

Currently, I am incorporating CSS modules into a Next.js project. If we take a look at the following code: // foo.module.(s)css .foo :global { animation-name: bounce; // ... } My question is, is there a way to adjust the Webpack configuration in Ne ...

webpacknext.jscss-modulescss-loader

The error occurred while trying to cast the value of "{{Campground.name}}" to an ObjectID. This value, which is of type string, could not be converted to an ObjectID at the path "_id" for

const express = require("express"); const session = require("express-session"); const cookieParser = require('cookie-parser') const mongoose = require("mongoose"); const { Campground, User, Review } = require(" ...

javascriptnode.jsmongodbexpressmongoose

Tips for Properly Positioning Floating Pop-Up Messages Using CSS and jQuery

I was experimenting with adding a button that triggers a popup message to my website. I followed a coding tutorial using jQuery and CSS, which looks like this: Javascript : !function (v) { v.fn.floatingWhatsApp = function (e) {...} }(jQuery); CSS : .fl ...

javascriptjqueryhtmlcssbutton

The challenge of accessing controllerAs variables/objects in AngularJS custom directives

After deciding to refactor my code and move DOM manipulation and functions into directives instead of controllers, I encountered an issue with accessing variables/objects defined using the controllerAs 'this' syntax. Despite trying to use bindToC ...

javascriptangularjsmodel-view-controllerangularjs-directive

Animation Effects in Opera and Internet Explorer

Just unveiled my latest project, CSSload.net - an awesome tool for generating CSS spinners and bars. The animations are running smoothly on Firefox and Webkit browsers. Curious if anyone has tips on animating elements like this in Opera and IE? ...

jqueryajaxcssload

AngularJS not displaying loader during AJAX request

While utilizing ajax requests with $http, there seems to be a delay due to the server operation taking longer than expected. I have implemented a loader to display while processing the request, but unfortunately it is not showing up on the page. Even after ...

javascriptangularjsajax

Retrieve information from a .json file using the fetch API

I have created an external JSON and I am trying to retrieve data from it. The GET request on the JSON is functioning correctly, as I have tested it using Postman. Here is my code: import "./Feedback.css"; import { useState, useEffect } from " ...

javascriptreactjsjsonreact-hooks

Error in Next.js: Trying to destructure an undefined object in useContext

While attempting to change the state of my cursor in a Next.js app using useContext, I encountered the following error: TypeError: Cannot destructure 'Object(...)(...)' as it is undefined. The goal is to update the state to isActive: true when h ...

javascriptreactjsreact-hooksnext.jsreact-context

Is it considered undesirable to have HTML source code all condensed into a single, uninterrupted line?

I have been thinking about my approach in my PHP CMS application. I currently capture most of the generated HTML into buffers and then flush their content at the appropriate location in the template page using my custom buffer class. Recently, I added a me ...

phphtmlminify

Adjusting the speed of Flexslider with mousewheel control

I am looking to implement flexslider with mousewheel functionality. Here is an example of how I want it to work: $('#slider').flexslider({ animation: "slide", mousewheel: true, direction: "vertical", ...

javascriptjqueryflexslider