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».

    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».

    haga clic para instalar el complemento WordPress Easy Google Fonts

    Cuando se haya instalado el complemento, haga clic en el botón «Activar».

    haga clic para activar el complemento WordPress Easy Google Fonts

    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».

    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».

    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 fuentes se agrupan 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».

    la sección "Tipografía" del tema

    Haga clic en el enlace «Tipografía predeterminada».

    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.

    haga clic en "Título 2"

    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.

    ver el cambio de fuente en el panel de vista previa

    Lo mismo se aplica a la fuente del párrafo. Simplemente haga clic en «Párrafo» y cambie la fuente.

    ver el cambio de fuente del párrafo en el panel de vista previa

    Cuando esté satisfecho con los cambios, haga clic en el botón «Publicar».

    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.

    fuente de la lista sin cambios

    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».

    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».

    haga clic en el botón "Crear control de fuentes"

    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».

    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».

    nueva sección de tipografía temática

    Haga clic en eso y verá los controles para el control de fuente personalizado que acabamos de agregar.

    los controles para el control de fuentes personalizadas

    Ahora, si cambiamos la configuración de «Familia de fuentes» para que coincida con la fuente del párrafo, tenemos una apariencia cohesiva agradable.

    cambie la fuente ul para que coincida con la fuente del párrafo

    Consejo profesional: cuando crea un control de fuente personalizado, puede agregar varios selectores de CSS a un control.

    agregue múltiples 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?