Una excelente manera de agregar algo de marca e individualismo a su sitio de WordPress es cambiar las fuentes en su tema.
La tipografía y otros elementos de bandas crean una buena primera impresión, crean el ambiente para los visitantes de su sitio y establecer la identidad de su marca. Estudios también han descubierto que las fuentes afectan la capacidad de los lectores para aprender, recordar información y memorizar textos.
Si solo instaló un tema de WordPress o tiene algo de experiencia en CSS y codificación, le mostraremos varias opciones que puede usar para cambiar las fuentes en WordPress.
Cómo cambiar las fuentes en WordPress
Hay tres opciones principales disponibles para cambiar las fuentes en WordPress:
1. Cómo cambiar fuentes en WordPress usando fuentes web
Usar fuentes web es una forma más fácil y rápida de cambiar fuentes en WordPress que descargar y cargar archivos de fuentes.
Con esto opción, puede acceder a una variedad de fuentes sin actualizarlos cada vez que haya un cambio, y no acapara espacio en el servidor de su alojamiento. Las fuentes se ofrecen directamente desde los servidores del proveedor mediante un complemento o agregando código a su sitio.
In_content_1 all: [300x250] / dfp: [640x360]->
Asegúrese de que las fuentes web que elija para su sitio coincidan con la identidad de su marca, sean fáciles de leer para el texto del cuerpo, sean familiares para los visitantes del sitio web y transmitan el tipo de estado de ánimo e imagen que usted que desee.
Puede agregar fuentes web usando un complemento de WordPress o manualmente agregando algunas líneas de código a su sitio. Exploremos ambas opciones.
Cómo agregar fuentes web usando un complemento de WordPress
Dependiendo de la fuente web que haya elegido, puede usar una fuente de WordPress plugin para acceder a la biblioteca de fuentes y elegir la que desee en su sitio. Para esta guía, elegimos Google Fonts y usamos el complemento Tipografía Fuentes de Google.
Si hay fuentes en su sitio que no se muestran o no funcionan correctamente, use la sección Depuraciónpara solucionar problemas.
Nota: si si olvida seleccionar publicar en el Personalizador, perderá todos los cambios que ha realizado.
Cómo agregar fuentes web mediante código
Usted puede instalar y utilizar fuentes web si tiene acceso al código de su tema. Esta es una alternativa manual a agregar un complemento adicional, pero no es complicado si sigue los pasos con cuidado.
Sin embargo, hay diferentes pasos que debe seguir si está usando un tema del directorio de temas de WordPress o un tema personalizado.
Si compró un tema del directorio de temas de WordPress, crear un tema hijo y luego dele el archivo style.css y functions.php. Es más fácil si tiene un tema personalizado, ya que puede editar la hoja de estilo y el archivo de funciones de su tema.
Nota: Elegimos Work Sans para esta guía, por lo que la fuente el nombre puede ser diferente al tuyo dependiendo de lo que hayas elegido.
Esto le permite poner en cola el estilo de los servidores de Google Fonts para evitar conflictos con complementos de terceros. También permite modificaciones más sencillas del tema hijo.
función wosib_add_google_fonts () {
wp_register_style ('googleFonts', ' https://fonts.googleapis.com/css?family=Work Sans ');
wp_enqueue_style (' googleFonts ');
}
add_action ('wp_enqueue_scripts', 'mybh_add_google_fonts');
función mybh_add_google_fonts () {
wp_register_style ('googleFonts', 'https://fonts.googleapis.com/css?family=Cambria|Work Sans');
wp_enqueue_style ('googleFonts') ;
}×
add_action ('wp_enqueue_scripts', 'mybh_add_google_font s ');
En este caso, hemos puesto en cola las fuentes Cambria y Work Sans.
El siguiente paso es agregar las fuentes a la hoja de estilo de su tema para haga que la fuente funcione en su sitio.
cuerpo {
font-family: 'Work Sans', sans-serif;
}×
h1, h2, h3 {
familia de fuentes: 'Cambria', serif ;
}×
En este caso, la fuente principal será Work Sans mientras que los elementos de encabezado como h1, h2 y h3 usarán Cambria.
Una vez hecho esto, guarde la hoja de estilo y verifique si sus fuentes funcionan como deberían. De lo contrario, compruebe que las fuentes no se anulan en la hoja de estilo o borre la memoria caché del navegador y vuelva a intentarlo.
body {
font-family: 'Work Sans ', Arial, sans-serif;
}×
h1, h2, h3 {
fuente -family: 'Cambria', Times New Roman, serif;
}×
Si todo está bien, los visitantes de su sitio verán sus fuentes web predeterminadas, en nuestro caso Work Sans y Cambria. Si hay problemas, verán las fuentes de respaldo, por ejemplo, Arial o Times New Roman en nuestro caso.
2. Cómo cambiar fuentes en WordPress alojando fuentes
Alojar fuentes en sus propios servidores le ayuda a optimizar el rendimiento de sus fuentes web, pero también es una forma más segura hacerlo en lugar de extraer recursos de sitios de terceros.
Las fuentes de Google y otras fuentes web le permiten descargar fuentes para usarlas como fuentes alojadas localmente, pero aún puede descargar otras fuentes a su computadora siempre que las licencias lo permitan para hacerlo.
@ font-face {
font-family: 'Work Sans';
src: url (“fonts / Work Sans-Medium.ttf”) formato ('woff'); / * medium * /
font-weight: normal;
font-style: normal;
}
@ font-face {
font-family: 'Work Sans';
src: url ( Formato "fuentes / Work Sans-Bold.ttf") ('woff'); / * medium * /
font-weight: bold;
font-style: normal;
}
@ font-face {
font-family: 'Cambria';
src: url (“ fonts / Cambria.ttf ”) formato ('woff'); / * medium * /
font-weight: normal;
font-style: normal;
}
Nota: usar @fontface le permite usar negrita, cursiva y otras variaciones de su fuente, después de lo cual puede especificar el peso o el estilo de cada fuente.
body {
font-family: 'Work Sans ', Arial, sans-serif;
src: url (“/ fonts / Work Sans-Medium.ttf”);
}
h1, h2, h3 {
familia de fuentes: 'Cambria', Times New Roman, serif;
}
Personalice su tipografía de WordPress
Cambiar las fuentes en WordPress es una gran idea para mejorar la marca y la experiencia del usuario. No es una tarea sencilla, pero tendrás más control sobre tu tema.
¿Pudiste personalizar las fuentes de tu sitio siguiendo los pasos que siguen los consejos de esta guía? Cuéntanos en los comentarios.