Cómo instalar fuentes en Wordpress paso a paso

Normalmente los temas que instalamos en Wordpress vienen configurados con una serie de fuente o tipografías con las que personalizar nuestra página web. Pero, ¿y si ninguna nos convence? ¿Y si tenemos una tipografía mente que queremos usar? Aquí te explico como cargarla.

Cómo añadir fuentes en Wordpress

Sí te fijas en la fuente de esta web, no es una que se suela ver en internet. Se llamada Basis Grotesque Pro y la he tenido que cargar manualmente en Wordpress.

A continuación te explico como lo he hecho.

Paso 1: busca la fuente que quieras usar en Google

Para ello, solo tienes que ir al buscador y escribir la fuente que quieras y descargarla de cualquier web que sea fiable. Yo en mi caso usé font.download.

cargar fuente en wordpress

Una vez descargada, tienes que convertirla al formato Woff, para ello puedes usar el conversor transfonter.org. Su uso es muy sencillo, solo tienes que arrastrar las fuentes y convertirlas a Woff y Woff2.

añadir fuentes a wordpress

Paso 2: sube las fuentes al servidor

Una vez convertidas, tienes que descargarlas y subirlas a la carpeta de Wordpress fonts, la cual se encuentra en wp-content/uploads/fonts (si no existe la carpeta, créala). Para ello, puedes usar el administrador de archivos que te ofrece tu proveedor de hosting.

Consejo
Realmente puedes almacenarlas en el directorio que quieras, yo he usado ese por mantener un orden
subir fuentes a Wordpress

Paso 3: referéncialas desde el CSS

Después de subir tipografía a Wordpress, tenemos que referenciarlas desde el CSS para poder usarlas.

añadir tipografia a wordpress

Éste sería el código

/*Fuentes*/
@font-face {
    font-family: 'BasisGrotesqueProBold';
    src: url('https://sergiocanales.com/wp-content/uploads/fonts/BasisGrotesquePro-Regular.woff2') format('woff2'),
        url('https://sergiocanales.com/wp-content/uploads/fonts/BasisGrotesquePro-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BasisGrotesquePro';
    src: url('https://sergiocanales.com/wp-content/uploads/fonts/BasisGrotesquePro-Bold.woff2') format('woff2'),
        url('https://sergiocanales.com/wp-content/uploads/fonts/BasisGrotesquePro-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BasisGrotesqueProLight';
    src: url('https://sergiocanales.com/wp-content/uploads/fonts/BasisGrotesquePro-light.woff2') format('woff2'),
        url('https://sergiocanales.com/wp-content/uploads/fonts/BasisGrotesquePro-light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

Tras ello, solo tenemos que indicar por CSS las fuentes a usar y listo.

body{
	font-family:'Basis Grotesque Regular';
	color: #18233D;
		font-size: 17px;
	
}
/*Negrita*/
strong, b {
	font-family: 'Basis Grotesque Bold';
	/*background: #fbe77f73*/
}

Y listo, con esto ya hemos conseguido cambiarla fuente en Wordpress a una personalizada.

Sergio Canales SEO

Si has llegado hasta aquí… ¡Apúntate a mi Newsletter y sigue aprendiendo cada semana sobre SEO!

Sergio Canales

Ingeniero industrial y amante del SEO para nichos. Me encanta crear proyectos, posicionalos y monetizarlos

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir