Estoy usando el componente Global de emoción para aplicar una fuente global a mi aplicación:
export const GlobalStyle: FC<{}> = () => ( <Global styles={css` @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;700;900&display=swap'); body { font-family: 'Poppins', sans-serif; } `} />Este enfoque funciona perfectamente bien en localhost, pero en producción no: cuando cargo la página por primera vez, aparece una fuente predeterminada (Liberation serif), no Poppins. Poppins se aplica al cuerpo solo después de actualizar la página.
Mi impresión es que la página se procesa antes de que la fuente esté disponible, y esta es la razón por la cual se muestra la fuente correcta cuando se actualiza la página (en ese momento la fuente ya está disponible), pero no cuando la cargo por primera vez.
Cualquier ayuda sería muy apreciada, ya que traté de buscar una solución en todas partes, pero no pude encontrar ninguna.
Finalmente resolví el problema. Fue debido a un conflicto con la biblioteca react-select (que también estaba usando), que también tiene la emoción como dependencia. React-select tenía emotio v 11, mientras que mi aplicación todavía tenía emotio 10. Después de actualizar emotio a v 11, el problema desapareció. https://emotion.sh/docs/emotion-11