Cómo agregar fácilmente fuentes personalizadas a su sitio web de WordPress

Al igual que los colores, las imágenes y otros elementos estructurales, la tipografía es una parte importante del diseño web. Comunica la marca y la personalidad, el contenido de las especias y, en general, puede mejorar en gran medida la estética de un sitio web de WordPress (con la excepción de Comic Sans, que recomiendo encarecidamente no usar). Afortunadamente, en los últimos años, las fuentes y patrones gratuitos se han vuelto más fáciles. Los diseñadores y propietarios de sitios web también pueden usar una gran cantidad de recursos para incluir hermosos personajes en su presencia en línea. En este artículo, analizaremos dos formas de obtener fuentes personalizadas en su sitio web de WordPress, a través de los dos servicios de Google Fonts y Adobe Edge Web Fonts. Ambas son grandes bibliotecas de fuentes web fácilmente disponibles que se integrarán en su sitio.
Sin embargo, antes de estudiar cómo hacerlo, hablemos rápidamente por qué la tipografía es importante para su sitio por qué debe usar fuentes personalizadas El uso correcto del diseño web es un arte en sí. No solo se trata de elegir la fuente correcta, sino que el grosor, la inclinación y el tamaño también juegan un papel importante. Por otro lado, cuando se hace correctamente, la tipografía puede cambiar mucho el aspecto de su sitio y mostrar sobre lo que es. Hombre de negocios conservador? Hipster juguetón? La fuente en su sitio es un factor importante para que los visitantes realicen tales llamadas.
De hecho, en este artículo, Derek Halpern de Social Triggers habla sobre un experimento que mostró a los invitados del restaurante haciendo suposiciones sobre el nivel de calificación del cocinero basado en la fuente utilizada en el menú. Fascinante, ¿no? Además, existe el problema de la experiencia del usuario. Aunque todos sabemos que el contenido es el rey, la forma en que presenta su contenido es igual de importante. Puedes escribir los artículos más reflexivos del mundo, pero si son un desastre ilegible, nadie permanecerá. De hecho, el mismo artículo cita otro experimento. Aquí, se les pidió a los participantes que juzgaran cuánto tomarán para completar un cierto conjunto de instrucciones. Sorprendentemente, cuando las instrucciones se imprimieron en una fuente más compleja, las estimaciones de cuánto tiempo las llevarían casi duplicaron. A la luz de estos hallazgos, ¿crees que las fuentes podrían desempeñar un papel en la forma en que las personas perciben el sitio? Y yo. De hecho, ¡elegir la fuente correcta es extremadamente importante para el éxito de un sitio web! Estos tienen una influencia directa en la tasa de rechazo, las conversiones y otros factores importantes. Además, vería esta lista de temas de WordPress centrados en la impresión. ¿No son simplemente hermosos? Lo sé, no podría estar más de acuerdo contigo. Instalación de fuentes de Google Fonts
Bien, ahora pasemos a la carne y las papas de todo el artículo: cómo obtener fuentes personalizadas en su sitio como mencionamos anteriormente, analizaremos dos servicios que pueden ayudarlo a lograr esto.

La primera es Google Fonts. La biblioteca aloja cientos de fuentes de código abierto listas para mostrarse en su sitio web. Llegar allí es simple, como verá en esta guía de paso por paso. 1. Encuentre la fuente correcta primero Tenemos que elegir cualquier fuente que deseemos agregar en nuestra página. Si sabe exactamente que está buscando, simplemente puede buscar cualquier fuente por su nombre. Para aquellos que están indecisos o desean navegar un poco, Google ofrece una serie de opciones de filtro: categoría (Fonts esas pequeñas líneas al final de sus líneas, por ejemplo, Times New Roman)
Sans-serif (fuentes simples sin líneas adicionales, como usa el torque)
Display (para ser utilizado en un tamaño más grande, como para títulos)
Escritura a mano (fuentes que imitan la escritura a mano)
Monopatiu (todos los personajes tienen el mismo espacio)
Estilo
Grosor (muy delgado a muy grueso)
Inclinación (derecho a inclinado)
Ancho (espaciado marino estrecho entre personajes)
Script (para otro alfabeto latino)
cirílico
Cirílico extendido
Devanagari
Griego
Griego extendido
Jemer
latín
latín extendido
Vietnam
En mi caso, simplemente busco la opción de búsqueda de nombres, porque quiero instalar “Advent Pro”, que es una fuente que realmente me gusta. 2. Seleccione su fuente y luego, agregue la fuente en cuestión a su colección haciendo clic en el botón azul a la parte inferior derecha. Esto abrirá una barra en la parte inferior de la pantalla, donde se guardan todas las fuentes seleccionadas. Nota: Puede agregar más familias de fuentes.
Una vez que esté satisfecho con su selección, haga clic en “Use” en la esquina superior derecha de la colección de fuentes. 3. Elija estilos de fuente Ahora seleccionaremos los diferentes estilos de fuentes. La mayoría de las fuentes tienen diferentes niveles de grosor. Debido a que la carga de fuentes personalizadas da como resultado un tiempo de carga adicional (observe el cuadrante correcto), solo debe agregar las que realmente necesita. En mi ejemplo, opto por “normal”, “luz” y “luz adicional” .4. Seleccione conjuntos de caracteres adicionales (opcionales) Si tiene la intención de mostrar su sitio en un idioma con otro alfabeto y si la fuente elegida acepta esto, en la siguiente sección puede elegir el subconjunto que necesita. Como no planeo hacer ninguna de estas cosas, lo dejo como es.
5. Copie el código y agréguelo a su sitio web de WordPress desde sus opciones anteriores, Google Fonts generará el código requerido para cargar fuentes en su página. Tiene tres opciones para hacer esto: HTML, CSS o JavaScript.

Si elige HTML o JavaScript, el código proporcionado ingresa al documento Header.php, preferiblemente inmediatamente después de la etiqueta . Si opta por CSS, la llamada debe agregarse al comienzo del archivo style.css. 6. Llame a la fuente CSS ahora que la fuente está completamente integrada en su sitio, todo lo que queda por hacer es nombrarla en algún lugar. Para mostrar la fuente personalizada, debe asignarlo a un elemento en su sitio a través de CSS, por ejemplo, de la siguiente manera:

H1 {

Familia rápida: “Advent Pro”, Sans-Serif;


Peso de fuente: 400;
} Ahora has terminado. No fue tan difícil ahora, ¿no? Sin embargo, WordPress no sería WordPress si no hubiera un complemento para realizar la misma tarea. Fácil Google Fonts es un complemento que le permite instalar Google Fonts en su sitio sin ninguna codificación. También está integrado con WordPress Customizer para permitirle obtener una vista previa de los cambios de fuentes en su sitio en tiempo real. Entonces, si está buscando una manera de agregar fuentes personalizadas a su sitio sin tocar ningún archivo, esta es una opción viable.
Instalación de fuentes personalizadas en WordPress en Adobe Edge
El segundo candidato en la lista es Adobe Edge WebFonts. Es un servicio de – Usted adivinaste – Adobe, Productor Photoshop (y ese aburrido jugador de flash que siempre quiere ser actualizado). Al igual que Google Fonts, Edge Web Fonts es un directorio con más de 500 fuentes completamente gratuitas. Probablemente los servicios sean aún más fáciles de usar que la solución de Google. Haga clic en “Iniciar” en la página principal o vaya a esta dirección para comenzar. 1. Encuentra tu fuente
Para llegar a la fuente de sus sueños, puede buscar directamente por su nombre o filtrar las fuentes disponibles de acuerdo con una serie de clasificaciones y propiedades. Adobe ofrece aún más opciones que sus competidores.

Clasificaciones (sans-serif, serif, slip, script, blackletter, monoespacial, hecho a mano y decorativo)
Recomendado para títulos o párrafos (¡muy buena idea!)

El peso de la fuente, la altura, el ancho, las letras superiores/minúsculas, el contraste, el estilo antiguo/hilos de revestimiento (el último punto se refiere al estilo de los números)

El apoyo lingüístico para idiomas y alfabetos extranjeros alternativos, como Cyrillica, catalán, alemán o suecos de “Advent Pro” también está disponible aquí, por lo que no tengo problemas para encontrarlo buscando nombres. 2. Agregue a su selección cuando pase el mouse sobre una fuente que le guste, aparecerá una nueva ventana que muestre todos los estilos y licencias disponibles. Haga clic en los enlaces de licencia para ver si la fuente está disponible para el uso deseado. Para continuar obteniéndolo en su sitio, haga clic en “Seleccione esta fuente” en la parte superior.
3. Configure la fuente abrirá un menú en la parte inferior donde aún puede configurar su fuente. Primero elija si desea usar el subconjunto estándar o todos los caracteres disponibles. El estándar incluye todos los caracteres Latin-1 más algunos signos de tipografía útiles. La segunda opción consiste en todos los personajes disponibles en esta fuente. Nuevamente, este es un problema de carga.
Luego elija los estilos deseados. Incluya solo aquellos que realmente necesita. Si va a usar solo semi -vold y ordinario en su sitio, no necesita cargar el resto.
4. Incluya el código en su sitio después de haber terminado de configurar, copie el código en la parte inferior. A diferencia de Google Fonts, Adobe Edge Fonts solo ofrece un script JS. Como mencioné anteriormente anteriormente, esto debe incluirse en la sección de su sitio web, preferiblemente inmediatamente después de la etiqueta inicial.
Nota: Al elegir más fuentes, todas se incluirán en la misma línea de código para que pueda agregarlas a su sitio simultáneamente. No necesita pasar por el mismo proceso varias veces y agregar más líneas de código. 5. Llame a la fuente en estilo.css Ahora todo lo que queda por hacer es llamar a la fuente en algún lugar de la hoja de estilo. Para facilitar esto, las fuentes web de Adobe Edge le darán un ejemplo de un CSS en la parte inferior de la pantalla, incluida una fuente alternativa para los navegadores que no aceptan. Úselo para que la fuente aparezca en su sitio., Por ejemplo, en Encabezados: H1,
H2,

H3 {

Familia de fuentes: Advent-Pro, Sans-Serif;

} Fácil, ¿no? Las fuentes personalizadas de WordPress agregar brevemente fuentes personalizadas a su sitio web de WordPress pueden marcar una gran diferencia. Soy una excelente herramienta de diseño, transmitir su personalidad y permitirle desarrollar aún más la marca. Además, también determinan la legibilidad de su contenido e influyen directamente en la experiencia del usuario. El uso de fuentes web es una forma conveniente de introducir una tipografía personalizada en su sitio. Dos excelentes alternativas para hacerlo son los servicios ofrecidos por Google y Adobe. Ambas bibliotecas están bien suministradas y son de uso gratuito para cualquier persona. Con solo unos pocos clics, puede elegir entre cientos de fuentes diferentes y puede colocarlas fácilmente en su sitio web para dejar que el contenido brille aún más. ¿Usas fuentes de WordPress personalizadas? ¿Cuál es tu método favorito? ¡Dinos en los comentarios!