Cómo cambiar las fuentes en WordPress para hacer que tu sitio web sea único

1645129811 Como cambiar las fuentes en WordPress para hacer que tu

Los días de una web basada en páginas blancas, texto negro y enlaces azules se desvanecen en la historia. En estos días, si quieres llamar la atención, tu sitio tiene que “rebotar”. JavaScript, CSS e imágenes contribuyen a que su sitio web sea atractivo. Las fuentes también agregan mucho a la apariencia distintiva de su sitio web.

Sin embargo, a diferencia de algunos de los otros elementos en su sitio, las fuentes pueden ser grandes cantidades de datos que, si no se manejan correctamente, pueden ralentizar la carga de su sitio. La velocidad es el rey en estos días, por lo que si bien es importante ser llamativo, debe asegurarse de no afectar la velocidad de su sitio al usar fuentes.

En este artículo, veremos las fuentes y cómo se relacionan con WordPress, cómo cambiar las fuentes en WordPress, cómo usar Google Fonts en WordPress y, finalmente, cómo puede organizar sus fuentes para que su sitio de WordPress se vea genial. sin afectar la velocidad.

Así que empecemos, ¿de acuerdo?

Índice

    Cómo agregar nuevas fuentes de WordPress a su sitio web

    1. Elija una fuente en el formato correcto

    El primer paso que debe hacer cuando trabaja con fuentes es seleccionar su fuente e incluirla en su sitio web. Si busca, encontrará muchas fuentes gratuitas disponibles para su uso. Estas fuentes vienen en una variedad de formatos. Debe asegurarse de que al seleccionar una fuente, elija una que esté disponible en el formato correcto. Como todo en la web, tienes opciones y no todas son iguales.

    • EOF: fuentes OpenType incrustadas

    Este formato es para fuentes OTF más compactas.

    • OTF: fuentes de tipo abierto

    Estas son las fuentes web más utilizadas.

    Este es un formato más antiguo desarrollado en la década de 1980 por Microsoft y Apple.

    • WOF 1.0: formato web de código abierto

    Este formato es muy utilizado para páginas web y es recomendado por el W3C.

    • WOFF 2.0: formato web de código abierto

    Esta es una mejor opción que WOFF 1.0 debido a sus mejores capacidades de compresión.

    Al momento de escribir este artículo, todos los formatos son compatibles con la versión actual de todos los navegadores modernos. (NOTA: Internet Explorer no es un navegador moderno).

    Todos los formatos anteriores funcionarán, pero por motivos de rendimiento, siempre que sea posible, utilice Fuentes WOFF2. Como están comprimidos, se cargan más rápido.

    2. Agregue la fuente de WordPress a su sitio

    Hay algunas formas diferentes de agregar fuentes personalizadas a su tema. Veamos dos opciones: cómo puede hacerlo manualmente y cómo puede hacerlo a través de temas y complementos.

    Opción 1: agregue fuentes manualmente a través del Administrador de archivos

    Primero, veámoslo de la manera difícil. cargarlos manualmente.

    Lo primero que tenemos que hacer es encontrar una fuente. Tengo uno de uno de mis sitios web personales, pero puedes buscar y encontrar uno que te guste.

    A continuación, debemos cargar el archivo de fuente real en nuestro sitio web. Dado que mi sitio de prueba está alojado en SiteGround, uso SiteTools->Administrador de archivos para hacer esto.

    Estoy usando el tema predeterminado actual de WordPress: twentytwentyone. Así que en ese directorio creo un directorio llamado "fuentes" y cargo mi archivo de fuente allí.

    A continuación, debemos decirle a nuestro tema que tiene una nueva fuente con la que trabajar. Hacemos esto con una sección @font-face en nuestra hoja de estilo.

    En@Tipo de letra {

    familia de fuentes: “ace_sansbold”;

    src: url('fuentes/acesans-bold-webfont.woff2') format('woff2');

    peso de fuente: normal;

    estilo de fuente: normal;

    }

    Esto le dice a nuestro tema que hay una nueva familia de fuentes llamada ace_sansbold y que se puede cargar desde fonts/acesans-bold-webfont.woff2.

    Te puede Interesar  Qué es un contenido de calidad según nuestro director de Marketing

    Todo está muy bien, pero tener una fuente no hace la diferencia, tenemos que aplicar la fuente. Quiero que esta fuente se use en el título de mi sitio. Para ello, buscamos el selector de estilo utilizado para ello y lo cambiamos.

    En 221, este es el selector de título para .site-title. Por defecto se ve así:

    .Título del sitio {

    color: var(–branding–color-link);

    familia de fuentes: var(–branding–title–font-family);

    tamaño de fuente: var(–branding–title–font-size-mobile);

    espacio entre letras: normal;

    transformación de texto: var(–marca–título–transformación de texto);

    line-height: var(–global–line-height-heading);

    margen inferior: calc(var(–global–spacing-vertical) / 6);

    }

    Queremos hacer un cambio. Queremos cambiar la familia de fuentes para esto.

    familia de fuentes: “ace_sansbold”;

    Esto le indicará a nuestro tema que use nuestra nueva fuente en lugar de la seleccionada en el personalizador de temas. El resultado final se verá así:

    .Título del sitio {

    color: var(–branding–color-link);

    familia de fuentes: “ace_sansbold;

    tamaño de fuente: var(–branding–title–font-size-mobile);

    espacio entre letras: normal;

    transformación de texto: var(–marca–título–transformación de texto);

    line-height: var(–global–line-height-heading);

    margen inferior: calc(var(–global–spacing-vertical) / 6);

    }

    Este es el título de mi sitio antes de agregar la fuente.

    1645129810 222 Como cambiar las fuentes en WordPress para hacer que tu

    Después de seguir las instrucciones anteriores, se ve así:

    1645129810 790 Como cambiar las fuentes en WordPress para hacer que tu

    Opción 2: agregue y edite fuentes a través de temas y complementos

    De acuerdo, lo hicimos de la manera difícil, ahora echemos un vistazo a la manera fácil, que es aprovechar los temas y los complementos para agregar fuentes fácilmente a su sitio web.

    Cómo agregar fuentes usando el Editor de temas

    La mayoría de los temas modernos tienen alguna forma de agregar fuentes y asignarlas a partes del sitio. Uso el tema Astra WordPress en uno de mis sitios web y viene con una función llamada "Fuentes personalizadas". En lugar de tener que aplicar manualmente el código CSS y cargar archivos, obtengo un formulario simple que me permite agregar o editar fuentes.

    1645129810 189 Como cambiar las fuentes en WordPress para hacer que tu

    Después de guardarlo, todo se maneja automáticamente para mí. La fuente no solo está colocada donde debería estar y es fácilmente accesible, sino que las nuevas fuentes ahora aparecen en mi Editor de temas, listas para que las use. ¡Sin trucos de CSS!

    1645129810 403 Como cambiar las fuentes en WordPress para hacer que tu

    Como beneficio adicional, Astra viene lista para usar cualquiera de las fuentes de Google. Ya están programados y listos para que los uses.

    Cómo agregar fuentes usando los complementos de fuentes de WordPress

    Si su tema actual de WordPress no incluye fuentes listas para usar, todavía hay opciones como complementos gratuitos.

    complemento de fuentes

    “Fonts Plugin” ofrece todas las fuentes de Google listas para usar en WordPress. Además, le permitirá ingresar su clave API de Adobe, si tiene una, para usar también todas las fuentes de Adobe.

    Una de las cosas que este complemento no hará es permitirle cargar fuentes personalizadas como se describe anteriormente. La versión pro puede permitirle hacer esto, pero la documentación no es clara en este punto.

    Una característica muy buena de este complemento es que ofrece un nuevo bloque de Gutenberg llamado bloque "Google Fonts". Esta es una extensión del blog Paragraph y le da la opción de seleccionar una fuente para el bloque. Cambiar las fuentes de un elemento de texto en Gutenberg es difícil. Es bueno ver a alguien darse cuenta de eso.

    Hay otros complementos que puede usar para agregar fuentes al tema de su sitio de WordPress existente. Eche un vistazo rápido al repositorio de complementos de WordPress y encontrará varios que harán el trabajo.

    Artículos Relacionados

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada.

    Subir

    Utilizamos cookies para asegurar que damos la mejor experiencia al usuario en nuestra web. Si sigues utilizando este sitio asumiremos que estás de acuerdo. Más Información