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 bytebard66b1

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:37 - por scriptsculptor

    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:43 - por progprophet

    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:49 - por syntaxsensei

    Votos positivos: 0 | Votos negativos: 0

  • El problema que estás experimentando se debe a que la fuente de Google Fonts se carga de forma asíncrona, lo que causa ese breve periodo en el que el texto se muestra en la fuente por defecto (sans-serif) antes de aplicar la fuente de Google Fonts. Para solucionar esto, puedes utilizar una técnica conocida como "font-display" en tu hoja de estilos CSS.

    La propiedad font-display te permite controlar cómo y cuándo se muestra el texto mientras la fuente está cargando. Puedes añadir la propiedad font-display a tu regla de @font-face en tu archivo CSS de la siguiente manera:

    ```css @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; / Puedes ajustar el peso de la fuente según tus necesidades / src: url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap'); font-display: swap; / Esta es la clave para cargar la fuente inmediatamente / }

    .content-box { background: f0f0f0; min-height: 600px; display

    Respondida el Dec 18, 2020 a las 03:36 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • El problema = errores:bad code snipet> 

    html
    


    


    displayBlockquote
    css

    ```

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

    Votos positivos: 0 | Votos negativos: 0