Loading a font from a CDN and it's fine on Chrome Browser and Safari for iOS Simulator but not loading on iOS Safari browser?
Question
Kind of driving me crazy and not sure what I'm doing wrong.
So I'm using NextJS and I loaded this font into my <Link /> . It looks fine on Chrome and Safari for the iOS simulator but doesn't load when I load up the site on my personal device.
This is the font: https://www.cdnfonts.com/gagalin.font
_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;
}
1 answers
solution1
1 ACCPTED 2022-04-21 06:36:14
I don't claim to fully understand this, but a workaround seems to be to put the CSS defining the font-family direct into a stylesheet in the HTML's head.
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 is something about IOS not loading fonts if it can't detect that they are being used (and if the content is entirely created by JS it doesn't detect any text at load time) but that doesn't fully explain why putting the font-face declaration directly in works.
It may be worth experimenting with rel="preload" on the link instead, but at least the above workaround seems to help.
UPDATE:
It seems things are even more simple than the speculation above.
The link calls the stylesheet using http. Change to https and all is well:
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" />
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.