3 formas de cambiar la fuente en su sitio de WordPress

Publicado: 2022-11-05

Si desea cambiar la fuente en su sitio de WordPress, hay algunas formas de hacerlo. Una es instalando un complemento como Easy Google Fonts , que le dará una página de configuración donde puede seleccionar qué fuentes desea usar y dónde desea usarlas. Otra forma es editar el archivo CSS de tu tema para cambiar la fuente. Este es un método más avanzado y necesitarás saber algo de CSS para hacerlo. Si está utilizando Genesis Framework, hay una herramienta integrada para cambiar las fuentes. Para usarlo, vaya a Génesis > Configuración del tema y desplácese hacia abajo hasta la sección Fuentes. Desde allí, puede seleccionar qué fuentes desea usar para sus encabezados y cuerpo de texto.

¡Cree fuentes personalizadas para su tema infantil Confetti Genesis! Descargue y extraiga la fuente a su computadora según sea necesario. Para uso comercial, DaFont y FontSquirrel son excelentes recursos para fuentes gratuitas. Si prefiere una fuente más premium/distintiva, Creative Market es un buen lugar para comenzar. Los archivos deben ser cargados por usted. Puede hacerlo utilizando clientes FTP como FileZilla o Hosting File Manager. Para personalizar el CSS, ve a Apariencia. Usando cada archivo como una URL de origen, agregue la nueva URL creada a partir de los archivos que cargó. Cambiar el nombre de la fuente y la URL asegurará que el archivo de fuente de su servidor permanezca en el formato correcto.

¿Cómo agrego fuentes personalizadas al tema de WordPress?

Imagen por: https://wpbeginner.com

Hay algunas formas diferentes de agregar fuentes personalizadas a su tema de WordPress. Una forma es utilizar la biblioteca de Google Fonts . Puede navegar por la biblioteca y seleccionar las fuentes que desea usar en su sitio. Luego, puede agregar el código para esas fuentes a la hoja de estilo de su tema. Otra forma de agregar fuentes personalizadas a su tema de WordPress es usar un complemento como Easy Google Fonts. Este complemento le permite seleccionar las fuentes que desea usar y luego agregar el código a su tema automáticamente. Finalmente, también puede agregar fuentes personalizadas a su tema de WordPress cargando los archivos de fuentes a su servidor y luego agregando el código a la hoja de estilo de su tema.

Con el complemento de fuentes Easy Google, puede crear fuentes personalizadas para su sitio web de WordPress. Tendrá la oportunidad de mostrar impresionantes combinaciones de varias fuentes en su sitio web como resultado de este arreglo. Se ha demostrado que el uso de una tipografía adecuada tiene una serie de ventajas. Los clientes podrán comunicarse con usted de manera más efectiva si su sitio web es fácil de leer y usar. Además, las propiedades CSS se pueden usar para ajustar el estilo y la posición de la fuente que elija. Además, si tiene un complemento de WordPress, puede agregar sus propios controles de fuente haciendo clic en la página de configuración del complemento. Puede usar esto como una alternativa a las fuentes de Adobe si no desea usar un complemento.

El complemento Custom Adobe Fonts le permite incorporar fácilmente estas fuentes en su sitio de WordPress. Después de instalar el complemento, vaya a la extensa biblioteca de fuentes de Adobe para encontrar la fuente adecuada (debe registrarse para usarla). Una vez que haya seleccionado una fuente que le guste, puede agregarla a un proyecto web haciendo clic en el botón Agregar a la Web en la esquina superior derecha de la página. La herramienta Par de fuentes es una excelente manera de obtener una vista previa de las fuentes juntas para que pueda mezclarlas y combinarlas como mejor le parezca. Varios sitios web excelentes venden fuentes personalizadas diseñadas por diseñadores. Por ejemplo, la fuente Squirrel es una excelente opción para los desarrolladores porque tiene una gran biblioteca de fuentes y es fácil de implementar. @Font-Face tiene un kit de fuentes web para su uso.

Puede obtener el software desde su sitio web de WordPress. Cada kit incluye un archivo de fuente y una hoja de estilo que contiene el código que necesitará para crear su propia hoja de estilo CSS. Debemos usar el siguiente CSS para un ejemplo de la fuente OpenSans-ExtraBold-web. Lo mejor es guardar todos los archivos de fuentes en un directorio de su elección.

¿Cómo cambio la fuente en Genesis Framework?

Imagen por: https://realtydigitalmarketing.com

Si desea cambiar la fuente en su Genesis Framework, puede hacerlo yendo a la página Configuración de estilo en su Panel de WordPress. En esta página, encontrará un menú desplegable llamado "Familia de fuentes base". Desde este menú, puede seleccionar la fuente que desea usar para su sitio.

El tema de Génesis viene con una fuente de Google Source Sans Pro predeterminada. Primero debe editar la configuración de fuentes y los archivos styling.html de su sitio. Al cambiar la fuente, es fundamental guardarla haciendo clic en el botón Actualizar archivo en la parte inferior de la página. Agregue la fuente de Google a los temas de Genesis usando este tutorial. Puede cambiar el peso de la configuración de fuente de Google buscándola ('Fonts-url'). El siguiente ejemplo mostrará cómo agregar un peso de 500 a https://fonts.googleapis.com/CSS?family=Montserrat:400,400i,500,600,700&display=swap.

¿Cómo puedo aumentar el tamaño de fuente en Génesis?

El tamaño de fuente en este ejemplo es. El tamaño de fuente en la pantalla se puede configurar en cualquier número. Desplácese hacia abajo hasta la pantalla de configuración del tema/tema y toque [Tamaño de fuente].

¿Cómo cambio la fuente en mi tema?

Seleccione la fuente que desee en la pestaña Diseño de página en Excel o en la pestaña Diseño en Word. El tema actual tiene varias fuentes en la esquina superior izquierda. Cuando selecciona la opción personalizar fuentes, puede crear un conjunto personalizado de fuentes. Vaya al cuadro Crear nuevas fuentes de tema y elija la fuente que desee de los cuadros de fuentes de encabezado y cuerpo.

Las implicaciones del uso de Font:inherit

Si usa font:inherit en su página web, usará la misma fuente que el elemento principal, incluso si esa fuente no está declarada. Inherit puede ayudarlo a ahorrar tiempo y al mismo tiempo ahorrar dinero a largo plazo, pero tenga en cuenta sus posibles consecuencias.
Cuando la fuente de un elemento principal varía de la de su elemento secundario, font:inherit no se puede usar para modificarlo. Si utiliza la herencia para anular estilos que se definieron previamente en una hoja de estilo, los resultados pueden ser impredecibles.
Debe indicar explícitamente si desea o no usar la fuente utilizada en un elemento secundario cuando lo anule. Por ejemplo, puede utilizar la familia de fuentes Arial o el tamaño de fuente: x-grande; en el elemento hijo.
Si tiene font:inherit en su hoja de estilo, asegúrese de probarlo en su navegador para ver cómo afectará sus páginas. Actualice su hoja de estilo lo antes posible si planea cambiar la fuente en sus páginas.
El uso de fonts:inherit es fundamental para el diseño y la apariencia de cualquier sitio web, y es fundamental para comprender sus implicaciones. Cuando utilice esta declaración, todos los elementos descendientes utilizarán la misma fuente que sus elementos principales. Puede ahorrarle mucho tiempo de peinado, pero debe entenderse que también puede tener graves consecuencias. Si la declaración font:inherit no especifica la fuente del elemento secundario, no afecta al elemento principal. Para anular la fuente utilizada en un elemento secundario, declárelo explícitamente.