Agregar fuentes personalizadas a WordPress


Cómo agregar fuentes personalizadas a WordPress


Elegir la fuente correcta para su sitio de WordPress es una parte central del diseño web y la marca del sitio web.

Como colores, imágenes y otros elementos, tipografía. juega un papel importante en cómo los visitantes perciben su sitio.

Afortunadamente, las fuentes de WordPress son una de las muchas cosas que puedes personalizar libremente. Puede usar prácticamente cualquier fuente personalizada gratuita en su sitio de WordPress que desee.

Cubriremos todo lo que necesita saber sobre las fuentes de WordPress:

  • A) Cómo agregar fuentes personalizadas a WordPress (manualmente)
  • B) Cómo agregar fuentes personalizadas a WordPress (a través de un complemento)
  • ¿Por qué usar fuentes personalizadas en WordPress?
  • Dónde encontrar fuentes personalizadas
  • Conclusión

A) Cómo agregar fuentes personalizadas a WordPress manualmente

Cuando se trata de agregar fuentes personalizadas a WordPress a mano, tiene tres opciones principales: HTML, JavaScript y CSS. Hay ventajas y desventajas de cada método y cuál es el adecuado para usted, depende de su configuración. No se preocupe, revisaremos cada uno de ellos en detalle..

1. Usando CSS y @importar

Comencemos con el método menos recomendado. Si planea instalar tipos de letra personalizados de Google Fonts, es posible que haya notado que tiene una pestaña etiquetada @importar. El servicio te da un código CSS.

pestaña de importación en fuentes de google

Puede tomarlo como está e insertarlo en su encabezado (más sobre eso a continuación) o copiarlo sin el >paréntesis al comienzo de su tema (o mejor aún, tema secundario) style.css archivo.

/ *
Nombre del tema: Twenty Seventeen Child
URI del tema: https://wordpress.org/themes/twentyseventeen/
Plantilla: veintisiete
Autor: el equipo de WordPress
Autor URI: https://wordpress.org/
Versión: 1.0

* /

@import url ('https://fonts.googleapis.com/css?family=Open+Sans|Roboto');


/ * CSS adicional va aquí * /

Al hacerlo, se cargará la fuente en su sitio desde la hoja de estilo. Parece una solución simple, ¿verdad? ¿Por qué es entonces el menos recomendado??

La razón son los problemas de rendimiento. Utilizando @importar ya no es el camino recomendado porque evita que los navegadores descarguen varias hojas de estilo a la vez. La consecuencia: tiempos de carga de página más lentos. Mantente alejado de eso si puedes.

2. Usando un archivo de plantilla de WordPress

Un segundo método para obtener las fuentes en su sitio es tomar el código provisto por las bibliotecas de fuentes y copiarlas en su header.php archivo de plantilla La mayoría de los temas estándar de WordPress lo tienen.

Asegúrese de colocarlo en algún lugar entre el y soportes. De esa manera, su fuente se cargará cada vez que se cargue una página.

ingrese el código de fuentes de google en el encabezado de wordpress

Si está utilizando un tema secundario, asegúrese de copiar el tema principal header.php archivar en el directorio de temas secundarios y hacer los cambios allí.

Algunos temas vienen con configuraciones que le permiten agregar código personalizado a su encabezado y pie de página a través del backend. Esta también es una opción viable.

3. Usando @Perfil delantero

Hasta ahora, solo hemos hablado sobre cómo usar fuentes personalizadas en WordPress que están alojadas en otro lugar, a saber, los servidores de Google y Adobe. Sin embargo, también es posible alojar fuentes en su propio sitio y ofrecerlas a los navegadores de los visitantes desde allí..

Para hacer esto, primero debe descargar la fuente en cuestión. ¿Recuerdas el botón de descarga en Google Fonts? Esa será útil ahora. Otros proveedores también te permiten descargar fuentes.

Cuando lo haga, asegúrese de obtenerlo en un formato de fuente web. Eso significa TTF, OTF o WOFF. Encontrará más información al respecto. aquí. Si no tiene el formato de fuente web correcto, también puede usar este servicio para convertir tu fuente en una compatible.

Una vez que tenga listos sus archivos de fuentes, debe cargarlos en su sitio de WordPress a través de FTP. Un buen lugar para almacenarlos es en un subdirectorio del tema de su hijo llamado fuentes (creativo, lo sabemos).

Después de eso, debe cargar la fuente en su hoja de estilo a través de @Perfil delantero. Así es como se ve:

@Perfil delantero {
Familia tipográfica: Roboto;
src: url (http: //localhost/wordpress/wp-content/themes/twentyseventeen-child/fonts/Roboto-Regular.ttf);
peso de fuente: normal;
}

Recuerde reemplazar el nombre de la fuente y la dirección de su ubicación en su propio sitio. Después de eso, su nueva fuente personalizada será utilizable.

Sin embargo, esta tampoco es la mejor solución, especialmente en cuanto al rendimiento. Los servidores de Google son probablemente más rápidos que los suyos y, por lo tanto, cargar fuentes personalizadas desde allí es probablemente la mejor solución.

4. Poner en cola las fuentes: la "forma de WordPress"

Si realmente desea agregar fuentes personalizadas a WordPress de la manera correcta, utilizará su funciones.php archivo (dentro del directorio de su tema actualmente activo) y la función  wp_enqueue_script o wp_enqueue_style.

Con su ayuda, podemos tomar los fragmentos de código proporcionados por los sitios de fuentes. Sin embargo, en lugar de copiarlos en un archivo, los agregaremos al encabezado mediante una función.

Cuál es la diferencia entre wp_enqueue_script y wp_enqueue_style? Como sugieren sus nombres, uno es para agregar guiones, otro para hojas de estilo. Cuál es el correcto para usar depende de cómo se proporcionan sus fuentes personalizadas desde su fuente.

Por ejemplo, Google Fonts le ofrece fuentes como hojas de estilo. En ese caso, los agregaría a su sitio de WordPress de esta manera:

función add_google_fonts () {
wp_enqueue_style ('google_web_fonts', 'https://fonts.googleapis.com/css?family=Open+Sans|Roboto');
}

add_action ('wp_enqueue_scripts', 'add_google_fonts');

En contraste con eso, las fuentes de Adobe Edge Web Fonts vienen como JavaScript. Por lo tanto, para ponerlos en cola en su sitio, el código se vería así:

función add_adobe_fonts () {
wp_enqueue_script ('adobe_edge_web_fonts', '//use.edgefonts.net/open-sans.js');
}

add_action ('wp_enqueue_scripts', 'add_adobe_fonts');

No fue tan difícil, ¿verdad? Además, obtienes puntos extra por hacerlo a la manera de WordPress.

5. Llame a las fuentes personalizadas en su hoja de estilo

Ahora que las fuentes se han agregado a su sitio, puede usarlas oficialmente. Para hacerlo, todo lo que queda es agregar una declaración para la nueva fuente en su hoja de estilo. Por ejemplo, para cambiar la fuente de sus etiquetas de encabezado, usaría algo como esto:

h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Roboto';
}

Nota: Presta atención a cómo el servicio que estás utilizando especifica la declaración CSS para tus fuentes. En nuestro sitio de prueba, aparentemente no pudimos hacer que Adobe Edge Web Fonts funcionara porque llaman a Open Sans en CSS con abierto Opuesto a 'Open Sans' en Google Fonts.

Eso es. Ahora sabe cómo agregar fuentes personalizadas a WordPress manualmente. ¡Felicítese, este es un conocimiento del siguiente nivel! Obviamente, las mismas acciones son posibles a través de complementos. De eso es de lo que hablaremos a continuación.

B) Cómo agregar fuentes personalizadas a WordPress a través de un complemento

La esfera de WordPress no sería lo que es si no hubiera varias soluciones de complementos para agregar fuentes personalizadas a la plataforma. Vamos a repasar cómo usar Fuentes de Google fáciles, que es uno de los complementos más populares en esta área.

1. Instale el complemento

El primer paso es instalar el complemento. Para hacer eso, dirígete a Complementos> Instalar nuevo. Luego, busque el nombre del complemento. En los resultados de búsqueda, haga clic en Instalar ahora y active el complemento una vez que esté en su sitio.

2. Agregue / cambie fuentes en su sitio

Cuando el complemento está activo, encuentra un nuevo elemento de menú llamado Tipografía debajo Apariencia> Personalizar.

menú de tipografía en el personalizador de wordpress

Cuando haces clic en él y eliges Tipografía predeterminada, encontrará una lista de controles para cambiar la fuente de sus párrafos y encabezados.

configuración sencilla de fuentes de google en el personalizador de wordpress

Usarlos es realmente simple. Simplemente haga clic en el menú desplegable donde dice Editar fuente para la parte de su sitio que desea cambiar. Esto le da acceso a este menú:

fuentes de google fáciles cambian la fuente

Aquí, la parte más importante es la que está debajo de Familia tipográfica. Aquí, puede elegir un nuevo tipo de fuente de toda la biblioteca de fuentes de Google (use Script / Subconjunto para limitar las opciones de fuente a aquellos con caracteres especiales).

Las fuentes están ordenadas por fuentes estándar, serif, sans-serif, display, manuscrita y monoespacio. Sin embargo, también puede simplemente buscarlos por nombre.

Cuando hace clic en una fuente, puede obtener una vista previa de los cambios en tiempo real a la derecha.

fuente personalizada cambiada en fuentes fáciles de google

3. Configure la fuente

Una vez que haya elegido una fuente, hay muchas opciones para personalizar aún más su tipografía.

En primer lugar, puede cambiar el peso de fuente / estilo en el menú del mismo nombre. Esto controla el grosor de las letras..

Además, bajo Decoración de texto, puede agregar subrayado, tachado y sobrelínea. Transformación de texto también le permite establecerlo en mayúsculas, en minúsculas o en mayúsculas cada primera letra. Bajo la Apariencia pestaña en la parte superior, también puede controlar el color de fuente, el color de fondo, el tamaño de fuente, la altura de la línea y el espaciado entre letras.

configuración de apariencia en fuentes de google fáciles

Finalmente, Posicionamiento le permite cambiar otras configuraciones como margen, relleno, borde, radio de borde y visualización.

ajustes de posicionamiento en fuentes de google fáciles

En resumen, debería poder personalizar las fuentes en su sitio completamente a su gusto. Fácil, ¿no es así? No te olvides de golpear Guardar y publicar en la parte superior cuando esté satisfecho con sus cambios.

No funciona, ¿qué hago??

A veces no puede cambiar algunas de las fuentes en su sitio. Eso suele suceder cuando el tema que está utilizando viene con clases y selectores CSS no estándar para diseñarlos.

Por ejemplo, en el tema Twenty Sixteen, los títulos de las publicaciones de blog no solo se definen como H1 sino que también tienen una clase CSS llamada .título de entrada. Por esa razón, el complemento no puede cambiarlos.

Para solucionar este problema, debe crear un llamado control de fuente debajo Configuración> Fuentes de Google.

agregar control de fuente en fuentes de google fáciles

Puede asociar selectores CSS con un nuevo control y forzar la anulación cuando sea necesario. Después de hacerlo, el nuevo control de fuente está disponible como una opción adicional en el Personalizador de WordPress en Tipografía temática. Pan comido.

Otras fuentes personalizadas Plugins de WordPress

También hay otros complementos de WordPress disponibles para agregar fuentes personalizadas:

  • Use cualquier fuente - Te ayuda a usar fuentes cargadas sin CSS. Contiene fuentes en su propio servidor y también ofrece herramientas de conversión para formatos de fuente..
  • Fuentes de Typekit para WordPress - Usa fuentes de Adobe Typekit servicio (en el que debe registrarse). Le permite ingresar códigos de incrustación y CSS personalizado directamente en el complemento.
  • TK Google Fonts - Una solución alternativa para incrustar las fuentes de Google que prácticamente traslada la experiencia de las fuentes de Google al backend de WordPress. Pruebe las fuentes con una vista previa y texto personalizado, luego cámbielo dentro del Personalizador de WordPress.

¿Por qué usar fuentes personalizadas en su sitio web de WordPress??

La tipografía es una ciencia en sí misma y no podremos ofrecerle un curso completo sobre el uso de las fuentes en el diseño web aquí. Después de todo, no se trata solo de la fuente, sino también de su tamaño, inclinación, grosor y muchas otras cosas. Sin embargo, nos lata explica por qué usar fuentes personalizadas en tu sitio de WordPress es una buena idea.

1. La tipografía es parte de la primera impresión.

En primer lugar, la fuente que utiliza influye mucho en cómo se percibe su sitio. ¿Es tu sitio divertido y juguetón? ¿Eres un profesional de los negocios? Los visitantes deciden esto en un solo vistazo y su tipografía juega un papel importante en su percepción..

2. Las fuentes tienen mucha más influencia de la que crees

Puede afectar su capacidad de aprender, memorizar textos e incluso afectar su estado de ánimo..

Por ejemplo, en uno investigación, se observó que si desea aumentar el tiempo dedicado a leer algún texto, debe usar una fuente serif. Sin embargo, si desea leer más en poco tiempo, debe cambiar a una fuente sans-serif.

Otro estudio mostró a las personas las mismas instrucciones de ejercicio en diferentes tipos de letra. Luego pidieron a los participantes que calcularan cuánto tiempo les tomaría completar dichas instrucciones. Fascinantemente, aquellos con la fuente más compleja supusieron que les tomaría más tiempo que el grupo con la fuente más simple. Como consecuencia, tenían menos probabilidades de seguir la rutina de ejercicios..

Dónde encontrar fuentes personalizadas

1. Use las fuentes de Google para encontrar tipografía personalizada

El primer servicio que veremos es Fuentes de Google. Como su nombre lo indica, es un servicio de Google que ofrece más de 800 fuentes diferentes. De uso gratuito. Para todo el mundo.

Aquí se explica cómo usarlo:

2. Encuentra la fuente correcta

Cuando vaya por primera vez a la página de Fuentes de Google (simplemente escríbala en la Búsqueda de Google), esto es lo que verá:

Cómo agregar fuentes personalizadas en la página de inicio de WordPress Google Fonts

La interfaz de usuario está diseñada para ayudarlo a encontrar la fuente correcta para su propósito. Si ya tiene una fuente en mente, simplemente puede escribir su nombre en el campo de búsqueda en el lado derecho.

De lo contrario, puede filtrar las fuentes de muchas maneras diferentes, por ejemplo, por categoría:

  • Serif - Significa fuentes con líneas onduladas al final, como Times New Roman.
  • Sans-Serif - Fuentes simples sin garabatos, como Helvetica. Las fuentes utilizadas en este sitio web son un ejemplo de eso.
  • Monitor - Tipos de letra que se pueden usar en tamaños más grandes, como titulares.
  • Escritura - ¿Quieres que tu tipografía parezca que fue escrita a mano? Entonces esta es tu configuración.
  • Monoespacio - Tipografía donde todos los personajes ocupan el mismo espacio., Me gusta esto.

Otros filtros incluyen:

  • Clasificación - Ordenar fuentes después de tendencias, populares, fecha agregada o alfabéticamente.
  • Idiomas -Limite su elección de fuente a idiomas que no estén escritos en el alfabeto latino, como el árabe, el tailandés o el vietnamita.
  • Una serie de estilos -Elija cuántos estilos disponibles necesita, lo que significa si una fuente está disponible en diferentes grosores, cursiva, negrita y más.
  • Grosor - Elija el grosor deseado de su fuente.
  • Inclinación - Igual que el grosor pero para la inclinación. Se extiende de recto a casi horizontal.
  • Anchura - Filtra las fuentes por el ancho de sus letras y espaciado.

Cuando aplica cualquier filtro, sus resultados de búsqueda se ajustan en tiempo real. A la izquierda, verá las fuentes disponibles en su categoría y oraciones de ejemplo..

Cuando pasa el cursor sobre una fuente, puede usar los menús desplegables en la parte superior para que Google Fonts muestre un párrafo de ejemplo, el alfabeto completo o los números. También puede simplemente hacer clic en el campo de oración y escribir lo que quiera.

editar texto de muestra en fuentes de google

Además de eso, hay opciones para cambiar el estilo y el tamaño de la fuente. Cuando realiza cambios, también tiene la opción de aplicarlos a todos sus resultados de búsqueda. Finalmente, mire la página de detalles de la fuente haciendo clic en Ver muestra.

página de detalles de fuente en google fonts

3. Agregue fuentes a su colección

Si le gusta una fuente en particular, puede usar el signo más rojo en la esquina superior derecha para agregarla a su colección. Al hacerlo, se abrirá un menú en la parte inferior donde verá todas las fuentes elegidas..

fuentes seleccionadas en fuentes de google

Tenga en cuenta que puede agregar más de una familia de fuentes. Esto tiene sentido, por ejemplo, cuando elige una para su copia del cuerpo y otra para los encabezados.

4. Personalizar la configuración de fuente

Una vez que esté satisfecho con su colección, haga clic en el menú inferior. Al hacerlo, se abrirá esta pantalla:

configuración de fuente en fuentes de google

Como puede ver, puede encontrar algunas piezas de código para insertar y usar fuentes en su sitio. Esto será importante más adelante. Por ahora, haga clic en la pestaña que dice Personalizar. Hacerlo te lleva a este menú:

personalizar fuentes en fuentes de google

Aquí, puede seleccionar los estilos de las fuentes en cuestión. Esto es importante si desea utilizar fuentes de diferentes tamaños, que suele ser el caso.

Sin embargo, tenga cuidado: cuanto más estilos tenga que cargar su sitio, más se ralentizará (Google Fonts incluso le da una indicación de la velocidad de carga de su colección actual en la esquina superior derecha). Entonces, piense en lo que realmente necesita y solo elija eso. Por cierto, hay más formas de acelerar WordPress.

En caso de que necesite otro idioma que no sea el alfabeto latino estándar, asegúrese de seleccionarlo también en la parte inferior.

seleccionar idiomas de fuente en google fonts

Además de eso, todo lo que necesita saber son los dos íconos de flecha en la parte superior.

botón descargar y compartir en fuentes de google

El de la izquierda le permite previsualizar y compartir su colección de fuentes. Cuando elige hacerlo, abre una página extendida donde puede insertar texto de muestra y verlo en todas las fuentes a la vez. Esta página también es buena para compartir con la gente..

Más importante es el botón de descarga al lado. Al hacer clic en él, puede descargar los archivos de fuentes para usarlos en su máquina de escritorio (por ejemplo, en Photoshop). Utilizar Skyfonts para mantenerlos actualizados.

Más adelante, también le mostraremos una forma de cargar estos archivos en su servidor y alojar las fuentes directamente en su sitio. Tenga esto en cuenta para el futuro. Por ahora, le mostraremos una segunda biblioteca de fuentes similar..

Fuente adicional para fuentes personalizadas

  • Más de 15 fuentes web seguras que recomendamos

Con lo anterior, deberías poder encontrar algo por ti mismo. Un último consejo: si no sabe cómo combinar correctamente las fuentes, use Par de fuentes donde los diseñadores han hecho el trabajo por ti.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
Like this post? Please share to your friends:
Adblock
detector
map