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.