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.

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.

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.

Paso 3: referéncialas desde el CSS

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

É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.

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

Quiero apuntarme a la newsletter