Editar tipos de letra y estilos con CSS en WordPress

Editar tipos de letra y estilos con CSS en WordPress
[vc_row][vc_column][vc_column_text]A veces, necesitamos darle un “estilo” diferente a ciertas partes de nuestro wordpress. Pues gracias al CSS puedes mejorar el aspecto del tema de wordpress que tienes instalado, podrás modificarlo a tu gusto.

 

Dentro del propio wordpress existe un editor de código que permite modificar el aspecto del propio tema que previamente hayas instalado. Existe una opción llamada CSS personalizado y consiste precisamente en entrar en el tema que tengamos instalado en nuestro WordPress y a través de él entrar en opciones y modificar el CSS desde ahí.

 

También podremos modificar los estilos de nuestro wordpress a través del editor de código que nos proporciona el propio WordPress, dentro de los “Ajustes”, en la opción “Editor”.

Estas modificaciones en el CSS nos darán la posibilidad de cambiar estilos y fuentes de los principales elementos del contenido de nuestra web, por ejemplo, el color de los enlaces, los títulos, o partes del contenido.

 

Modificar la tipografía principal de wordpress

Para realizar esto, lo más fácil es editar la clase para el elemento body, así podremos usar una fuente para todo el contenido.

Dentro del archivo css (lo más probable es que se llame style.css) localizamos la etiqueta body, que puede ser por ejemplo:[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text] [css]

body {

font-family:Trebuchet Ms,Arial,Verdana,sans-serif;

}

[/css] [/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]Los atributos dentro de la propiedad font-family son los que se encargan de definir la fuente usada, se ponen varias fuentes para poder usar las fuentes instaladas, y en el caso de que no esté instalada alguna de las fuentes, cogerá la última, la cual es sans-serif que está por defecto en todos los navegadores.

Para modificar dichas fuentes es tan fácil como elegir la serie de fuentes que deseemos:[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text] [css]

body {

font-family:Calibri,Arial,Verdana,sans-serif

}
[/css] [/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

 

Modificar el estilo principal de los títulos de wordpress

Para modificar los títulos, necesitamos editar la clase de la etiqueta h1, en caso de que no exista o queramos editar algún título en concreto, podremos crear una clase.

En el caso de wordpress, suele existir una etiqueta que agrupa el contenido de nuestra página de wordpress, normalmente su id es “content”

Así que por ejemplo:[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text] [css]

#content h1 {

font-style:italic;

Font-weight:bolder;

font-size:25px;

font-color:#eaeaea;

font-family:’Trebuchet Ms’,sans-serif;

}

[/css] [/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]Además de poder definir la fuente, podemos definir una serie de propiedades que nos facilitarán la edición a nuestro gusto de dichos títulos.

CSS nos brinda una infinidad de propiedades para modificar estas etiquetas nuestro gusto.

 

Modificar el estilo principal de los títulos de wordpress

 

Si quisiéramos modificar el resto de etiquetas de título, como los h2, h3,etc.. O por ejemplo los enlaces, podemos hacer los mismo que hemos realizado anteriormente.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text] [css]

body h2, body h3, body h4, body h5, body h6 {

font-style:normal;

Font-weight:600;

font-size:25px;

font-color:#eaeaea;

font-family:’Trebuchet Ms’,sans-serif; }

/*Para editar los enlaces*/

#content a {

font-weight:400;

color:#999999

}
[/css] [/vc_column_text][/vc_column][/vc_row]

 

Conclusión

Hacer un buen uso del CSS te abre mil opciones dentro de WordPress, nunca esta de más conocer algunos códigos que te puedan ayudar a hacer más vistoso tu sitio web.

Si te ha quedado alguna duda sobre cómo editar los tipos y formatos de letra en WordPress usando CSS no dudes en escribirme en los comentarios, estaré encantado de poder ayudarte.

Si quieres saber más cómo hacer un degradado en CSS3 aquí tienes otro artículo del blog que puede interesarte.

Valora este artículo:
¡Sé el primero en valorar este artículo!
Juanlu Pintor
Juanlu Pintor
Director de STAMINA Marketing Digital y profesor de Marketing y Dirección Comercial en la Universidad de Málaga.
Artículos destacados