Cómo encontrar la URL de Google Fonts
Cómo localizar y copiar la URL de Google Fonts para usarla en el diseño del favicon. El proceso, paso a paso.
¿Por qué Google Fonts? Recomendamos Google Fonts porque todas las fuentes de su sitio se pueden usar de forma gratuita con fines comerciales. Así las usas en el favicon sin preocuparte de licencias ni costes extra.
Guía paso a paso
Paso 1: Entra en Google Fonts
Abre fonts.google.com en el navegador. Es el sitio oficial de Google Fonts, con miles de fuentes gratuitas.
Paso 2: Elige una fuente
Recorre la colección y haz clic en la fuente que quieras. También puedes buscar por nombre en la barra de la parte superior.
Paso 3: Añade fuentes a la selección
Cuando encuentres una que te guste, pulsa el botón "Get font" de la esquina superior derecha. Así se añade a la selección. Puedes repetirlo con varias fuentes: el creador de favicons carga varias desde una sola URL, así que añade las que necesites.
El botón "Get font" está en la esquina superior derecha
Paso 4: Abre las fuentes seleccionadas
Cuando hayas añadido las que quieras, busca el botón "View selected families" en la esquina superior derecha. Muestra un distintivo con el número de fuentes. Ábrelo y pulsa "Get embed code" para ver el fragmento de código.
Pulsa "View selected families" y luego "Get embed code"
El diálogo de código de inserción, con todas las etiquetas link
Paso 5: Extrae la URL de la fuente
Google Fonts muestra varias etiquetas link, incluidas las de preconnect y la del stylesheet principal. Verás algo así:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet"> Busca la etiqueta link cuya URL contiene css2: es la más larga. Copia la URL completa del atributo href (todo lo que hay entre comillas). En el ejemplo de arriba, la URL es:
https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap Pégala en el campo Fuente personalizada del creador de favicons. Esa única URL incluye todas las fuentes que hayas seleccionado.
Consejos
- Incluye siempre &display=swap en la URL para un mejor rendimiento
- Selecciona solo las fuentes que vayas a usar, para reducir el tiempo de carga
- Copia la URL entera; si se queda a medias, el creador puede no cargar las fuentes