Estoy usando NextJS junto con Tailwind CSS.
En mi aplicación, los usuarios pueden seleccionar un tema que incluya diferentes combinaciones de colores junto con una lista de fuentes preseleccionadas. Pueden elegir una fuente que les guste para la aplicación.
Estas son solo fuentes de Google.
No estoy seguro de cuál es la mejor manera de cargar una fuente según el nombre de fuente recibido de la base de datos. Puedo cargar los datos de la base de database en serverSideProps , pero luego, ¿cómo puedo cargar la fuente antes de renderizar para que no haya parpadeo en la pantalla? ¿Puedes ayudarme?
ACTUALIZAR
A partir de ahora, he hecho lo siguiente:
En tailwind.config.js, tailwind.config.js el tema con diferentes fuentes disponibles.
tema: { fontFamily: { inter: ['Inter', 'sans-serif'], cal: ["Cal Sans", "Inter", "sans-serif"], arima:['Arima Madurai','cursiva' ], opensans:['Open Sans', 'sans-serif'], } }
Creé una hoja de estilo para cada fuente, que se almacena en una carpeta pública en esta ubicación:
/fuentes/opensans/stylesheet.css
/fuentes/cal/stylesheet.css
/fuentes/inter/stylesheet.css
/fuentes/arima/stylesheet.css
Estas hojas de estilo contienen la fuente. Un ejemplo a continuación:
@font-face { font-family: "Cal Sans"; src: url("CalSans-SemiBold.woff2") format("woff2"), url("CalSans-SemiBold.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }pages/index.js ), cargo las preferencias del usuario mediante serverSideProps y las paso a un componente de Layout . Este componente de diseño tiene el head que se crea a través de next/head . Llamemos a la fuente de apoyo recibida del servidor como themeFont . Digamos que la preferencia del usuario es Cal Sans y la preferencia del usuario se almacena en la base de datos como valor cal . Entonces, el valor de themeFont será cal .
En la cabecera, cargo la hoja de estilo relacionada de la siguiente manera:
<Head> <link rel="stylesheet" href={`/fonts/${themeFont}/stylesheet.css`}></link> </Head>/fonts/cal/stylesheet.css y la fuente requerida. No se carga ninguna otra fuente. Entonces puedo usarlo en mis componentes con font-cal porque se ha definido en tailwind.config.css Funciona bien. Todavía veo un parpadeo, tal vez debido a font-display:swap , o tal vez por alguna otra razón. Pero sigo sintiendo que esta no es la solución óptima y que podría hacerse de una mejor manera.
Buscando ayuda en esto.
Está en la dirección correcta, debe usar getServerSideProps para establecer la fuente deseada en la etiqueta <link> . Pero primero debe agregar el rel="preload" para cargar las fuentes y luego puede colocar el enlace para su css.
<link rel="preload" href="/fonts/theme-font.woff2" as="font" type="font/woff2" ></link>El valor de precarga del atributo rel del elemento le permite declarar solicitudes de recuperación en el HTML, especificando los recursos que su página necesitará muy pronto, que desea comenzar a cargar temprano en el ciclo de vida de la página, antes de que se active la maquinaria de representación principal de los navegadores.
Luego, para evitar el parpadeo, use el valor de fallback para la propiedad font-display , ocultará el texto durante aproximadamente 100 ms y, si la fuente aún no se ha descargado, usará el texto de respaldo.
@font-face { font-family: "Cal Sans"; font-display: fallback; src: url("CalSans-SemiBold.woff2") format("woff2"), } Puede usar los siguientes valores para font-display para diferentes estrategias:
Como solución alternativa, puede incrustar sus fuentes dentro de sus estilos css:
@font-face { font-family: "Cal Sans"; font-display: fallback; src: url(PASTE-BASE64-HERE) format('woff2') }Consulte esta demostración como referencia y allí puede convertir el archivo woff2 a base64.
Dos ideas:
https://fontsource.org/docs/getting-started
Entonces debería poder importar dinámicamente la fuente correspondiente tan pronto como sepa cuál es la fuente. No sé si la fuente parpadearía aquí.
await import `@fontsource/${fontName}`; Esto supone que sabe que fontName será un nombre de fuente de Google válido, o que necesitará try / catch .
getServerSideProps y luego usar un elemento <Head> personalizado para apuntar al archivo CSS correspondiente en fonts.googleapis.com y cargar eso como parte de <Head> antes de que se muestre otro contenido (o al menos mientras está en proceso de hacerlo).