Cómo cambiar la fuente en WordPress — Guía completa

Las fuentes son una necesidad del diseño web. No solo en WordPress.

Incluso un sitio HTML simple necesitará tener la fuente configurada. Afortunadamente, WordPress es un sistema de gestión de contenido de pila completa con un montón de codificación integrada que facilita los cambios de codificación.

A continuación encontrará un tutorial intensivo que cubre todo lo que necesita saber sobre fuentes, WordPress, cómo personalizarlas, codificarlas en su hoja de estilo y optimizar sus fuentes para velocidad y cumplimiento de las normas de privacidad de datos en todo el mundo.
 



Cómo cambiar la fuente en WordPress

Las fuentes se pueden importar desde fonts.google.com o puede agregar un complemento para usar cualquier fuente de Google. Alternativamente, puede hospedar cualquier archivo de fuente (WOFF, WOFF2, SVG, OTF o TTF) descargando los archivos de una fundición de fuentes, cargándolos a través de cPanel o FTP y luego editando el CSS para cargar la fuente.
 

Cómo cambiar la fuente usando el personalizador de WordPress

En WordPress.com, los usuarios con planes gratuitos pueden cambiar la fuente ya sea personalizando la configuración del tema o usando la configuración de Filtro global en el editor de bloques. Cómo se hace depende del tema que esté utilizando.

La personalización de CSS está reservada para planes pagos o aquellos en sitios de WordPress autohospedados.

Algunos temas están desarrollados para usar los filtros globales de WordPress. Otros tienen fuentes personalizadas preempaquetadas en el tema.

Para averiguar qué método funciona para su tema, vaya a las opciones de personalización de su tema.

Haga clic en Apariencia > Personalizar > Fuentes.

Si al hacer clic en las opciones de personalización de fuentes aparece un mensaje que dice

“Puede cambiar sus fuentes usando Estilos globales, que se pueden encontrar en el Editor de bloques”,

Significa que necesita crear una publicación o página, luego cambiar las fuentes desde la Configuración global del editor de bloques.

Los temas que tienen una carpeta de fuentes incluida en la instalación tendrán una opción para cambiar la fuente.

Los que no, no tendrán fuentes ni opciones tipográficas para cambiar. Todavía se puede hacer. Simplemente no con unos pocos clics.

El tema Twenty Twenty-One es un ejemplo de un tema de WordPress sin fuentes adicionales incluidas. Esto está diseñado para ser compatible con el Editor de bloques, que es donde se cambian las fuentes en los temas más nuevos.

Si su personalizador de temas no muestra una sección de fuentes y tamaños o configuraciones tipográficas, pruebe el estilo global en el editor de bloques, pero su tema debe admitir esto.

Los temas más antiguos o aquellos que ejecutan WordPress con el Editor clásico instalado deben usar una solución, no todas las cuales son sencillas.
 

Cómo cambiar las fuentes con el filtro de estilo global

El filtro de estilo global es parte del editor de bloques. Para cambiar la fuente en todo el sitio, cree una nueva publicación o página.

En la parte superior derecha del editor de WordPress, hay un ícono negro con dos letras A, una en mayúscula y la otra en minúscula, una al lado de la otra.

Haga clic en eso y el panel de navegación derecho muestra una variedad de fuentes que puede aplicar.

Cambiar las fuentes aquí aplica los cambios a todos los bloques que contienen texto.
 

Cómo cambiar la fuente en el Editor clásico

El Global Styler solo está disponible cuando usa el Editor de bloques.

Si tiene instalado el complemento Editor clásico, puede instalar un complemento adicional o continuar leyendo a continuación para aprender cómo cambiar la fuente manualmente en WordPress.

Comience con su personalizador de temas. La mayoría de los temas de WP tienen una carpeta de fuentes.

Para mayor velocidad, instalar un complemento de fuente tipográfica es la solución más rápida para personalizar la fuente y los encabezados.
 

Complementos gratuitos de WordPress para cambiar la tipografía de fuente

Usar un complemento es el método más simple y rápido para cambiar las fuentes en WordPress. La mayoría de los complementos de creación de páginas ya tienen fuentes personalizadas. Estos se conectan a Google Fonts, ya que es el único proveedor de fuentes que es completamente gratuito, incluso en sitios comerciales.

Si tiene una suscripción a Adobe Creative Cloud, puede instalar el complemento Adobe Fonts en su lugar, o seguir las instrucciones más abajo sobre cómo agregar fuentes personalizadas a WordPress sin usar un complemento.

A continuación se muestran los 3 complementos de tipografía de WordPress más populares
 

Complemento de herramientas de edición avanzada

Vaya al menú Complementos en la barra lateral izquierda de su panel de WordPress, haga clic en complementos> Agregar nuevo.

Escribe ' Herramientas de edición avanzadas ” en la barra de búsqueda.

Una vez instalado y activado, se agregan herramientas adicionales a la barra de herramientas del editor de WP. Seleccione el menú desplegable a la izquierda de la barra de herramientas para seleccionar una fuente diferente.


 

Complemento de tipografía WP

Este complemento lo ayuda a hacer un mayor uso de los conjuntos de fuentes que usa. Realiza cambios en su HTML y ayuda a mantener su estilo consistente y correcto.

No agrega fuentes. Sin embargo, puede tener alguna funcionalidad que lo ayude a diseñar su contenido a su gusto.

Es más probable que sea útil en sitios de comida que publican recetas o sitios de bricolaje que cubren cálculos matemáticos.

Para instalarlo, vaya a complementos> Agregar nuevo y busque Tipografía WP .

Haga clic en instalar y activar.

Una vez instalado y activado, hay varios cambios en su tipografía que se pueden automatizar en la página de configuración. Cada configuración tiene una explicación de lo que sucederá cuando la habilite.

Como ejemplo, en un sitio que discute cálculos matemáticos, se ha convertido en sinónimo de usar la barra inclinada para reemplazar el símbolo de división.

Este complemento invierte eso si la fuente que configura tiene un carácter de división.

En los sitios de recetas, por ejemplo, 1 1/2 se ve mejor como 1 1 / 2. 

En HTML, necesitaría aplicar eso usando superíndice y subíndice en HTML (o los botones en su barra de herramientas).

<sup>1</sup>/<sub>2.&nbsp;</sub>

Y facilita el formato de marcas/símbolos de registro, como TM en superíndice, y la inserción del símbolo de copyright usando (c) en lugar del método de código corto de ALT + 0169 para obtener ©.

Para un símbolo Registrado usa (r). Sin este complemento, el código es ALT + 0174 para obtener ®.

Para formatear su contenido, le brinda la capacidad de evitar viudas.

Esto es cuando solo aparece una palabra en una línea separada.

Cuando una sola palabra cae en una línea propia, puede configurar el complemento para extraer las últimas palabras de la línea anterior, evitando que las líneas se muestren con una sola palabra. Puede hacer lo mismo con URL largas utilizando la función de ajuste.
 

Fuentes fáciles de Google

Easy Google Fonts es el complemento de tipografía más utilizado en WordPress.

Para instalarlo, vaya a Complementos > Agregar nuevo e instale el Fuentes fáciles de Google enchufar.

Una vez instalado, debe obtener una clave API de Google. Para esto, necesita una cuenta de Google.

Vaya a https://developers.google.com/fonts/docs/developer_api. 

Seleccione 'Crear un nuevo proyecto' (desplácese hacia abajo en la página para encontrar el botón 'Obtener la clave') y luego escriba un nombre.

El nombre que use aquí se mostrará en su Google Cloud Console, donde puede administrar todas sus claves API para su cuenta de Google.

Haga clic en 'Siguiente', luego copie su clave API en su portapapeles.

De vuelta en su tablero de WordPress, en el menú del lado izquierdo, vaya a Configuración> Easy Google Fonts, seleccione 'Configuración' en el menú de navegación superior para el complemento, pegue su clave API, luego haga clic en el botón Guardar.

Una vez instalado, se agrega una nueva sección de 'Tipografía' a su Personalizador de WP. Cargue el Personalizador y podrá usar cualquier fuente que esté disponible en fonts.google.com.

La fuente del cuerpo se usa para el contenido principal de su sitio, que son los párrafos, el texto de la barra lateral y el texto en los elementos del menú de navegación.

La fuente del encabezado es para las etiquetas de encabezado H1 a H6 y cada una puede ser una fuente diferente.
 

La compensación por la simplicidad con Easy Google Fonts es la velocidad

Para que cada visitante único cargue su página web, el servidor de su sitio web debe conectarse al servidor web de Google para extraer la fuente que configuró para aplicar a su sitio.

Eso puede ralentizar ligeramente la velocidad de su sitio web.

El proceso para cargar su sitio cuando se conecta a través de Google Fonts API es que primero lee el HTML de su página web, luego se conecta a fonts.googleapis.com/css para obtener la hoja de estilo, luego se conecta a fonts.gstatic.com para obtener la fuente para cargar en su sitio.

Eso es por fuente. Así que mucho.

Un proceso de 3 pasos que puede agregar casi un segundo al tiempo de carga de su página. Puede que no parezca mucho, pero sumado a cualquier otro recurso que bloquee el renderizado, se acumula. Un visitante puede hacer clic fuera de su página en menos de un segundo.

El complemento facilita el uso de Google Fonts, sin embargo, debe optimizarse para el rendimiento.

Puede hacerlo con el complemento OMGF para WordPress, que es algo que probablemente necesitará de todos modos.

Esto se debe a que sin emparejar estos dos complementos, Easy Google Fonts utilizado por sí solo incumple las normas de privacidad de datos.
 

¿Por qué eso importa?

Varios países tienen regulaciones de privacidad de datos con respecto al uso de cookies ubicadas en los dispositivos de los usuarios.

Europa tiene la legislación de protección de datos más estricta del mundo. RGPD – Reglamento General de Protección de Datos. Esto se aplica a todos los sitios a los que se puede acceder en cualquier país dentro de la Unión Europea (UE).

Esto requiere que se muestren avisos explícitos de consentimiento de cookies y que se publique una política de cookies en el sitio que informe a los usuarios sobre los datos que recopila su sitio web mediante el uso de cookies.

Esto incluye cookies de terceros, que fonts.googleapis.com o fonts.gstatic.com utilizan para almacenar registros CSS de visitantes y registros de direcciones IP.

La Ley de Privacidad del Consumidor de California (CCPA) tiene un alcance similar al RGPD, solo que no está regulada de la misma manera. En Europa, existen sanciones por incumplimiento para las empresas europeas.

El propósito de la CCPA es aumentar la transparencia para los residentes de California sobre cómo se utiliza su información.

Técnicamente, la CCPA solo requiere que se notifique a los usuarios que un sitio web utiliza cookies y por qué. Una opción de consentimiento de exclusión voluntaria no es obligatoria.

En Europa, los usuarios deben tener la opción de optar por que las cookies no se almacenen en sus dispositivos.

Brasil implementó LGPD, (Lei Geral de Proteçao de Dados) en septiembre de 2020, que es muy similar a GDPR menos las duras multas por incumplimiento. Las infracciones graves darán lugar a fuertes sanciones.
 

La parte importante de las cookies de configuración de Google Fonts

Una dirección IP se reconoce como 'Información de identificación personal' (PII), por lo tanto, la cookie que Google coloca en el dispositivo de un usuario a través de su sitio, hace que su sitio web esté sujeto a GDPR, CCPA y LGPD. Si no utiliza un complemento de 'consentimiento de cookies', debe hospedar Google Fonts para el cumplimiento.
 

Cómo hacer que Google Fonts cumpla fácilmente con todas las normas de privacidad de datos

El método más simple para autohospedar Google Fonts en su propio servidor es usar el complemento OMGF para WordPress. Elimina la necesidad de la API de fuentes de Google.

Hay dos métodos para hacer esto. De forma manual o automática. Pero el modo automático requiere que compre una licencia Pro. Los precios varían según la cantidad de sitios en los que lo use.

El método manual solo significa que necesita usar el complemento para conectarse a la API de Google Fonts, descargar copias (una versión de caché) de las fuentes que desea usar, en los tipos de archivo que necesita, luego crear una hoja de estilo para cargar las fuentes desde su servidor en lugar de Googles.

El complemento OMGF copia los archivos de fuentes de fonts.google.com y los coloca en su servidor. No conecta a sus usuarios con los servidores de Google mediante la API. Esa es la parte del acceso directo para copiar los archivos a su instalación de WordPress.

Sin él, tendría que hacer todo manualmente. Esto es como el método gratuito de automatización manual del alojamiento propio para Google Fonts.

Esto es lo fácil que es hacerlo.
 

Instale el complemento OMGF

Desde su tablero de WordPress, vaya a Complementos> Agregar nuevo.

Busque por palabra clave OMGF, una abreviatura de “ Optimizar mis fuentes de Google “.

Haga clic en el botón 'Instalar ahora', luego haga clic en 'Activar'.

Una vez hecho esto, se agrega un nuevo elemento de menú a su menú 'Configuración' con la etiqueta 'Optimizar las fuentes de Google'.

Haga clic en eso y se cargará la página Configuración general.

Puede parecer intimidante, sin embargo, la configuración predeterminada suele ser suficiente. Todo lo que necesita hacer es verificar los ajustes de configuración, luego hacer clic en 'Guardar y optimizar'.

Para el método manual, no hay mucho que puedas hacer.

La versión Pro tiene muchas más funciones de optimización. Al usar la versión gratuita, se crea una carpeta de caché de fuentes en su servidor. Ahí es donde se almacenarán sus archivos. (/subidas/omgf).

Si desea una carpeta diferente, haga clic en 'Configuración avanzada' y luego configure su 'Directorio de caché de fuentes' personalizado en cualquier carpeta que ya esté en su servidor. Si su tema no tiene una carpeta de fuentes, se creará una.

Haga clic en la pestaña 'Configuración de detección' para verificar que la opción predeterminada esté configurada para 'Reemplazar' para 'Procesamiento de fuentes de Google'. Si está configurado para 'eliminar', su sitio volverá a las fuentes del sistema.

A medida que se desplaza hacia abajo en la información de 'Configuración de detección', se encontrará con una sección de tipo de archivo. Como usuario gratuito, no puede agregar diferentes tipos de archivos. Aunque no te estás perdiendo de mucho.

Los tipos de archivo WOFF y WOFF2 son las opciones predeterminadas. Los archivos EOT, TTF y SVG son características premium. Continúe leyendo para obtener más información sobre los tipos de archivos de fuentes y los tipos que necesita.

Una vez que esté satisfecho con la configuración, regrese a la primera pestaña titulada 'Optimizar fuentes', desplácese hacia abajo hasta la sección 'Administrar fuentes optimizadas', verifique que la URL apunte a una página en la que tiene publicada la fuente o las fuentes que desea. para crear copias en su servidor, luego haga clic en 'Guardar y optimizar'.

Cuando haga clic en 'Guardar y optimizar', el complemento escaneará la URL que configuró, obtendrá los archivos de fuente necesarios de los servidores de Google y agregará una versión de caché de cada fuente a su tema de WordPress.

Estas fuentes de caché se cargarán desde su servidor en lugar de Googles. Cualquier fuente activa en su sitio se completará previamente en la misma sección con opciones sobre cómo administrar sus fuentes.

En la captura de pantalla anterior, solo se copiaron dos fuentes. “Lato” y “Monsterrat”. Las fuentes activas en el tema. Todas las otras miles de fuentes de Google se ignoran, por lo que no está importando toda la biblioteca, ya que eso probablemente aplastaría el ancho de banda de su servidor.

Las fuentes que se importan en este ejemplo son del tema. A pesar de ser un tema Premium, utiliza la API de desarrollador de fuentes de Google. Esto es lo mismo con muchos temas con fuentes personalizadas.

Entonces, incluso sin el complemento Easy Google Fonts, los temas pueden no cumplir con la privacidad de datos. Cuando los temas usan Google Fonts, aún debe usar OMGF para el cumplimiento y también la velocidad.

La razón por la que existe un problema de velocidad con los temas que usan la API es que si usa un tema popular, los servidores de Google pueden no cumplir con las solicitudes, o al menos no tan rápido como podría ser.
 

Lo que debes saber sobre FOUT

FOUT significa 'Flash de texto sin estilo'. Esto sucede cuando la fuente tarda un poco en cargarse. En lugar de mostrar una pantalla blanca mientras se carga la página, los navegadores cargan la fuente predeterminada.

La parte 'Flash' es el breve momento en que se carga la fuente predeterminada del navegador, luego el sitio web cambia a la fuente personalizada una vez que se ha cargado. A pesar de ser segundos, si usas una fuente decorativa, el FOUT se notará más.

Para evitar que ocurra FOUT, configure varias fuentes en su CSS.
 

Cómo configurar fuentes de respaldo con CSS

El personalizador de CSS de WordPress es donde configurar las pilas de fuentes. Puede usar tantos como desee, pero generalmente, de cuatro a diez nombres de fuentes es suficiente para asegurarse de tener fuentes genéricas de reserva.

Tenga en cuenta que cualquier fuente que incluya en su CSS debe estar en la carpeta de fuentes de su tema.

De lo contrario, la URL de la fuente debe incluirse en la hoja de estilo del tema usando la función @importar para extraer la fuente desde cualquier lugar en la web.

Independientemente de las fuentes que tenga disponibles, puede configurar una pila de fuentes en su personalizador de CSS.

Un ejemplo de una pila de fuentes:

.body {
font-family: Impact, Haettenschweiler, “Franklin Gothic Bold”, Charcoal, “Helvetica Inserat”, “Bitstream Vera Sans Bold”, “Arial Black”, sans-serif;
}

 

Una explicación de cómo se codifican las pilas de fuentes en CSS

Font-family es qué usar para establecer el nombre de la fuente. Para cada tema, la clase a la que aplique la fuente será diferente. Las clases de CSS comunes en los temas de WP son para el contenido principal, o o

En su Personalizador de CSS, configuraría la clase primero con un punto al frente, seguido de un corchete, seguido de la familia de fuentes, luego dos puntos, luego los nombres de las fuentes, terminando con un punto y coma y luego cerrando el CSS.

Las fuentes con un solo nombre no necesitan comillas. Las fuentes con más de una palabra deben colocarse entre comillas dobles para que los navegadores sepan que los nombres van juntos.

Como ejemplo, colocar Times New Roman sin las comillas cargaría la fuente Times porque carga la primera palabra. Coloque comillas alrededor de 'Times New Roman', luego el navegador cargará la correcta.

Cada fuente está separada por una coma.

En la pila de ejemplo utilizada anteriormente, se establecen 8 fuentes. El navegador primero intentaría cargar la fuente 'Impact'. Si eso fallaba, volvería a la segunda fuente (Haettenschweiler) y continuaría hasta la última.

Si la última fuente en su pila no se carga, entonces vuelve a la fuente predeterminada del navegador. Como última medida segura para la web para evitar que se carguen las fuentes predeterminadas del navegador, la última fuente de una pila siempre debe ser una fuente segura para la web, que es el nombre genérico.
 

Las 5 familias de fuentes genéricas más comunes son

  • serif,
  • sans serif,
  • cursivo,
  • fantasía,
  • y monoespacio.

Al terminar su pila de fuentes con una de las familias de fuentes genéricas anteriores, evita cambios drásticos en el diseño de su sitio web, como cambiar de una fuente en una familia cursiva a una fuente serif.

Establecer fuentes alternativas en el personalizador de WordPress o en su hoja de estilo es una medida preventiva para evitar que los navegadores anulen su tema con sus propias fuentes predeterminadas. El valor predeterminado para la mayoría de los navegadores es Helvetica o Arial.
 
 

Acerca de los tipos de archivos de fuentes

Existen diferentes tipos de archivos para las fuentes, pero en realidad, solo necesita uno. WOFF2. Formato de fuente abierta web. Se estima que es compatible el 98% del tiempo. El otro 2 % de las veces que no se admite, se utilizará la fuente alternativa.

Si desea que su diseño web sea completamente estable en cualquier navegador web, use múltiples formatos.

Los archivos WOFF y WOFF2 son compatibles con la mayoría de los navegadores web. SVG (Gráficos vectoriales escalables), .OTF (Fuentes OpenType), .TTF (Fuentes TrueType) y .EOF (Fuentes OpenType incrustadas) también se pueden usar en WordPress.
 

Dónde descargar fuentes

Las plataformas más utilizadas para descargar tipografías son:

  • Fuentes de Google
  • fuentes de adobe
  • Ardilla de fuente

Google Fonts se usa más ampliamente, principalmente porque todas las licencias son gratuitas. Adobe requiere un plan de suscripción, y Font Squirrel tiene fuentes gratuitas y premium, pero con diferentes acuerdos de licencia de usuario final (EULA).

Además, puede buscar en línea listas de fundiciones de fuentes. Font Squirrel no es una fundición, sino un directorio con enlaces salientes a otras fundiciones donde puede descargar las fuentes o comprar la licencia necesaria para descargarlas.
 

Cómo autoalojar fuentes localmente en WordPress

Una vez que tenga las fuentes que desea usar en los tipos de archivos que necesita, el siguiente paso es cargarlos en WordPress.

Haga esto usando FTP o a través de cPanel en su proveedor de alojamiento. (yoursite.com:2083 < ruta rápida al servidor web de su sitio).

Vaya al tema al que desea agregar fuentes personalizadas.

Haga clic en Administrador de archivos> Contenido de WP> Temas> Seleccione el tema para agregar fuentes

Haga clic en la etiqueta '+ carpeta' en la barra de navegación superior. Nombra la carpeta 'Fuentes'.

Descomprima todas sus fuentes de la carpeta que descargó, luego cárguelas en la nueva carpeta 'Fuentes'.

Luego regrese a su tablero de WordPress, vaya al 'Editor de temas' e inserte el siguiente código

@font-face {
font-family: Caveat Bold;
src: url(https://yoursite.com/wp-content/themes/twentynineteen/fonts/Caveat-Bold.ttf);
font-weight: normal;

Reemplace el nombre de la familia de fuentes con el nombre de la fuente que cargó en la carpeta de fuentes y reemplace la URL utilizada para encontrar el archivo en su sitio.

Una vez hecho esto, puede cambiar la fuente en su personalizador de CSS agregando

.page-title {
font-family: “Caveat Bold”;
}

La clase “título de página” puede ser diferente. Para encontrar la clase CSS, use el inspector de su navegador haciendo clic derecho en la parte de su página que desea cambiar y luego haga clic en 'inspeccionar'. Se mostrará la clase CSS para cada elemento.

Repita el proceso de carga para tantas fuentes como desee, luego use los códigos de apilamiento de fuentes CSS explicados anteriormente para configurar las pilas de fuentes.

Una vez que las fuentes están en su servidor, puede usar el personalizador de CSS para aplicar una fuente personalizada a cualquier elemento, como títulos de página, párrafos, citas en bloque, encabezados o simplemente el título de su sitio.

Tenga en cuenta que cuantas más fuentes cargue en su servidor, más recursos utilizará y eso puede ralentizar su sitio.

Especialmente si usa archivos SVG, como fuentes de diseño gráfico elegantes. Una fuente SVG está bien para cambiar el título de su sitio, pero si la repite en todas las etiquetas de encabezado, probablemente ralentizará su sitio.

 

Fuentes y usuarios de temas premium de WordPress

Por último, pero no menos importante, si está utilizando un tema premium de WordPress, es probable que ya esté cubierto. Las plantillas premium de WordPress compradas en sitios web como ThemeForest (mi favorito personal), casi siempre vienen con fuentes preinstaladas.

Cambiar fuentes en estos temas suele ser muy simple y no requiere ninguna instalación adicional de su parte. Simplemente ingrese a la configuración del tema en su tablero de WordPress y ajuste la fuente allí mismo (las fuentes generalmente se pueden encontrar en 'Tipografía'.