1

Estoy tratando de importar 3 estilos distintos de fuentes desde Google Fonts en mi hoja de estilo de CSS y en la vista de la web no se reflejan.

Mi código en el CSS es este:

@import url('https://fonts.googleapis.com/css2? family = Coda + Título: wght @ 800 & display = swap');
@import url('https://fonts.googleapis.com/css2? family = Source + Sans + Pro: wght @ 700 & display = swap');
@import url('https://fonts.googleapis.com/css2? family = El + Messiri & display = swap');

body {
  background-color: cornsilk;
}

#contenedor {
  width: 90%;
  max-width: 800px;
  margin-top: 0;
  margin-right: auto;
  margin-bottom: o;
  margin-left: auto;
  font-family: "El Messiri", sans-serif;
}
header,
footer {
  text-align: center;
  padding: 10px;
  background-color: #e6fde2;
  font-family: "Source Sans Pro", sans-serif;
}
title {
  font-family: "Coda Caption", sans-serif;
}
5
  • Cual es el HTML que usas?
    – Chico3001
    el 24 abr. 2021 a las 19:08
  • Uso el html 5. O me preguntas el codigo?
    – Carla
    el 24 abr. 2021 a las 19:27
  • Hola, Carla. Tienes que especificar dónde debería reflejarse. Si en todo el documento, título, etc. el 24 abr. 2021 a las 19:35
  • lo aclare como font-family en #contenedor header,footer y title. A cada uno le asigne una de las fuentes q importe
    – Carla
    el 24 abr. 2021 a las 19:38
  • Continuemos el debate en el chat.
    – jachguate
    el 24 abr. 2021 a las 20:03

2 respuestas 2

1

Tienes varios errores

  • Para comenzar, todos los espacios que hay en cada URL de la llamada a https://fonts.googleapis.com
  • Puedo observar también que estás pasando un nombre de fuente como Coda + Título al API y luego la referencias como Coda Caption en el CSS. No traduzcas los parámetros, los API producen los resultados deseados si se les da la entrada precisa, y no suelen ser multi-idioma.

No voy a corregir cada uno de tus errores, mejor te enseño a pescar...

Comienza por lo básico, importa un font sin tantos parámetros:

@import url('https://fonts.googleapis.com/css?family=Tangerine');
body {
    background-color: cornsilk;
}
h1 {
    text-align: center;
    padding: 10px;
    background-color: #E6FDE2;
    font-family: 'Tangerine', sans-serif;
}
<h1>Hola mundo</h1>
<p>¡El título se ve espectacular!</p>

A partir de allí, puedes ir agregándole complejidad, por ejemplo una fuente con un nombre compuesto:

@import url('https://fonts.googleapis.com/css?family=Dancing+Script');
body {
    background-color: cornsilk;
}
h1 {
    text-align: center;
    padding: 10px;
    background-color: #E6FDE2;
    font-family: 'Dancing Script', sans-serif;
}
<h1>Hola mundo</h1>
<p>¡El título se ve espectacular!</p>

Observa como la URL del @import no contiene ningún espacio... ahora agreguemos un segundo parámetro a la URL, por ejemplo, el parámetro display

@import url('https://fonts.googleapis.com/css?family=Dancing+Script&display=swap');
body {
    background-color: cornsilk;
}
h1 {
    text-align: center;
    padding: 10px;
    background-color: #E6FDE2;
    font-family: 'Dancing Script', sans-serif;
}
<h1>Hola mundo</h1>
<p>¡El título se ve espectacular!</p>

Encontrarás la información que necesitas para agregar más parámetros en Get Started with the Google Fonts API (en inglés).

Un tip muy importante es que, si copias la URL que estás poniendo en un @import y la pegas en un navegador, el navegador te va a mostrar CSS válido, que es lo que devuelve el API, por ejemplo esta URL:

https://fonts.googleapis.com/css?family=Dancing+Script&display=swap

Ahora mismo devuelve lo siguiente:

/* vietnamese */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dancingscript/v16/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Rep8ltA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dancingscript/v16/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3ROp8ltA.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dancingscript/v16/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Sup8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Si la URL es inválida, por el contrario, te devolverá una página de error, de esa manera puedes estar segura de estar construyendo las URL's de manera correcta antes de ponerlas en tu hoja de estilo.

7
  • Yo copie tal cual estaba en Google Font, sin la etiqueta <style></style> porque iba a ponerla en mi hoja de CSS. Entonces debería sacar todos los espacios y así funcionaria?
    – Carla
    el 24 abr. 2021 a las 19:42
  • No copiaste y pegaste... copiaste, pero copiaste mal. Puedes copiar y pegar o revisar caracter por caracter para asegurarte de tener exactamente lo mismo. Como he explicado en mi respuesta, tienes varios errores, los espacios son solo uno de ellos. Debes corregir las URL's siguiendo las reglas del API, que están documentadas Sigue. El último TIP que te dejé te ayudará a verificar si lo has hecho bien.
    – jachguate
    el 24 abr. 2021 a las 19:46
  • Por ejemplo, no existe la fuente Coda+Título, pero si Coda+Caption. No traduzcas nada de lo que está en parámetros... las API y los autómatas en general necesitan entradas precisas para dar los resultados esperados.
    – jachguate
    el 24 abr. 2021 a las 19:50
  • 1
    Creo que tengo el navegador con traducción automática, porque también me figura como familia de fuentes en lugar de font family. Voy a revisar eso y ver si me cambia el codigo. Gracias por hacérmelo notar
    – Carla
    el 24 abr. 2021 a las 19:56
  • 1
    Bueno si confoirmado, el error base estaba en que tenia tradiccion automatica de las paginas en inlges :S Gracias por hacerme notar de este pequeño detalle jeje. Voy a tratar de practicar lo q me enseñaste para ahorrarme estas complicaciones a futuro.
    – Carla
    el 24 abr. 2021 a las 20:08
0

¡Hola! Lo mejor es que pongas el enlace del cdn de la fuente en el html o archivo donde tienes enlazada de la hoja de estilos.

Archivo html:


<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">

style.css:


body {
  background-color: cornsilk;
}
#contenedor {
  width: 90%;
  max-width: 800px;
  margin-top: 0;
  margin-right: auto;
  margin-bottom: o;
  margin-left: auto;
  font-family: "El Messiri", sans-serif;
}
header,
footer {
  text-align: center;
  padding: 10px;
  background-color: #e6fde2;
  font-family: "Source Sans Pro", sans-serif;
}
title {
  font-family: "Coda Caption", sans-serif;
}



Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.