C贸mo cambiar su “fuente” o fuente en WordPress ?

La mayor铆a de los temas de WordPress vendidos en el mercado le ofrecen un mont贸n de opciones de personalizaci贸n, la mayor铆a de las cuales, la elecci贸n de escribir fuente o “hacer” en ingl茅s …

Sin embargo, estos temas generalmente le permitir谩n elegir su fuente en la biblioteca Google Font. Pero, 驴qu茅 pasa con su propia pol铆tica que compr贸? en un sitio dedicado ? Sabes, LA es lo que te enamoraste y no parece otro ?

Veremos juntos c贸mo modificar la fuente de escritura de su sitio de WordPress de acuerdo con varios m茅todos …

WordPress-une personalizado

D贸nde encontrar una fuente / fuente original ?

Es cierto que antes de comenzar a hablar sobre el m茅todo de agregar una fuente, ser铆a bueno comenzar por encontrar una …

Si realmente no sabe d贸nde buscar, le sugiero que explore el lado de los sitios donde los dise帽adores dirigen una tienda. La lista es larga, pero generalmente encontr茅 mi felicidad Mercado creativo, El Jpeg hambriento, Typekit o MyFonts

Tambi茅n puede usar fuentes gratuitas disponibles para descargar en sitios como Dafont o FontSquirrel pero no debe olvidar verificar su licencia antes de operarla … De lo contrario, siempre puede usar la biblioteca que ofrece Fuente de Google.

Tienda de mercado creativo

C贸mo integrar una fuerza policial en WordPress ?

Opci贸n 1: el m茅todo @font-face

Esta es una regla disponible de CSS3 que le permite definir y proporcionar la fuente contenida en sus p谩ginas web; Por lo tanto, los navegadores ya no depender谩n de las fuentes instaladas en las computadoras de sus lectores.. Con este m茅todo, todo est谩 permitido: puede integrar cualquier fuente en su sitio …

PASO 1: recoge todos los archivos necesarios

Una vez que haya encontrado la fuente ideal, deber谩 descargar todos los archivos necesarios. Necesitar谩s :

  • de un archivo Embedded OpenType Font (.eot)
  • de un archivo gr谩fico vectorial escalable (.svg)
  • de un archivo Police TrueType (.ttf)
  • desde un archivo web Open Font Format (.woff)
  • desde un archivo web Open Font Format 2.0 (.woff2)

Debe saber que si compra una fuente premium, debe entregarse con todos estos archivos … Por otro lado, si descarga una fuente gratuita a Dafont, por ejemplo, es probable que obtenga solo uno de estos archivos. Luego puede intentar convertir sus archivos gracias a un generador en l铆nea como el ofrecido por Fontsquirrel.

Webfont generador Fontsquirrel

PASO 2: env铆e los archivos a su servidor

Idealmente, previamente habr谩 creado un tema para ni帽os para que la pr贸xima actualizaci贸n de su tema no sobrescriba sus modificaciones. Para esto, no dude en leer este tutorial dedicado a temas infantiles. Luego, simplemente enviar谩 los 5 archivos (.eot, .svg, .woff, .woff2, .ttf) a la ra铆z del tema de sus hijos, o a una carpeta que podr铆a nombrar “Fuentes”, a trav茅s de FTP utilizando una herramienta como Filezilla, por ejemplo.

PASO 3: conecta la nueva fuente a tu tema

Este paso es muy simple, solo necesita agregar al archivo style.css del tema de sus hijos estas pocas l铆neas de c贸digo :

@font-face {
font-family: 鈥wpf‘;
src: url (鈥wpf.eot ‘);
src: url (鈥wpf.eot?Formato #iefix 鈥) (鈥 bedround-opentype 鈥欌),
url (鈥wpf.woff2 鈥) formato (“woff2”),
url (鈥wpf.woff 鈥) formato (鈥 woff 鈥),
url (鈥wpf.ttf 鈥) formato (鈥 truetype 鈥),
url (鈥wpf.svg # svgwpf鈥) formato (鈥 svg 鈥) ;
}

Para este ejemplo, mi fuente se llama “wpf”, por lo que solo tiene que cambiarla por el nombre de su fuente. Aseg煤rese de respetar las letras may煤sculas, espacios, etc

C贸digo CSS para hecho a medida

PASO 4: llama a la polic铆a

Ahora que el tema de sus hijos contiene los archivos policiales y su archivo style.css est谩 conectado a 茅l usando el m茅todo @font-face, solo necesita llamar para hacerlo en las etiquetas deseadas. Para mi ejemplo, apliqu茅 mi nueva fuente solo en mis t铆tulos con este c贸digo:

h1, h2, h3, h4, h5, h6 {
font-family: “wpf”, Arial, sans-serif !importante;
}

Nota: [!important] no es obligatorio, agr茅guelo si el hecho no se tiene en cuenta.

Con este m茅todo, puede decidir importar varias fuentes diferentes y asignarlas solo a ciertas etiquetas o clases predefinido y as铆 dejar tu imaginaci贸n libre !

Modificaci贸n de la polic铆a

Opci贸n 2: use la biblioteca Google Font

Es posible que deba usar esta biblioteca si su tema no ofrece esta funci贸n, si no desea comprar su polic铆a o simplemente porque encontr贸 su felicidad en esta biblioteca … Su ventaja es que su sitio lo usar谩 almacenado en l铆nea en Google Font y, por lo tanto, no necesita descargar los archivos famosos a su tema de WordPress.

Representaci贸n visual de Google Font

PASO 1: elija su fuente Google Font

Este paso es bastante l贸gico ! Para esto, solo tendr谩 que ir al sitio de Fuentes de Google y detecta la fuente ideal. Una vez encontrado, solo tendr谩 que hacer clic en el peque帽o “+” ubicado en la parte superior derecha de la fuente en cuesti贸n. Luego aparece una peque帽a ventana emergente discreta en la parte inferior de la pantalla, haga clic en ella para implementarla. Estaremos interesados en la pesta帽a “embed”.

Obtenga la fuente de Google

PASO 2: conecta la fuente de Google a tu tema

Para este paso, deber谩 duplicar el archivo header.php del tema de tus padres. Modifique esta copia (con un editor de texto como Texto sublim por ejemplo) insertando la l铆nea de c贸digo propuesta por Google Font entre las etiquetas y de este archivo. Guarde este archivo y env铆elo, a trav茅s de FTP, a la carpeta de temas de sus hijos.

Para mi ejemplo, la l铆nea de c贸digo que insert茅 es la siguiente:

Fuente de Google Paso 4

PASO 3: llame a Google Font

En cuanto al m茅todo @font-face, todo lo que tiene que hacer es llamar a su polic铆a asign谩ndolos a las etiquetas deseadas en el archivo style.css del tema de tus hijos. Para esto, necesitar谩 la segunda informaci贸n proporcionada por el sitio de Google Font en la secci贸n “Especificar en CSS”Para mi ejemplo, decid铆 aplicar esta fuente a todo mi sitio, es decir, en la baliza. “Cuerpo” con el siguiente c贸digo :

cuerpo {
font-family: “Raleway”, sin serif !importante;
}

C贸digo CSS Google Font

Nota: [!important] no es obligatorio, agr茅guelo si el hecho no se tiene en cuenta.

Opci贸n 3: usar un complemento

Esta opci贸n no es la mejor para mi gusto, pero puede ser adecuada para usted si a煤n no se siente listo para crear un tema para ni帽os y / o manipular c贸digo … Por lo tanto, hay un complemento que le ofrece cambiar sus fuentes sin codificar, esto es USAR CUALQUIER FIN .

Plugin WordPress Use cualquier fuente

Solo necesita instalar este complemento freemium a trav茅s del cat谩logo de complementos de WordPressCuando lo active, ver谩 que aparecen nuevas opciones en la barra de herramientas del art铆culo o editor de p谩ginas que le permiten elegir entre una de las pocas fuentes b谩sicas disponibles ….

Polic铆a b谩sica Use cualquier fuente

Por otro lado, ser谩 necesario obtener una clave API mediante la creaci贸n de una cuenta gratuita o de pago (a elecci贸n) para poder descargar su propia fuente … Llegar谩 r谩pidamente a la versi贸n paga ya que la versi贸n gratuita le permitir谩 usar solo una fuente … Meditar …

Usa cualquier fuente api-key

Opci贸n 4: su tema premium ofrece esta opci贸n

Si planea usar un tema de WordPress Premium, tenga en cuenta que algunos de ellos ofrecen la opci贸n de integrar su propia fuente. Descargas para cada archivo (.eot, .svg, etc …) est谩n previstos en la configuraci贸n del tema … Este es el caso, por ejemplo de Avada, de BeTheme, de TheGem etc …

En conclusi贸n…

En una sociedad donde el aspecto visual juega un papel preponderante, el uso adecuado de las fuentes de escritura originales ya es un buen comienzo para destacarse del vecino ! Adem谩s, has visto que no es muy complicado … Entonces, a tus teclados !

cerrado

Te puede interesar:  Widget de 煤ltimas entradas con im谩genes en WordPress

Deja una respuesta

Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *

Share This