Cómo agregar fuentes personalizadas a un sitio web de WordPress

¿Le gustaría aprender a agregar fuentes personalizadas a un sitio web de WordPress?

¿Por qué hacer que tu blog sea aburrido usando fuentes estándar? Deje que su blog hable sobre su vibrante personalidad y los temas que cubre con una amplia variedad de fuentes personalizadas. Las fuentes personalizadas son una característica genial que hace que tu blog se vea mejor que los demás.

Seamos sinceros; a todos nos encantan los blogs y sitios web con las fuentes correctas. No solo decoran el sitio web, sino que también ayudan a atraer al usuario a su contenido. Sin embargo, la elección de las fuentes estándar de WordPress es limitada y depende del tema que esté utilizando. La buena noticia es que puede agregarlos manualmente o con plugins de WordPress especializado.

Y aquí surgen dos preguntas: dónde conseguir fuentes personalizadas para WordPress y cómo instalar fuentes personalizadas en tu sitio web

Vamos a ver.

¿Por qué debo usar fuentes personalizadas?

Atrás quedaron los días en que Times New Roman y Georgia se consideraban los únicos tipos de letra para texto en sitios web. En los últimos años, el espacio de las fuentes ha cambiado por completo con la llegada de fuentes como Google Fonts y otros.

Hoy en día, hay cientos de fuentes gratuitas, ayudas de información y capacitación, y recursos de diseño disponibles en Internet. A diferencia de Adobe Illustrator, Photoshop y otras aplicaciones clásicas, WordPress no le brinda control total sobre las fuentes predeterminadas. Solo ciertos temas de WordPress eligen admitir y usar fuentes personalizadas.

Por lo tanto, en este artículo, aprenderá cómo encontrar fuentes personalizadas adecuadas y usarlas en su sitio web de WordPress.

La importancia de usar fuentes personalizadas

¿Por qué cambiar las fuentes, la sangría de las palabras, el espacio entre líneas, el espacio entre letras o la saturación de fuentes? Sin embargo, algunos estudios muestran que la tipografía mejora la comprensión lectora.

Mucho depende de la construcción de las fuentes. A nivel consciente y subconsciente, todos evalúan el contenido de una página web por diseño.

El diseño de la fuente afecta a los lectores, incluso si no le prestan atención. ¡Renunciar al diseño de fuentes significa renunciar al desarrollo mismo! El estado de ánimo del lector depende de ello. La fuente facilita la lectura o obliga a los usuarios a abandonar la página.

Todos los navegadores web incluyen un conjunto de fuentes predeterminadas. Esto significa que si la fuente no está especificada en el CSS de la página, se utilizará la versión estándar. Todavía puede usar las fuentes predeterminadas, pero lo hacen más difícil para los usuarios. Por eso es esencial utilizar una fuente personalizada. Si su tema de WordPress no le brinda opciones para cambiar la fuente, hay muchos sitios web y herramientas que pueden ayudarlo.

Alternativas de Google Fonts

Muchos de ustedes conocen el Fuentes de Google. Hay muchos más sitios web donde puedes encontrar hermosas fuentes. Algunos de ellos son gratuitos para uso personal. Si necesita un uso comercial, necesitará una licencia. Google Fonts y Adobe Edge Fonts son gratuitos. Es por eso que no son tan únicos.

Éstos son algunos otros recursos para encontrar fuentes para uso gratuito y comercial:

1. Monstruo de plantilla — En el sitio web de TemplateMonster encontrarás todo lo que necesitas para el diseño web. También hay muchas fuentes y paquetes de fuentes para uso personal por un módico precio. Además, para ayudarte a elegir, todas las fuentes se presentan en folletos o marcos. Cada fuente también se presenta con una licencia comercial.
2. MyFonts — MyFonts actualmente ofrece la mayor selección de fuentes del mundo. Sin embargo, los precios aquí también están en el segmento superior. Entonces, si tiene un presupuesto ajustado, esto podría no ser para usted.
3. FuentePrimavera — Fontspring vende fuentes novedosas para uso comercial. Pero en casi todas las familias, se pueden usar 1 o 2 fuentes gratuitas para fines personales. Además, hay una sección separada con fuentes gratuitas. La colección es vibrante. Pero deberá estudiar detenidamente la información de la licencia de una fuente en particular antes de descargarla.
4. Cufonfonts — También es una gran colección de diferentes fuentes. Seleccione cualquiera y verá una página con información detallada al respecto. Hay muchas fuentes gratuitas y están divididas en secciones individuales. El sistema de clasificación de CufonFonts es bastante flexible y conveniente. Además, se incluye compatibilidad con Webfont.
5. dafont — Otra colección accesible de 3 fuentes gratuitas. La mayoría de ellos están diseñados solo para uso personal. Una característica genial de DaFont es un sistema de categorías. Puede seleccionar fuentes al estilo de cómics, videojuegos, vintage, etc.

La elección de las fuentes es muy tentadora porque todas son hermosas. Pero no deberías elegir mucho. No use más de dos fuentes en un sitio web. Entonces laapariencia de su sitio web será consistente. Una vez que haya elegido sus fuentes, asegúrese de cargar los archivos para cada estilo que usará (regular, negrita, cursiva, etc.).

Ahora que ha seleccionado la fuente adecuada para su sitio web, veamos cómo agregarla.

Cómo agregar fuentes personalizadas a WordPress

Hay varias formas de agregar fuentes a un sitio web de WordPress:

1. Plugins : en este caso, diferente plugins de WordPress se utilizan para facilitar el proceso.
2. a mano : con este método, necesita descargar una fuente descargada del sitio y modificar el archivo CSS.
3. Temas: muchos temas populares tienen opciones integradas para personalizar sus fuentes (nota: no cubriremos esta opción ya que el proceso variará según el tema que esté usando).

Opción 1: cambiar las fuentes de WordPress con complementos

Si no nos importan los cambios globales, podemos instalar plugins de WordPress que cambiará las fuentes en su sitio web.

Características de los complementos de fuentes personalizadas

El software de código abierto tiene una ventaja para el interés de la comunidad, y WordPress también tiene esa ventaja. Varios complementos de WordPress le permiten agregar fuentes personalizadas. ¿Cómo elegir un complemento apropiado cuando hay tantos? ¿Cuáles son las características de los complementos de WordPress de fuentes personalizadas?

Aquí hay algunos puntos a considerar:

• Posibilidad de usar una fuente personalizada
• Posibilidad de usar múltiples fuentes
• Encabezados y componentes de destino
• Bonificación: la capacidad de cambiar la configuración de fuente desde el editor visual

Es todo. La primera característica de la lista es muy importante. Todavía puede descargar fuentes de sitios web como DaFont, Font Squirrel, etc., pero debe poder cargarlas en WordPress.

Veamos algunos complementos para WordPress que le permiten cargar fuentes personalizadas.

1. Mejor fuente impresionante

Este complemento de WordPress permitirá a sus usuarios combinar automáticamente la última versión de las fuentes Better Font Awesome con CO, shortcodes y más. Además, este complemento de WordPress se actualiza automáticamente.

Encontrará allí como características: actualizaciones periódicas, un generador de shortcode, compatibilidad con otros complementos de WordPress, etc.

Descargar | Demo | alojamiento web

2. Fuentes de Google para WordPress

Este complemento de WordPress consta de fuentes especiales 877, que le permitirán utilizar todas las fuentes en sus sitios web de WordPress. Gracias a su vista previa en tiempo real, le permitirá ver cómo se verá su sitio web una vez que se aplique la fuente. 

Además, podrá guardarlo y editarlo en la interfaz cuando encuentre la combinación que disfrutará.

Sus características incluyen: una vista previa en tiempo real, un SEO bastante avanzado, soporte multilingüe, soporte para más fuentes 870 + Google, actualizaciones fáciles y más.

Descargar | Demo | alojamiento web

3.Complemento de fuentes

Fonts Plugin es un complemento gratuito de WordPress que permite a los usuarios acceder a las bibliotecas de Google Fonts y Adobe Fonts. Con este complemento de WordPress, puede elegir entre más de 1000 fuentes de Google y Adobe, usar varias fuentes en su sitio web y probar diferentes opciones con la función de vista previa en tiempo real del complemento en el personalizador de WordPress.

Para obtener más formas de personalizar la tipografía de su sitio web, como el tamaño de fuente, el espaciado entre letras y la altura de línea, puede actualizar a la versión premium, Complemento de fuentes Pro.Descargar | Demo | alojamiento web

4. Fuentes de Google fáciles

Easy Google Fonts es una de mejores complementos de WordPress para personalizar la tipografía de su sitio web. Al igual que el complemento de fuentes, le permite elegir entre cientos de fuentes de Google y obtener una vista previa de ellas en el Personalizador antes de agregarlas a su sitio web.

Aunque proporciona acceso a un número menor de fuentes de Google, es único en el sentido de que le permite crear controles y reglas de fuentes personalizadas en el área de administración, que aparecerán inmediatamente en el personalizador de WordPress.

Descargar | Demo | alojamiento web

Opción 2: instalar manualmente las fuentes personalizadas de WordPress

Con la directiva @font-face, puede conectar una o más fuentes a su sitio web. Pero este método tiene sus pros y sus contras.

Ventajas:

• Gracias a CSS, puede conectar fuentes de cualquier formato: ttf, otf, woff, svg.
• Los archivos de fuentes se ubicarán en su servidor; no dependerá de servicios de terceros.

Inconvenientes :

• Para la conexión de fuente correcta para cada estilo, debe registrar un código separado.
• Sin saber CSS, puede confundirse fácilmente.

Pero no es un problema real si puedes simplemente copie un código terminado y donde necesita especificar sus valores.

Observación : Antes de comenzar, asegúrese de crear un tema hijo para su sitio web De esta manera, puede realizar todos los cambios en su tema secundario, dejando su tema principal para que pueda actualizarlo fácilmente si es necesario en el futuro.

Paso 1: crea una carpeta de "fuentes"

En su tema hijo, cree una nueva carpeta de "fuentes" en: wp-content/themes/tu-hijo-tema/fuentes

Paso 2. Cargue los archivos de fuentes descargados en su sitio web

Esto se puede hacer a través de su panel de control de hosting o vía FTP.

Agregue todos los archivos de fuentes a la carpeta de fuentes recién agregada: wp-content/themes/ En su tema hijo, cree una nueva carpeta de "fuentes" en: wp-content/themes/tu-hijo-tema/fuentes que creaste.

Paso 3. Importa fuentes a través de la hoja de estilo del tema secundario

Abrir el archivo style.css de su tema hijo y agregue el siguiente código al principio del archivo CSS (después del comentario del tema hijo):

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont.eot');
src: url('fonts/WebFont.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont.woff') format('woff'),
url('fonts/WebFont.ttf') format('truetype'),
url('fonts/WebFont.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: normal;
}

donde mi fuente web es el nombre de la fuente y el valor de la propiedad src (los datos entre paréntesis entre comillas) es su ubicación (enlaces relativos). Necesitamos especificar cada estilo por separado.

Dado que primero conectamos el estilo normal, establecemos las propiedades font-weight y font-style en normal.

Paso 4. Al agregar cursiva, escribe lo siguiente:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic.eot');
src: url('fonts/WebFont-Italic.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic.woff') format('woff'),
url('fonts/WebFont-Italic.ttf') format('truetype'),
url('fonts/WebFont-Italic.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: italic;
}

Cuando todo es igual, somos los únicos en adjuntar la propiedad de estilo de fuente a la cursiva.

Paso 5. Para agregar la fuente en negrita, agregue el siguiente código:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Bold.eot');
src: url('fonts/WebFont-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Bold.woff') format('woff'),
url('fonts/WebFont-Bold.ttf') format('truetype'),
url('fonts/WebFont-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: normal;
}

Donde establecemos la propiedad font-weight en negrita.

Recuerde especificar la ubicación correcta de los archivos de fuente para cada estilo.

Paso 6. Para conectar cursiva negrita, escriba lo siguiente:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic-Bold.eot');
src: url('fonts/WebFont-Italic-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic-Bold.woff') format('woff'),
url('fonts/WebFont-Italic-Bold.ttf') format('truetype'),
url('fonts/WebFont-Italic-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: italic;
}

Bueno, eso es todo. Ahora que ha conectado cuatro estilos de fuente a su sitio web.

Pero hay una nota: esta conexión de fuentes no se mostrará correctamente en Internet Explorer 8. El consuelo es que hay muy pocas personas que todavía usan IE8.

Otros recursos recomendados

También lo invitamos a consultar los recursos a continuación para avanzar en el control y agarre de su sitio web y blog.

• Complementos de acordeón de 10 WordPress para un sitio web
• Cómo agregar múltiples columnas en WordPress
• Algunos plugins para integrar los servicios de Google en su blog
• Complementos de 5 WordPress para mostrar notificaciones
• El uso de diferentes orígenes WordPress

Conclusión

¿Qué es lo primero que notan los usuarios cuando visitan su sitio web? ¡Así es, su diseño! La mayor parte del diseño se basa en el uso adecuado de fuentes hermosas. Por lo tanto, debe cuidar el diseño de la fuente de su sitio web. Agregue código o use uno de los complementos mencionados anteriormente para incrustar un nuevo estilo de fuente. Cómo lo elijas depende de ti.

Asegúrate de no usar más de dos fuentes en el mismo sitio web. Dado que cuantas más fuentes personalizadas agregue al sitio web, más bajará la velocidad del sitio web.

Eso es todo por este artículo que le muestra cómo agregar fuentes personalizadas a un sitio web de WordPress. Te invitamos a probar. Si tiene alguna inquietud o sugerencia, háganoslo saber dentro de comentarios.

Sin embargo, también podrá consultar nuestra Recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.

Mientras tanto, comparte este artículo en tus diferentes redes sociales.   

...