<strong>En google fonts me salen 2 links:</strong> . . <strong><code>&lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.gstatic...

Daniel Eduardo Sanchez Yañez

Daniel Eduardo Sanchez Yañez

Pregunta
studenthace 4 años

En google fonts me salen 2 links:

.

.

<link rel="preconnect" href="https://fonts.gstatic.com">** (Este debo agregarlo tambien?)

.

¿Que significa preconnect?

.

- <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Inter:wght@400;500;700&display=swap" rel="stylesheet">

7 respuestas
para escribir tu comentario
    Daniel Eduardo Sanchez Yañez

    Daniel Eduardo Sanchez Yañez

    studenthace 4 años

    Muchas Gracias!!!

    Héctor Eduardo López Carballo

    Héctor Eduardo López Carballo

    studenthace 4 años

    En el recuadro que compartes el preconnect nada más sirve para optimizar la conexión, la linea que dice cuáles fuentes vas a usar es la segunda.

    Héctor Eduardo López Carballo

    Héctor Eduardo López Carballo

    studenthace 4 años

    Con un preconnect es suficiente. De hecho google fonts te junta todas las fuentes que selecciones en un solo url para que no tengas que hacer varias solicitudes, sólo tienes que agregar cada estilo de cada familia que elijas.

    Luis Lira

    Luis Lira

    studenthace 4 años

    Sí, lo mejor es copiarlo tal cual porque ayuda a que el navegador pueda cargar más rápido todo.

    Daniel Eduardo Sanchez Yañez

    Daniel Eduardo Sanchez Yañez

    studenthace 4 años

    Muchas gracias, pero cada vez que coloque una fuente debo colocar el preconnect? osea todo lo que esta en el recuadro de aca abajo?

    preconnect.png

    Por ejemplo con la fuente DM Sans y Inter. Ambas me muestran el mismo recuadro de arriba, copio y pego y ya. O con un preconnect basta?

    Luis Lira

    Luis Lira

    studenthace 4 años

    Es parte de las estrategias de carga :) también podrás aprender sobre eso mismo y más cosas de optimización en el Curso de Optimización Web

    Héctor Eduardo López Carballo

    Héctor Eduardo López Carballo

    studenthace 4 años

    Sí debes agregarlo también.

    le dice al navegador que eventualmente se van a requerir recursos de ese origen, de esta forma se establece una conexión desde el inicio para que sea más rápido al momento de usar esos recursos.

Curso de Responsive Design: Maquetación Mobile First

Curso de Responsive Design: Maquetación Mobile First

Desarrolla sitios web adaptables con Responsive Design y Mobile First. Aprende a utilizar wireframes, crear estilos y aplicar media queries para garantizar que tus proyectos se vean bien en cualquier dispositivo. Usa herramientas como Figma y Lighthouse.

Curso de Responsive Design: Maquetación Mobile First
Curso de Responsive Design: Maquetación Mobile First

Curso de Responsive Design: Maquetación Mobile First

Desarrolla sitios web adaptables con Responsive Design y Mobile First. Aprende a utilizar wireframes, crear estilos y aplicar media queries para garantizar que tus proyectos se vean bien en cualquier dispositivo. Usa herramientas como Figma y Lighthouse.