¿Quieres añadir fuentes personalizadas a WordPress? Las fuentes personalizadas te permiten utilizar una bonita combinación de fuentes diferentes en tu sitio web para mejorar la tipografía y la experiencia del usuario. Además de ser estéticamente agradables, las fuentes personalizadas pueden ayudarte a mejorar la legibilidad, crear identidad de marca y aumentar la cantidad de tiempo que los usuarios pasan en tu sitio de WordPress.
En este artículo, se le mostrará cómo utilizar la función Fuentes GoogleyTypeKit responder cantando CSS3 @Font-Face para añadir fuentes personalizadas en WordPress.
Añadir fuentes personalizadas en WordPress
Atención:Cargar demasiadas fuentes puede ralentizar su sitio web. Le recomendamos que elija dos fuentes y las utilice en su sitio. También le mostraremos cómo cargarlas correctamente sin ralentizar su sitio.
Antes de entrar en cómo añadir fuentes personalizadas en WordPress, veamos cómo encontrar fuentes personalizadas que pueda utilizar.
Cómo encontrar fuentes personalizadas para utilizarlas en WordPress
Hoy en día hay muchos sitios donde encontrar fuentes web gratuitas, como Google Fonts, Typekit, FontSquirrel y fonts.com.
Añadir fuentes personalizadas a WordPress desde Google Fonts
Google Fonts es la biblioteca de fuentes más grande, gratuita y utilizada entre los desarrolladores web. Hay muchas maneras de añadir y utilizar Google Fonts en WordPress.
Método 1: Añadir Google Fonts con un plugin de WordPress
Si desea añadir y utilizar Google Fonts en su sitio web, entonces este método es la forma más fácil y recomendada para principiantes.
- Instalación de plug-ins::
- Instalación y activación Google Fonts Tipografía Complementos.
- Configuración de plug-ins::
- Una vez activado, introduce tu dirección de correo electrónico para recibir la Guía de inicio rápido oficial. A continuación, haz clic en Plugins de fuentes → Fuentes personalizadas en la barra lateral de administración. Esto le llevará automáticamente al personalizador de temas de WordPress y abrirá la nueva "Plug-ins de fuentes"Parte.
- Seleccionar fuente::
- En la sección Configuración básica, seleccione las fuentes predeterminadas para el sitio y, en Configuración avanzada, seleccione fuentes para partes específicas del sitio.
- Utilice el menú desplegable "Familia de fuentes" para seleccionar una nueva fuente. La vista previa cambiará automáticamente para mostrar el efecto de la fuente.
- Cambios en la contabilización::
- Cuando esté satisfecho con sus opciones de fuentes personalizadas, haga clic en "Correo electrónico:"para guardar los cambios.
Método 2: Añadir Google Fonts manualmente en WordPress
Este método requiere añadir código al archivo del tema de WordPress.
- Seleccionar fuente::
- Visita la biblioteca de Google Fonts y selecciona la fuente que quieras utilizar. Haz clic en el botón "Uso rápido" situado debajo de la fuente, selecciona el estilo que quieras utilizar y copia el código de incrustación.
- Añadir código::
- Editar el tema del
header.phpy pegue el código en el archivo<body>Antes de etiquetar, o de utilizar el plugin WPCode, pegue el código incrustado en la casilla "Encabezado" y haga clic en "Guardar cambios".
- Editar el tema del
- Uso de fuentes::
- Utilice esta fuente en la hoja de estilos del tema, por ejemplo:
.site-title { font-family: 'Open Sans', Arial, sans-serif; }Añadir fuentes personalizadas a WordPress con Typekit
Typekit de Adobe Fonts es otro recurso gratuito de alta calidad que ofrece magníficas fuentes para utilizar en tus proyectos de diseño.
- registrar una cuenta::
- Regístrese en una cuenta de Adobe Fonts y acceda a la sección Examinar fuentes. Selecciona la fuente y crea un proyecto, copiando el código de incrustación con el ID del proyecto.
- Añadir código::
- Editar el tema del
header.phpy pegue el código en el archivo<body>Antes de etiquetar, o de utilizar el plugin WPCode, pegue el código incrustado en la casilla "Encabezado" y haga clic en "Guardar cambios".
- Editar el tema del
- Uso de fuentes::
- Utilice la fuente Typekit seleccionada en la hoja de estilos del tema, por ejemplo:
.site-title { font-family: 'gilbert', sans-serif; }Añadir fuentes personalizadas a WordPress con CSS @font-face
La forma más sencilla de añadir fuentes personalizadas a WordPress es añadir la fuente @font-face utilizando el método CSS.Este método le permite utilizar cualquier fuente que desee en su sitio web.
- Descargar fuentes::
- Descarga tus fuentes favoritas en formato web. Si no dispone de un formato web adecuado, puede utilizar el generador de fuentes web FontSquirrel para convertirlas.
- Cargar fuentes::
- Suba las fuentes al servidor de alojamiento de WordPress, la ubicación recomendada es la nueva carpeta "fonts" en el directorio del tema o tema hijo.
- Carga de fuentes::
- Utilice la regla CSS @font-face para cargar fuentes en la hoja de estilos del tema, por ejemplo:
@font-face { font-family: 'Arvo'; src: url('http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf'); font- weight: normal; }- Uso de fuentes::
- Utilice esta fuente en cualquier parte de la hoja de estilos del tema, por ejemplo:
.site-title { font-family: 'Arvo', Arial, sans-serif; }Cargar fuentes directamente mediante CSS @font-face no siempre es la mejor solución. Por ejemplo, si utiliza Fuentes Google tal vez Typekit fuentes, entonces es mejor servir las fuentes directamente desde sus servidores para un mejor rendimiento.
llegar a un veredicto
Añadir fuentes personalizadas puede mejorar drásticamente el aspecto visual y la experiencia de usuario de tu sitio WordPress. Las fuentes pueden personalizarse fácilmente con los métodos Google Fonts, Typekit y CSS@font-face.
