Cómo cambiar las fuentes en WordPress


Una excelente manera de agregar algo de marca e individualismo a su sitio de WordPress es cambiar las fuentes en su tema.

La tipografía y otros elementos de bandas crean una buena primera impresión, crean el ambiente para los visitantes de su sitio y establecer la identidad de su marca. Estudios también han descubierto que las fuentes afectan la capacidad de los lectores para aprender, recordar información y memorizar textos.

Si solo instaló un tema de WordPress o tiene algo de experiencia en CSS y codificación, le mostraremos varias opciones que puede usar para cambiar las fuentes en WordPress.

Cómo cambiar las fuentes en WordPress

Hay tres opciones principales disponibles para cambiar las fuentes en WordPress:

  • Utilice fuentes web como Fuentes de Google, Fonts.com o Fuentes web de Adobe Edge, que están alojados en un sitio de terceros
  • Codifique fuentes web en su tema y colóquelas en cola
  • Aloje fuentes en su sitio y agréguelas a su tema
  • 1. Cómo cambiar fuentes en WordPress usando fuentes web

    Usar fuentes web es una forma más fácil y rápida de cambiar fuentes en WordPress que descargar y cargar archivos de fuentes.

    Con esto opción, puede acceder a una variedad de fuentes sin actualizarlos cada vez que haya un cambio, y no acapara espacio en el servidor de su alojamiento. Las fuentes se ofrecen directamente desde los servidores del proveedor mediante un complemento o agregando código a su sitio.

    In_content_1 all: [300x250] / dfp: [640x360]->

    Asegúrese de que las fuentes web que elija para su sitio coincidan con la identidad de su marca, sean fáciles de leer para el texto del cuerpo, sean familiares para los visitantes del sitio web y transmitan el tipo de estado de ánimo e imagen que usted que desee.

    Puede agregar fuentes web usando un complemento de WordPress o manualmente agregando algunas líneas de código a su sitio. Exploremos ambas opciones.

    Cómo agregar fuentes web usando un complemento de WordPress

    Dependiendo de la fuente web que haya elegido, puede usar una fuente de WordPress plugin para acceder a la biblioteca de fuentes y elegir la que desee en su sitio. Para esta guía, elegimos Google Fonts y usamos el complemento Tipografía Fuentes de Google.

    1. Para comenzar, inicie sesión en su panel de administración de WordPress y seleccione Complementos>Agregar nuevo.
      1. Escriba Google Fonts Typographyen el cuadro de búsqueda y seleccione Instalar ahora.
        1. Seleccione Activar0000-.
          1. Luego, acceda al Personalizadoryendo a Apariencia>Personalizar.
            1. Seleccione la sección Fuentes de Google.
              1. A continuación, haz clic en el enlace para abrir la configuración de las fuentes y configúralas de la siguiente manera:
                • En Configuración básica, establece la fuente predeterminada para tu cuerpo. texto, encabezados y botones.
                  • En Configuración avanzada, configure el título y la descripción de su sitio texto, menú, encabezados y contenido, barra lateral y pie de página.
                    • Desmarque los pesos de fuente no deseados en la sección Carga de fuentespara evite ralentizar su sitio.
                    • Si hay fuentes en su sitio que no se muestran o no funcionan correctamente, use la sección Depuraciónpara solucionar problemas.

                      1. Puedes probar estas configuraciones en el Personalizador para asegurarte de que funcionan como quieres y luego seleccionar Publicar.
                      2. Nota: si si olvida seleccionar publicar en el Personalizador, perderá todos los cambios que ha realizado.

                        Cómo agregar fuentes web mediante código

                        Usted puede instalar y utilizar fuentes web si tiene acceso al código de su tema. Esta es una alternativa manual a agregar un complemento adicional, pero no es complicado si sigue los pasos con cuidado.

                        Sin embargo, hay diferentes pasos que debe seguir si está usando un tema del directorio de temas de WordPress o un tema personalizado.

                        Si compró un tema del directorio de temas de WordPress, crear un tema hijo y luego dele el archivo style.css y functions.php. Es más fácil si tiene un tema personalizado, ya que puede editar la hoja de estilo y el archivo de funciones de su tema.

                        1. Para comenzar, seleccione una fuente de la biblioteca Fuentes de Google, y seleccione el icono + (más)para agregarlo a su biblioteca.
                          1. Luego, seleccione la pestaña en la parte inferior donde encontrará el código para agregar a su sitio. Vaya a la sección Insertar fuenteen la pestaña Insertar. Encontrará el código generado por Google Fonts, que se parece a esto:
                          2. Nota: Elegimos Work Sans para esta guía, por lo que la fuente el nombre puede ser diferente al tuyo dependiendo de lo que hayas elegido.

                            1. Copia esta parte del código: https://fonts.googleapis.com/css2?family = Work + Sans
                            2. Esto le permite poner en cola el estilo de los servidores de Google Fonts para evitar conflictos con complementos de terceros. También permite modificaciones más sencillas del tema hijo.

                              1. Para poner en cola la fuente, abra el archivo de funciones y agregue el siguiente código. (Reemplace el vínculo con el vínculo que obtiene de Google Fonts):
                              2. función wosib_add_google_fonts () {
                                wp_register_style ('googleFonts', ' https://fonts.googleapis.com/css?family=Work Sans ');

                                wp_enqueue_style (' googleFonts ');
                                }

                                add_action ('wp_enqueue_scripts', 'mybh_add_google_fonts');

                                1. Puede agregue una nueva línea a su función o a la misma línea si desea agregar más fuentes en el futuro de la siguiente manera:
                                2. función mybh_add_google_fonts () {
                                  wp_register_style ('googleFonts', 'https://fonts.googleapis.com/css?family=Cambria|Work Sans');

                                  wp_enqueue_style ('googleFonts') ;

                                  add_action ('wp_enqueue_scripts', 'mybh_add_google_font s ');

                                  En este caso, hemos puesto en cola las fuentes Cambria y Work Sans.

                                  El siguiente paso es agregar las fuentes a la hoja de estilo de su tema para haga que la fuente funcione en su sitio.

                                  1. Para hacer esto, abra el archivo style.css de su tema y agregue el código para diseñar elementos individuales con sus fuentes web de la siguiente manera:
                                  2. cuerpo {
                                    font-family: 'Work Sans', sans-serif;

                                    h1, h2, h3 {
                                    familia de fuentes: 'Cambria', serif ;

                                    En este caso, la fuente principal será Work Sans mientras que los elementos de encabezado como h1, h2 y h3 usarán Cambria.

                                    Una vez hecho esto, guarde la hoja de estilo y verifique si sus fuentes funcionan como deberían. De lo contrario, compruebe que las fuentes no se anulan en la hoja de estilo o borre la memoria caché del navegador y vuelva a intentarlo.

                                    1. Tenga una fuente de respaldo para asegurarse Las fuentes se pueden procesar o acceder fácilmente, especialmente para usuarios con dispositivos antiguos, conexiones deficientes o si el proveedor de fuentes tiene problemas técnicos. Para hacer esto, vaya a la hoja de estilo y edite el CSS para que se lea de la siguiente manera:
                                    2. body {
                                      font-family: 'Work Sans ', Arial, sans-serif;

                                      h1, h2, h3 {
                                      fuente -family: 'Cambria', Times New Roman, serif;

                                      Si todo está bien, los visitantes de su sitio verán sus fuentes web predeterminadas, en nuestro caso Work Sans y Cambria. Si hay problemas, verán las fuentes de respaldo, por ejemplo, Arial o Times New Roman en nuestro caso.

                                      2. Cómo cambiar fuentes en WordPress alojando fuentes

                                      Alojar fuentes en sus propios servidores le ayuda a optimizar el rendimiento de sus fuentes web, pero también es una forma más segura hacerlo en lugar de extraer recursos de sitios de terceros.

                                      Las fuentes de Google y otras fuentes web le permiten descargar fuentes para usarlas como fuentes alojadas localmente, pero aún puede descargar otras fuentes a su computadora siempre que las licencias lo permitan para hacerlo.

                                      1. Para comenzar, descargue, descomprima, cargue el archivo de fuente en su sitio y luego vincúlelo en su hoja de estilo. En este caso, no tiene que poner en cola las fuentes en el archivo functions.php como lo hizo con las fuentes web. Confirme que los archivos que está cargando estén en formato .woff antes de usarlos en su sitio web.
                                        1. Luego, vaya a wp-content / themes / themenamepara cargar el archivo de fuente a su tema.
                                        2. Abra la hoja de estilo y agregue el siguiente código (en este caso estamos usando la fuente Work Sans, pero puede reemplazarla con sus propias fuentes):
                                        3. @ font-face {
                                          font-family: 'Work Sans';
                                          src: url (“fonts / Work Sans-Medium.ttf”) formato ('woff'); / * medium * /
                                          font-weight: normal;
                                          font-style: normal;
                                          }

                                          @ font-face {
                                          font-family: 'Work Sans';
                                          src: url ( Formato "fuentes / Work Sans-Bold.ttf") ('woff'); / * medium * /
                                          font-weight: bold;
                                          font-style: normal;
                                          }

                                          @ font-face {
                                          font-family: 'Cambria';
                                          src: url (“ fonts / Cambria.ttf ”) formato ('woff'); / * medium * /
                                          font-weight: normal;
                                          font-style: normal;
                                          }

                                          Nota: usar @fontface le permite usar negrita, cursiva y otras variaciones de su fuente, después de lo cual puede especificar el peso o el estilo de cada fuente.

                                          1. Luego, agregue estilo a sus elementos de la siguiente manera:
                                          2. body {
                                            font-family: 'Work Sans ', Arial, sans-serif;
                                            src: url (“/ fonts / Work Sans-Medium.ttf”);
                                            }

                                            h1, h2, h3 {
                                            familia de fuentes: 'Cambria', Times New Roman, serif;
                                            }

                                            Personalice su tipografía de WordPress

                                            Cambiar las fuentes en WordPress es una gran idea para mejorar la marca y la experiencia del usuario. No es una tarea sencilla, pero tendrás más control sobre tu tema.

                                            ¿Pudiste personalizar las fuentes de tu sitio siguiendo los pasos que siguen los consejos de esta guía? Cuéntanos en los comentarios.

                                            Related posts:


                                            14.11.2020