Cómo cambiar fácilmente una fuente en cualquier tema de WordPress
La tecnología para el uso de fuentes web se remonta a los años 90, pero no se generalizaron hasta 2010. Antes era posible cambiar la fuente en WordPress, pero era una tarea complicada y desafiante, y no todos los navegadores cooperarían.
Ahora puede usar fuentes personalizadas en WordPress e incluso extraer fuentes web del mismo servidor en el que se encuentra su sitio . Pero el uso más común de las fuentes web es llamarlas desde la fuente, que suele ser Google o Adobe.
En este tutorial, voy a hablar sobre Google Fonts, ya que son de uso gratuito y brindan cientos de excelentes fuentes para elegir. Mucha gente agrega Google Fonts manualmente, y ciertamente puedes hacerlo. No necesita un complemento para hacer el trabajo.
Todo lo que tiene que hacer para cambiar la fuente en WordPress es ir a Google Fonts y seleccionar la fuente junto con los estilos y conjuntos de caracteres que cree que podría usar, editar el archivo functions.php para "poner en cola" (¿eh?) las hojas de estilo con wp_enqueue_style, haga referencia a las fuentes en el archivo CSS de su tema, etc., etc.
Si bien las técnicas manuales para usar fuentes web son viables, ¿por qué pasar por todo eso? La forma más fácil de controlar el tamaño de fuente de WordPress (y el color y la decoración) es con el complemento Easy Google Fonts .
¿La capacidad de cambiar las fuentes en WordPress sin una sola edición manual de archivos? Es el sueño de un tweaker de temas hecho realidad.
Soy fanático de cualquier cosa que facilite la administración de un sitio web, y supongo que tú también lo eres. Entonces, probemos el complemento y veamos qué hace.
Instalación del complemento Easy Google Fonts
Inicie sesión en su panel de administración de WordPress.
En la columna de navegación de la izquierda, pase el mouse sobre el enlace "Complementos" y haga clic en el enlace "Agregar nuevo".
En el cuadro "Buscar complementos...", ingresa "Easy Google Fonts".
Una vez que haya localizado el complemento, haga clic en el botón "Instalar ahora".
Cuando se haya instalado el complemento, haga clic en el botón "Activar".
Uso de Easy Google Fonts para cambiar fuentes en WordPress
En la columna de navegación de la izquierda, pase el mouse sobre el enlace "Apariencia" y haga clic en el enlace "Personalizar".
Eso te lleva a la sección de personalización de tu tema. Los controles de Easy Google Fonts están en la sección "Tipografía".
Interrumpimos este tutorial para una palabra sobre las fuentes...
Está a punto de ver lo fácil que es usar una (o más) de cientos de fuentes web diferentes. Pero vale la pena recordar que solo porque es fácil usar las fuentes, no todas se crean por igual. Algunos se adaptan mejor a usos específicos que otros.
Si ha estado en el sitio web de Google Fonts , es posible que haya notado que las fuentes están agrupadas en categorías.
Las dos primeras categorías, Serif y Sans Serif, son donde debe buscar el texto principal de su sitio. Son legibles y se traducen bien en grandes bloques de texto. Pantalla , Escritura a mano y Monoespaciado son más apropiados para títulos o pequeños fragmentos de texto que desea resaltar o llamar la atención.
Google tiene un excelente artículo llamado Elección de fuentes web: una guía para principiantes . Vale la pena leerlo cuando quieras cambiar la fuente en WordPress, incluso si no eres un principiante en lo que respecta a las fuentes web.
Recuerde, el propósito del texto es comunicar ideas. O venda productos, ilumine a la gente de la tierra: cualquiera que sea su objetivo, la apariencia del texto nunca debe distraer la atención del mensaje.
Bien, ahora lo regreso a su tutorial programado regularmente.
Uso de fuentes web en su tema de WordPress
Haz clic en el enlace "Tipografía".
Haga clic en el enlace "Tipografía predeterminada".
Las opciones de personalización variarán según el tema que esté utilizando, pero siempre incluirán "Párrafos" y "Título 1", "Título 2", etc. La opción "Párrafos" controla la mayor parte del texto del sitio. Los diversos encabezados son esencialmente minitítulos a lo largo de su contenido.
Estoy usando el tema predeterminado de WordPress para esta demostración, y en ese tema, el título de la publicación es h2. Entonces, para cambiar todos los títulos de las publicaciones en el sitio, hago clic en "Editar fuente" en "Título 2" y realizo los cambios.
Entraremos en detalles sobre los controles en un minuto, pero para mostrar qué tan rápido puede hacer un cambio, en "Título 2", haré clic en "Familia de fuentes" y elegiré entre las fuentes de Google en el menú desplegable.
Puede ver en el panel de vista previa cómo se verá el cambio.
Lo mismo se aplica a la fuente del párrafo. Simplemente haga clic en "Párrafo" y cambie la fuente.
Cuando esté satisfecho con los cambios, haga clic en el botón "Publicar".
Como habrás notado, tenemos un pequeño problema con el cambio de fuente del párrafo. No cambió la fuente de la lista en la publicación.
Te mostraré cómo remediar eso, pero primero, profundicemos en las opciones de tipografía.
Opciones fáciles de tipografía de Google Fonts
Hay muchas opciones disponibles al hacer clic en el enlace "Editar fuente". Están distribuidos en tres pestañas, "Estilos", "Apariencia" y "Posicionamiento". Si conoce su HTML y CSS, sabrá lo que hacen la mayoría de estos. Pero vamos a repasarlos de todos modos.
La pestaña Estilos
- Script/Subconjunto
Estas son las diferentes opciones de codificación de idioma. Para inglés, solo necesita "Latín", pero en la mayoría de los casos, dejo este conjunto en "Todos los subconjuntos". - Familia de fuentes
Esta es la parte divertida, donde eliges entre las diferentes fuentes de Google. Recuerde, también puede cambiar esto para cada tamaño de encabezado, por lo que puede cambiar fácilmente la fuente del encabezado en WordPress con esta configuración. - Grosor/estilo de fuente
Controla la negrita de la fuente y si está en cursiva. - Decoración del texto
Subrayado, sobrerayado o tachado. - Transformación de texto
Forzar que todo el texto esté en mayúsculas, minúsculas o mayúsculas (lo que significa que cada palabra de cada oración está en mayúsculas).
La pestaña Apariencia
- Color de fuente
Controla el color de fuente de WordPress. Puede ingresar un valor hexadecimal o elegir entre un selector de color. - Color de fondo
Al igual que con el Color de fuente, aquí puede elegir un fondo para el texto del párrafo o encabezado. - Tamaño
de fuente
Configure el tamaño de fuente en píxeles. Sería genial si pudiera cambiar esto a una configuración em. Tal vez algún día agreguen esa opción (¡hola, Temas de titanio!). - Altura de línea
Aquí es donde controla cuánto espacio hay entre las líneas de un párrafo. Si tira del control deslizante hacia arriba y luego hacia abajo, puede obtener un ajuste por debajo de "1", pero de lo contrario, solo aumentará el espacio. Esta configuración está en valores em, no en píxeles. - Espaciado entre letras
Al igual que el control Altura de línea, puede mover el control deslizante hacia arriba y luego hacia abajo para obtener un valor negativo aquí, si desea que las letras estén más cerca unas de otras.
La pestaña de posicionamiento
- Margen
Controla el espacio alrededor del texto agregando espacio fuera del "cuadro" CSS en el que se encuentra el texto. - Relleno
Controla el espacio alrededor del texto agregando espacio dentro del "cuadro" CSS del texto. - Borde
Crea un borde alrededor del texto controlando los bordes superior, derecho, inferior e izquierdo individualmente. - Radio
del borde Use esto para redondear las esquinas de los bordes. - Mostrar
bloque o bloque en línea. Si no está seguro de cómo funcionan los bloques de visualización en CSS, es mejor dejar este control solo.
Cómo cambiar las fuentes en WordPress con controles de fuente personalizados
Tendrá que saber un poco sobre cómo se componen sus páginas y publicaciones para aprovechar los controles de fuente personalizados. Pero en su mayoría es HTML básico, como una lista desordenada es <ul>, una lista ordenada es <ol>, las comillas en bloque son <blockquote>, cosas así.
Como ejemplo, usaremos mi publicación anterior, donde cambiar la fuente del párrafo mostró que el cambio no afectó la fuente de la lista. Eso es porque en el HTML de la página, la lista (<ul>) aparece fuera de un párrafo (<p>). Otras cosas aparecerán fuera de los párrafos, como las citas en bloque antes mencionadas, etc.
Entonces, para hacer que el texto de la lista coincida con el texto del párrafo, en la navegación de la columna izquierda, pase el mouse sobre el enlace "Configuración" y haga clic en el enlace "Fuentes de Google".
Ingrese un "Nombre de control" (para esto, usaré "lista desordenada") y haga clic en el botón "Crear control de fuente".
En la sección "Agregar selectores CSS", ingrese la etiqueta HTML (sin los corchetes) para las listas desordenadas, que es "ul". Luego haga clic en el botón "Guardar control de fuentes".
Ahora, cuando volvamos al personalizador de temas, puede ver una nueva sección de Tipografía: "Tipografía de tema".
Haga clic en eso y verá los controles para el control de fuente personalizado que acabamos de agregar.
Ahora, si cambiamos la configuración de "Familia de fuentes" para que coincida con la fuente del párrafo, tenemos una apariencia cohesiva agradable.
Consejo profesional: cuando crea un control de fuente personalizado, puede agregar varios selectores de CSS a un control.
Entonces, si sabe que desea que todo el texto de su sitio coincida, puede cargar un solo control con todos los selectores de CSS que usa su tema.
Tamaño de texto de WordPress y la implacable marcha hacia las pantallas móviles
Somos amigos, así que puedo ser honesto contigo. Me resistí a aumentar el tamaño de mis fuentes, fuentes web y fuentes regulares durante mucho tiempo. Obstinadamente me limité a forzar el tamaño de píxel obsoleto porque quería controlar cómo veían mis sitios web los visitantes... independientemente de cómo decidieran ver los sitios.
Pero forzar tamaños de fuente pequeños en ventanas de visualización pequeñas, como teléfonos, solo perjudica a los sitios. Porque cuando las personas no pueden leer fácilmente el texto de su contenido, se van a pastos más fáciles de leer.
Como bien deberían.
Desde hace algún tiempo, la sabiduría predominante ha sido que el tráfico móvil eventualmente eclipsará el tráfico de escritorio. Pero en realidad, el tráfico móvil parece mantenerse estable en alrededor del 50 % en todo el mundo (40 % en EE. UU.).
Por lo tanto, si bien es posible que no tengamos que adoptar un enfoque de "primero los dispositivos móviles" para todo lo que se encuentra en la web, hacer que el tamaño de la fuente se adapte al tamaño de la pantalla de visualización es crucial para la mitad de su audiencia. Así que no se puede ignorar.
Todo lo cual es para decir, ¡no temas un tamaño de fuente más grande! Tus usuarios móviles te lo agradecerán.
No dejes que tus fuentes te frenen
Jugar con diferentes fuentes es divertido y puede ser tentador incorporar media docena de fuentes web diferentes en el diseño de su sitio. Sin embargo, recuerde que el uso de fuentes web aumenta el tiempo de carga de la página . Si sus archivos de fuentes son grandes o si usa muchas fuentes diferentes en una página, tendrán un impacto negativo en la velocidad de carga de la página.
Así que trate de mantenerlo simple con una fuente de título y una fuente para todo lo demás. Tal vez una fuente de cita en bloque diferente... entiendes la idea. Trate de mantener el uso de fuentes web al mínimo.
¿Ha agregado manualmente fuentes web a su sitio? ¿Consideras que aumenta el tiempo de carga de la página cuando miras las fuentes web?