Me vuelve loco y no estoy seguro de lo que estoy haciendo mal.
Así que estoy usando NextJS y cargué esta fuente en mi <Link /> . Se ve bien en Chrome y Safari para el simulador de iOS, pero no se carga cuando cargo el sitio en mi dispositivo personal.
Esta es la fuente: https://www.cdnfonts.com/gagalin.font
_documento.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; }No pretendo entender completamente esto, pero una solución parece ser poner el CSS que define la familia de fuentes directamente en una hoja de estilo en el encabezado del HTML.
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; }Hay algo en IOS que no carga fuentes si no puede detectar que se están utilizando (y si el contenido es creado completamente por JS, no detecta ningún texto en el momento de la carga), pero eso no explica completamente por qué poner el declaración de tipo de letra directamente en las obras.
Puede valer la pena experimentar con rel="preload" en el enlace, pero al menos la solución anterior parece ayudar.
ACTUALIZAR:
Parece que las cosas son aún más simples que la especulación anterior.
El enlace llama a la hoja de estilo usando http. Cambia a https y todo está bien:
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" />