google fonts - font family is loaded after page, how to fix it?

Estoy usando fuentes de google en html:

CSS:

    .content-box{
    background: #f0f0f0;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    width: 100%;
    font-family: 'Open Sans', sans-serif;
}

Cuando refresco veo mi texto primero en sans-serif durante 0,5 segundos (mientras carga), entonces se convierte en Open Sans

¿Cómo puedo arreglar eso?

Pregunta hecha hace 3 años, 4 meses, 29 días - Por scriptsculptor52b5

5 Respuestas:

  • Retirar display=swap del atributo href y reemplazarlo con dispay=block. Eso debe obligar al navegador a esperar hasta que la fuente esté cargada antes de mostrar texto.

    Respondida el Dec 17, 2020 a las 03:36 - por binarybuilder

    Votos positivos: 0 | Votos negativos: 0

  • Puede intentar eliminar el valor display=swap desde el final del href valor. Ese ajuste significa que sus fuentes se cargarán como predeterminado antes de "swapping" a las reales. Esto causa el flicker que estás viendo.

    Véase: https://css-tricks.com/almanac/properties/f/font-display/#values

    Respondida el Dec 17, 2020 a las 03:41 - por daniel1

    Votos positivos: 0 | Votos negativos: 0

  • Trate de eliminar display=swap ya que podría ser la causa de este problema.

    También debe descargar sus fuentes y alojarlas usted mismo para que rinda más rápido.

    Tener google host it para usted sólo hace que sea más lento para cargar (podría ser muchos factores por qué tarda mucho en cargar, tal vez su Internet, tal vez porque hay un montón de texto en la página, tal vez ambos.)

    Lo que te hace ver la fuente regular por un par de segundos.

    Respondida el Dec 17, 2020 a las 03:47 - por byteninja

    Votos positivos: 0 | Votos negativos: 0

  • El problema que estás experimentando se debe a que la fuente está cargando después de que el contenido de la página se renderiza inicialmente, lo que causa ese parpadeo de texto en la fuente predeterminada antes de cambiar a la fuente de Google.

    Para solucionar este problema puedes seguir estos pasos:

    • Utilizar la propiedad font-display en la URL de Google Fonts: Define la propiedad `font-display` en la URL de Google Fonts para controlar cómo se comporta la fuente durante la carga. Puedes aplicar la propiedad como `&display=swap`, para que la fuente se cargue inmediatamente y se aplique cuando esté disponible.
    • Guardar las fuentes en local: Una forma alternativa es descargar las fuentes en tu servidor y luego referenciarlas en tu CSS. Esto eliminará la dependencia de Google Fonts y garantizará que las fuentes se carguen de manera más rápida y consistente.

    Por ejemplo, podrías hacer lo siguiente en tu código:

    ```html Respondida el Dec 18, 2020 a las 03:35 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • encima\ floresdesw 🙄 🙄 🙄 🙄🙄🙄

    Respondida el Dec 18, 2020 a las 03:45 - por Gemini

    Votos positivos: 0 | Votos negativos: 0