Guía para añadir fuentes personalizadas a WordPress (Temas en bloque y temas clásicos en general)

fuenteLa tipografía es crucial en el diseño web. Una tipografía uniforme y distintiva no sólo mejora la legibilidad, sino que también ayuda a reforzar la identidad de la marca. Las fuentes personalizadas son una forma estupenda de crear un aspecto profesional, ya que son más atractivas visualmente que las fuentes predeterminadas del sistema.

Este artículo presenta tres formas comunes de importar fuentes de WordPress, adecuadas para diferentes tipos de temas y hábitos operativos.

Preparación del archivo de fuentes

Los formatos de fuentes web más utilizados son .woffy.woff2y.otfy.ttf responder cantando .eot. Entre ellas .woff2 Alta compresión y compatibilidad con la mayoría de los navegadores modernos.

Si el formato de la fuente no cumple los requisitos de uso, se puede convertir en herramientas en línea como Transfonter.org. Se recomienda descargar también .woff responder cantando .woff2 dos formatos para mejorar la compatibilidad.

Método 1: Cargar fuentes utilizando el editor del sitio (para WordPress 6.5+)

WordPress 6.5 añade la función de carga de fuentes, es necesario habilitar el tema de bloque.

La ruta de funcionamiento es la siguiente:

• Vaya a "Apariencia > Editor".

• Abra la opción "Estilo" en la esquina superior derecha y haga clic en "Tipografía".

• Seleccione "Gestionar fuentes" y haga clic en "Cargar fuentes".

• Selección de un archivo de fuentes local (compatible) .woffy.ttf (etc.)

• Una vez cargada, puede seleccionar la fuente correspondiente en los ajustes de diseño del sitio.

Este método no utilizaplug-in (componente de software)o intervención de código. Para utilizar Google Fonts, haga clic en "Instalación de fuentes", busca las fuentes de Google Fonts y añádelas con un solo clic.

Método 2: Utilizar un plugin para importar fuentes (aplicable a todos los temas)

Si el sitio no utiliza el tema de bloques o si desea hacerlo más intuitivo, puede hacerlo a través de la opciónplug-in (componente de software)Activa la importación de fuentes.

Plugin recomendado:

• Utilice cualquier fuenteSoporte para cargar fuentes locales
• Google Fonts fáciles: adecuado para acceder rápidamente a Google Fonts

hacer uso de Utilice cualquier fuente Los pasos del plug-in son los siguientes:

• Instale y active el plugin

• Vaya a la página de configuración del plugin para aplicar y verificar la clave API

• Cargue el archivo de fuentes y asígnele un nombre

• Una vez cargada la fuente con éxito, aparecerá en el menú de diseño del sitio

El enfoque de plugin es adecuado para la mayoría de los sitios y es fácil de configurar, con o sin una base de código.

Método 3: Importar fuentes manualmente utilizando un tema hijo (para usuarios con experiencia en código)

La importación de fuentes puede realizarse a través de temas hijo si se necesita un mayor grado de libertad o un enfoque independiente de plugins.

Los pasos son los siguientes:

• existe /wp-content/temas/ Cree una carpeta de subtemas en

• aumentar style.css responder cantando funciones.php que define la información del tema e introduce los estilos del tema principal

• establecer fuentes y cargue el archivo de fuentes

• existe style.css Añade el siguiente CSS para cargar tus fuentes personalizadas cargadas localmente. :

@font-face {
  font-family: 'CustomFont'.
  src: url('fonts/CustomFont.woff2') format('woff2'),
       
  font-weight: normal;
  font-style: normal; }
}
body {
  font-family: 'CustomFont', sans-serif; } body {
}

• Vuelva al backend de WordPress y active el tema hijo.

Este método es adecuado para usuarios con cierto nivel de conocimientos técnicos y permite un control y una personalización más flexibles.

resúmenes

Las fuentes personalizadas ayudan a crear un estilo uniforme en la tipografía de un sitio web. Tanto si se utiliza un editor de sitios, un plug-in o se hace manualmente, la tarea de sustituir las fuentes puede llevarse a cabo. Elegir el método adecuado para hacerlo, teniendo en cuenta el tema del sitio y sus propias necesidades, puede ayudar a mejorar el efecto visual general y la expresión de la información.