CSS con @import fonts google cambiarlo.

ricrey · 2019-08-20T09:06:57-0500

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_ · 2019-08-20T09:14:22-0500

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

ricrey · 2019-08-20T09:16:21-0500

salchipulpo_ dijo:
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_ · 2019-08-20T09:44:20-0500

ricrey dijo:
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 · 2019-08-20T11:15:31-0500

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_ · 2019-08-20T11:23:19-0500

ricrey dijo:
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 · 2019-08-21T00:53:26-0500

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

Insertar CODE, HTML o 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:

Insertar CODE, HTML o PHP:

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

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

Accesito · 2019-08-21T04:34:31-0500

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

Dentro del style.css del tema hijo:

Insertar CODE, HTML o 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

Insertar CODE, HTML o PHP:

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

Por ejemplo:

Insertar CODE, HTML o 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:

Insertar CODE, HTML o 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 con @import fonts google cambiarlo.

ricrey

salchipulpo_

ricrey

salchipulpo_

ricrey

salchipulpo_

Dtokee

Accesito

Temas similares