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;
}
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" />