Cómo agregar fuentes personalizadas a WordPress

Si desea que su sitio realmente se destaque entre la multitud, el uso de fuentes personalizadas lo ayudará a lograrlo. Hay miles de hermosas fuentes personalizadas para elegir y, al seleccionar las adecuadas para su proyecto, podrá crear un sitio web que no solo sea único, sino que también refleje su estilo y marca. En este artículo, cubriremos todo lo que necesita saber sobre la aplicación de fuentes personalizadas en su sitio web. Esto incluye:
Donde encuentras fuentes personalizadas
Cómo agregar Fuentes de Google a su sitio utilizando el complemento Easy Google Fonts
Manual Agregar fuentes de Google a su sitio (no se requiere un complemento)
Agregar fuentes de Adobe a WordPress
Cómo agregar cualquier fuente personalizada a su espacio web
¿Estas listo para empezar?
¿Dónde puedes encontrar fuentes personalizadas?

Hoy en día, muchos temas premium de WordPress se entregan con una multitud de fuentes personalizadas. Sin embargo, a menudo pueden aumentar la hinchazón del tema e influir en los tiempos de carga de su sitio web más de lo que piensas. También descubrirá que realmente usa solo unas pocas fuentes personalizadas como máximo, por lo que la mayoría de las fuentes que su oferta de tema nunca será necesaria. Por lo tanto, le recomendamos que elija un tema ligero de WordPress, al que puede agregar fuentes personalizadas cuando sea necesario. Hay varios lugares donde puede encontrar las fuentes adecuadas adecuadas para su sitio web. Vamos a ver…
Google Fonts: la opción más popular, Google Fonts, ofrece a un director gratuito de más de 900 fuentes de diseñadores de código abierto que se pueden usar en más de 135 idiomas. Estas fuentes se pueden navegar rápidamente y luego integrarse perfectamente en cualquier diseño web. Adobe Creative Cloud Page pagado para acceder a este recurso. Hay miles de fuentes para elegir, todas las fuentes tienen licencia para uso personal y comercial y también puede seleccionar entre los paquetes de fuentes temáticas, que son perfectas para aquellos que carecen de un ojo para el diseño.
Font Squirrel: en la biblioteca de ardillas de fuentes encontrará una mezcla de fuentes gratuitas y premium, esta última que se puede comprar como compras únicas. Nuevamente, puede elegir entre miles de fuentes de alta calidad, la mayoría de ellas que son gratuitas y con una licencia comercial.
Fonts.com: ofreciendo más de 150,000 productos de escritorio y fuente web, Fonts.com contiene una impresionante colección de fuentes personalizadas premium. También encontrará una variedad de artículos interesantes en el blog de Font.com, compartiendo consejos y técnicas tipográficas.
Fontpair ofreciendo una experiencia ligeramente diferente de los otros recursos, Fontpair Couples Google Fonts Fonts, lo que le ayuda a encontrar las combinaciones de fuentes correctas para su sitio.
Así que ahora sabes dónde encontrar fuentes personalizadas. Veamos cómo agregar Google Fonts a su sitio de WordPress.
Cómo agregar Google Fonts a WordPress usando Google Fonts Google Fonts Plugin es el recurso más popular para fuentes personalizadas, comenzaremos viendo cómo agregar una fuente de esta biblioteca a su sitio web. Hay varias formas de hacer esto, pero la opción más rápida y fácil es usar WordPress Easy Google Fonts. Easy Google Fonts es un complemento gratuito de WordPress que le permitirá insertar fuentes personalizadas en su sitio de WordPress, sin tener que tocar una línea de código. Integrando con la personalización de WordPress, este complemento le permitirá insertar y usar Google Fonts en el front-end de su sitio, sin tener que actualizar la página.
Así que descubramos ahora cómo instalar y usar este complemento. Paso 1: Instale las fuentes fáciles de Google para comenzar con fuentes fáciles de Google, abra el tablero de WordPress y seleccione arados> Agregar nuevo en el menú. Luego ingrese las fuentes fáciles de Google en la búsqueda y, una vez que se haya tomado el complemento, haga clic en Instalación> Activación.

Ahora encontrará Google Fácil Fonts en la configuración del menú de WordPress. Paso 2: edite las fuentes en la aduana de WordPress después de instalar Funds fáciles de Google, desde la personalización de la selección del menú de WordPress. Su sitio web ahora se abrirá en el front-end, donde encontrará una sección de tipografía a la personalización.
Haga clic en Impresión. Luego puede seleccionar las diferentes áreas de su sitio. Desea aplicar una fuente de Google personalizada (por ejemplo, párrafo, encabezado 2, encabezado 3, etc.).

En la sección que desea editar, haga clic en Editar fuente. Luego, puede seleccionar la fuente que desea usar, podrá obtener una vista previa de cómo cada fuente se ve directamente en su sitio web. Solo puede cambiar el tipo de fuente, pero puede cambiar el color, el tamaño, el posicionamiento y más. Después de estar satisfecho con la nueva fuente, haga clic en Publicar. Paso 3: Crear comandos personalizados para los valores predeterminados de luz de fuentes Google Fonts le permitirá cambiar las fuentes de las secciones de párrafo y encabezado 1-6. Sin embargo, no todos los elementos de su tema pueden ser administrados por los controles de fuentes predeterminados.

Si desea cambiar otro elemento de su base (que no sea un párrafo o encabezado), deberá crear sus propias comprobaciones de fuentes personalizadas. Aunque Easy Font Control le permite hacer esto fácilmente, aún necesitará una comprensión básica de los selectores CSS. Para agregar comandos de fuentes personalizados, seleccione Configuración> Fuentes de Google en el tablero de WordPress. Luego, en la pestaña, edite el control de fuentes, brinde al nuevo grupo de control de fuentes un nombre apropiado, luego seleccione Crear fuente de control. Aquí crearemos un control de fuentes para citas …

En Agregar selectores CSS, agregue el selector CSS para el elemento que desea manejar. Puede agregar más de un elemento si lo desea. Luego seleccione Guardar fuente de control.

De vuelta en la aduana en el front-end de su sitio, en impresión, ahora encontrará la opción de tipografía, donde puede acceder a los nuevos pedidos personalizados.
Ahora puede seleccionar una nueva fuente personalizada para el elemento personalizado específico y puede cambiar cualquier otro aspecto y configuración de posicionamiento. Fuentes personalizadas de fácil es una excelente opción para cualquiera que quiera agregar fuentes personalizadas a Google. Sin embargo, si lo prefiere, puede agregar manualmente las fuentes de Google a su sitio usando solo código, sin complemento. Averigamos cómo hacer esto …

Cómo agregar manualmente las fuentes de Google a WordPress (no se requiere un complemento) Si prefiere agregar Google a WordPress, entonces necesitará conocimientos básicos de codificación.

Paso 1: seleccione una fuente de Google para iniciar, abra las fuentes de Google y seleccione el tipo de fuente personalizado que desea agregar en su sitio web. Luego, en la página de fuente, haga clic en Seleccione esta fuente. Aquí seleccioné la fuente de flores independientes.

Ahora aparecerá una ventana emergente en la pantalla. Dependiendo de la fuente que haya seleccionado, podrá acceder a una selección de opciones de personalización para los pesos y estilos de la fuente, así como para ver la información de incorporación.

Paso 2: Incorpore el código de fuente personalizado en su sitio de WordPress a continuación, deberá copiar el código de inserción (consulte la ventana de arriba) y insertarlo en su sección de WordPress. La forma más fácil de hacerlo es instalar el complemento de insertos y pies de página de WordPress gratis. Usando este complemento, puede agregar rápidamente código a su sitio web sin tener que editar los temas. Después de la instalación, abra la configuración del complemento seleccionando Configuración> Insertar un encabezado y un sótano en el tablero de WordPress. Luego debe agregar el código de incorporación de Google Fonts a la sección del encabezado. Además, si lo prefiere, puede editar el archivo Header.php de la base del niño. Paso 3: Aplique la nueva fuente usando CSS después de haber agregado el código HTML para su fuente personalizada a su sitio web, ahora puede usar CSS para aplicar la nueva fuente personalizada. En la ventana emergente de Google Font, encontrará las reglas CSS que son específicas de la nueva fuente.
De vuelta en el personalizador en el lado en vivo de su sitio, seleccione CSS adicional. Aquí puede ingresar el código CSS para personalizar las fuentes en su sitio a continuación.

El personalizador le mostrará cambios de fuentes en tiempo real y, si está satisfecho con los resultados, haga clic en la publicación. Cómo agregar fuentes de Adobe a WordPress Si se ha registrado en el paquete Adobe Premium Creative Cloud, entonces podrá agregar cualquiera de sus fuentes personalizadas a su sitio web de WordPress. Este proceso es muy similar a la adición manual de Google Fonts a su sitio para echar un vistazo rápido. Paso 1: Elija una fuente Adobe En primer lugar, deberá navegar por la biblioteca de fuentes de Adobe extendida y elegir una fuente para que coincida con su proyecto después de haber hecho una selección, haga clic en el icono para agregar la fuente a un nuevo proyecto web. Ahora se le pedirá que nombre su proyecto web, así como que use los cuadros de selección para seleccionar los pesos y los estilos de la fuente que desea incluir. Luego seleccione la creación del proyecto. Paso 2: incorpore el código de fuente Adobe en su sitio de WordPress El siguiente paso es incorporar el código Adobe para su fuente elegida en su sitio de WordPress. Sigue exactamente el mismo proceso que la incorporación del código de Google Fonts. Simplemente incorpore el código en la etiqueta en su sitio web o use los encabezados y los pies de inserción de WordPress (como se discutió anteriormente). Paso 3: Aplique la nueva fuente usando CSS nuevamente, al igual que Google Fonts, ahora puede aplicar la nueva fuente personalizada de Adobe. En el tablero de Adobe, la página web del proyecto enumerará el nombre de la familia Font CSS, así como el estilo de fuente y el peso numérico, para cada tipo de fuente que ha seleccionado.

Volver a su sitio web de WordPress, estas reglas CSS se pueden usar en una costumbre CSS adicional. Entonces, ahora he explicado cómo agregar fuentes personalizadas a WordPress usando fuentes de Google gratuitas muy populares, así como las impresionantes fuentes de adobe de recursos premium. Sin embargo, la última opción que discutiremos le permite agregar cualquier fuente personalizada a su sitio, cargándola en el servidor de su sitio para obtener más información. Cómo agregar una fuente personalizada a su espacio web Agregar una fuente personalizada a su espacio web es relativamente simple, pero nuevamente, necesitará una comprensión básica de CSS para aplicar la fuente a su sitio web. Paso 1: Descargue una fuente personalizada como se menciona al comienzo de este artículo, existen numerosos recursos en los que puede seleccionar aduanas gratuitas o premium para usarlas en su sitio web. Al elegir una fuente personalizada al agregar a su servidor, asegúrese de tener el derecho de usarla y que sea descargable. Aquí descargué la fuente de batido personalizada libremente de las fuentes de las ardillas.

Es importante descargar la fuente personalizada en un formato web. El formato de contenedor de fuente web de Woff disfruta de la mayor compatibilidad entre los navegadores, pero Google recomienda proporcionar más formatos para proporcionar una experiencia constante en los usuarios en todos los dispositivos. Si necesita convertir la fuente personalizada en otro formato, entonces Squirrel Font ofrece una herramienta de generador web gratuita que le permitirá hacerlo. Paso 2: Cargue la fuente personalizada en su servidor El siguiente paso es cargar la fuente personalizada en el servidor. Para hacer esto, abra el Administrador de archivos en el cpanel de su sitio. Luego, en la carpeta con temas activos, cree un nuevo archivo llamado fuentes y cargue la fuente personalizada aquí. Si tiene más formatos de fuentes, cargue todos en el fonturi carpeta. Su fuente personalizada ahora se ha agregado a su espacio web. Paso 3: Use CSS para aplicar la fuente personalizada a su sitio web ahora debe aplicar la fuente personalizada a su sitio web. Para empezar, debe cargar la fuente en la hoja de estilo. Para hacer esto, abra WordPress Customizer y bajo el CSS adicional agregue este código: @font-face {

Font-Family: batido;

Src: url (“https://jonesblogs.com/wp-content/themes/beautul-pro/fonts/milkshake.woff”)

formato (“woff”);

}

Importante, asegúrese de cambiar el nombre de fuente y la URL (copie la URL para el archivo de fuente en su servidor). Luego puede continuar y usar las reglas CSS para actualizar las fuentes en su sitio. Aquí hay un ejemplo sobre cómo aplicar la fuente personalizada al encabezado 3 y a las secciones del párrafo: después de que esté satisfecho con cómo se ve la nueva fuente personalizada. el sitio en su web, haga clic en Publicar. Pensamientos finales sobre cómo agregar fuentes personalizadas a WordPress Como puede ver, si está buscando una fuente personalizada agradable y atractiva, entonces hay muchos recursos que le permitirán encontrar la fuente perfecta para su proyecto y más, ahora está Armado con conocimiento sobre cómo agregar con éxito las fuentes personalizadas a WordPress. Entonces, ¿qué fuentes personalizadas elegirás? ¿Tiene alguna pregunta sobre cómo agregar fuentes personalizadas a WordPress? Pregunte en los comentarios a continuación …