CSS com @import fonts google alterá-lo.

ricrey · 20/08/2019

Hola a todos, tengo un theme de wordpress que dentro de uno de sus archivos CSS usa la función @import para traer fonts de google quisiera reemplazarlo de una manera más óptima y que cumpla las mismas funciones....

les dejo parte de código a ver si me pueden ayudar.

@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700,900);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);
.font_weight300{font-weight:300!important}
.font_weight400{font-weight:400!important}

había pensado hacer algo así

<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">

pero ese código me parece que va más en un archivo html por ejemplo, pero este código con @import va en un archivo .css así que ahí es donde va mi duda.

salchipulpo_ · 20/08/2019

Ese codigo va dentro de <head> y </head>

ricrey · 20/08/2019

salchipulpo_ disse:
Ese codigo va dentro de <head> y </head>

me suponía algo así... pero quiero reemplazar el @import dentro del CSS y no en php o html...

salchipulpo_ · 20/08/2019

ricrey disse:
me suponía algo así... pero quiero reemplazar el @import dentro del CSS y no en php o html...

Son solo esas dos, si quieres mantener tu import en el css pero con una sola url puedes meterle un escape entre fuente y fuente

@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700,900|Open+Sans:300,400,600,700);
.font_weight300{font-weight:300!important}
.font_weight400{font-weight:400!important}

ricrey · 20/08/2019

dentro del css no puedo usar <link>? 🙁

y en un theme de wordpress en donde podría hacer el llamado para usar <link> y paso la prueba de velocidad de los navegadores?

salchipulpo_ · 20/08/2019

ricrey disse:
dentro del css no puedo usar <link>? 🙁

y en un theme de wordpress en donde podría hacer el llamado para usar <link> y paso la prueba de velocidad de los navegadores?

que es lo que quieres hacer? te da error por el import, cierto?
Lo que puedes hacer es copiar el valor de tu import css fonf:

https://fonts.googleapis.com/css?family=Lato:300,400,700,900|Open+Sans:300,400,600,700

)

Copia todo el css de ese y mételo a tu hoja de estilos, de esa manera no cargas ningún import y mantienes el tipo de fuente.
De paso le das a comprimir todo tu css (https://cssminifier.com/)
Y listo

Dtokee · 21/08/2019

Hola! Podrías agregarlas en el archivo functions.php de esta manera:

Inserir CODE, HTML ou PHP:

wp_register_style('google_fonts', 'https://fonts.googleapis.com/css?family=Lato:300i,400,700,900|Open+Sans:300i,400,600,700', array(), '1.0.0');

Y llamarlas al CSS de la siguiente forma:

Inserir CODE, HTML ou PHP:

font-family: 'Lato', sans-serif;

font-family: 'Open Sans', sans-serif;

Accesito · 21/08/2019

Te pego aquí como lo tengo yo. Ejemplo con la fuente EEsti-Bold

Dentro del style.css del tema hijo:

Inserir CODE, HTML ou PHP:

@font-face {
    font-family: Eesti-Bold;
    src: url(https://tusitioweb/wp-content/themes/nombredeltema/fonts/GT-Eesti-Pro-Display-Bold.woff2);
}

Luego si quieres ponerlo en algún lugar utilizas el

Inserir CODE, HTML ou PHP:

font-family:'Eesti-Bold', sans-serif;

Por ejemplo:

Inserir CODE, HTML ou PHP:

#et-menu > .menu-item > a{
    font-family:'Eesti-Bold', sans-serif;
    color:#3a3a3a;
    font-weight:400;
    line-height:60px;
}

Y para cambiar todos los textos de la web:

Inserir CODE, HTML ou PHP:

body {
    font-family: "Eesti-Regular", arial;
    font-weight:500;
}
 
h1, h2, h3, h4, h5, h6 {
    font-family: 'Eesti-Bold', arial;
    font-weight:700;
}

TODO DENTRO DEL style.css DEL TEMA HIJO

CSS com @import fonts google alterá-lo.

ricrey

salchipulpo_

ricrey

salchipulpo_

ricrey

salchipulpo_

Dtokee

Accesito

Tópicos similares