Por supuesto, hay diferentes complementos para usar Google Web Fonts en su sitio de WordPress, pero si está desarrollando su propio tema, es posible que deba acoplar estrechamente la tipografía elegida, sin pasar por los complementos. A continuación, le mostraremos cómo usar Google Web Fonts en su tema.

Primero, vamos al sitio Fuentes web de Google y seleccione la fuente que necesitamos aplicar en el tema. Con la ayuda de herramientas especiales ubicadas en el lado izquierdo, puede reducir el área de búsqueda, ya que en realidad hay muchas fuentes. Sabía que necesitaba una fuente serif en negrita para los títulos y el título del blog, así que seleccioné serif en el menú desplegable Categorías y luego moví el control deslizante Grosor hacia la derecha.

Al final, las 617 opciones que me ofrecieron se redujeron sin problemas a 5. Tiene bastantes opciones para obtener una vista previa de las fuentes: puede ver cómo se verá una palabra, oración, párrafo de texto o póster en la fuente seleccionada. Puede elegir texto predefinido, puede configurar su propio texto, elegir el tamaño de fuente deseado.

Una vez que haya encontrado la fuente que desea usar en su sitio, simplemente haga clic en el botón Agregar a la colección.

Puede agregar docenas de fuentes a su colección. Sin embargo, esto no siempre es necesario. El hecho de que puedas hacerlo no significa que debas hacerlo. Trate de limitarse a un máximo de tres fuentes. Mejor aún, dos. Por motivos de rendimiento, sigo prefiriendo utilizar la fuente heredada segura para la web para el cuerpo del texto del sitio y conservar las fuentes web para los encabezados y otros elementos que requieren especial énfasis o atención. Tenga cuidado con la legibilidad de sus fuentes: no use una fuente llamativa si sus visitantes no pueden distinguir lo que está escrito.

Cuando agregue sus fuentes a la colección, las verá en la sección azul en la parte inferior del sitio. Una vez que tenga las fuentes que desea usar en su colección, simplemente haga clic en el botón Usar.

Después de eso, será llevado a una pantalla que presentará una instrucción de cuatro pasos. A partir de él, aprenderá a usar las fuentes. Si desea descargar las fuentes seleccionadas para usarlas en un editor gráfico, evaluarlas o tomar una captura de pantalla.png atractiva para su tema, solo tiene que hacer clic en el botón Descargar fuentes en la parte superior de la página. Si solo desea usar la fuente en su tema, entonces no necesita descargarla a su computadora.

En el primer paso, puede elegir los estilos y el peso de la fuente incluida. En el segundo paso, puede seleccionar el conjunto de caracteres que desea incluir. También puede evaluar cómo su colección de fuentes afectará la velocidad de carga de la página.

Ahora pasamos al tercer paso, que no es tan fácil como los anteriores. En el tercer paso, obtenemos el código que debe agregarse a nuestros sitios: tres opciones diferentes. Al seleccionar la opción Estándar, sin embargo, nos desviaremos un poco de las pautas de Google para respaldar los métodos establecidos para agregar estilos a los temas de WordPress. En el código de la versión estándar, copiamos solo la URL que se especifica como atributo href para la etiqueta de enlace.

Luego abra el archivo functions.php del tema. Crearemos una función para cargar el CSS que usaremos en nuestro tema:

Función ggl_load_styles() ( )

¿Ves el prefijo ggl en mi función? Esta es una de las prácticas exitosas de WordPress. Siempre anteponga los nombres de sus funciones de WordPress para reducir el riesgo de conflictos con otras funciones en su tema, tema secundario o complementos.

Ahora en esta función, necesitamos registrar nuestra hoja de estilo recibida de Google:

Función ggl_load_styles() ( if (!is_admin()) ( wp_register_style("googleFont", "http://fonts.googleapis.com/css?family=Holtwood+One+SC|Rouge+Script"); ) )

Estamos usando la función wp_register_style. El primer argumento es un descriptor, es decir, abreviatura que podemos usar para referirnos a esta hoja de estilo más adelante en nuestro código. El segundo argumento es la ruta al archivo. Estamos utilizando la URL que recibimos en el tercer paso de las instrucciones de Google.

A continuación, incluimos nuestra hoja de estilo principal para nuestro tema. Espero que no hayas puesto una etiqueta de enlace en la sección principal de tu archivo header.php. Si es así, vuelva al archivo y elimine este código. Luego incluya la hoja de estilo en el archivo functions.php:

Función ggl_load_styles() ( if (!is_admin()) ( wp_register_style("googleFont", "http://fonts.googleapis.com/css?family=Holtwood+One+SC|Rouge+Script"); wp_enqueue_style("ggl ", get_stylesheet_uri(), array("googleFuente")); ) )

Estamos usando la función wp_enqueue_style. Tiene los mismos argumentos que wp_register_style. Primero, vinculamos un descriptor a nuestra hoja de estilo. Luego obtenemos la ruta a nuestra hoja de estilo. Afortunadamente, en WordPress, puedes obtener la ruta usando la función get_stylesheet_uri(). Luego especificamos las dependencias. Nuestro archivo style.css depende de la hoja de estilo de Google Web Fonts.

Finalmente, usamos el gancho wp_enqueue_scripts para llamar a nuestra función:

Función ggl_load_styles() ( if (!is_admin()) ( wp_register_style("googleFont", "http://fonts.googleapis.com/css?family=Holtwood+One+SC|Rouge+Script"); wp_enqueue_style("ggl ", get_stylesheet_uri(), array("googleFont")); ) ) add_action("wp_enqueue_scripts", "ggl_load_styles");

El archivo functions.php está listo. Ahora tenemos que dar el último paso para usar la fuente seleccionada. El cuarto paso en las instrucciones de Google muestra qué valores debemos pasar a la propiedad font-family para poder usar nuestra fuente. Quiero hacer todos mis títulos en fuente Holtwood One SC:

h1, h2, h3, h4, h5, h6 (familia de fuentes: "Holtwood One SC", serif;)

Y quiero hacer la descripción del sitio en la fuente Rouge Script:

Descripción del sitio (familia de fuentes: "Rouge Script", cursiva;)

¡Todo! ¡No hay que hacer nada más! Ha agregado Google Web Fonts a su tema de WordPress. ¡Úsalos responsablemente!

Vlad Merzhevich

La fuente es una parte integral del diseño web, le da al sitio expresividad y reconocimiento, expresa el estilo característico del sitio y está directamente relacionada con la percepción de los textos. Es posible que no se note una fuente bien elegida, pero sin ella no habrá entusiasmo que complete el diseño del sitio.

Si ya tiene una fuente específica instalada en su computadora, simplemente agregue una línea en los estilos.

h1 (familia de fuentes: SuperPuperFont;)

El valor de la propiedad font-family es el nombre de la familia de fuentes, se aplicará a todos los encabezados

. Pero, ¿qué verán los visitantes del sitio si no tienen instalada nuestra espectacular y rara fuente? Esta situación es muy probable, por lo que si el navegador no reconoce la fuente declarada, utilizará la fuente predeterminada, por ejemplo, en Windows es Times New Roman. Todo nuestro diseño tipográfico cuidadosamente pensado se derrumbará y se convertirá en polvo de la noche a la mañana, por lo que debemos buscar la solución más universal. Lo primero que viene a la mente de inmediato es organizar la descarga del archivo de fuente a la computadora del usuario y mostrar el texto en la fuente seleccionada. En comparación con otros métodos, como mostrar texto a través de una imagen, este método es el más simple y versátil.

¿Cuáles son los beneficios de descargar un archivo de fuente y luego aplicarlo a través de CSS?

• El texto es fácil de agregar y editar.
• En el navegador, puede utilizar la búsqueda y encontrar las frases deseadas.
• En la configuración del navegador, puede reducir o aumentar el tamaño de la fuente para lograr una visualización cómoda.
• Los motores de búsqueda indexan bien el contenido del documento.
• El texto se puede seleccionar y copiar en el portapapeles, así como traducirlo a otro idioma.
• Las configuraciones de texto como el espacio entre líneas, el color, el tamaño y similares son fáciles de cambiar usando las propiedades de CSS.
• Nuevamente, usando CSS, es fácil agregar diferentes efectos al texto, como una sombra.

Como puedes ver, hay muchas ventajas. También hay desventajas menores y, para mantener el equilibrio, vale la pena mencionarlas.

• No todas las versiones de navegador admiten fuentes descargables y formato único.
• Un archivo que contiene un tipo de letra puede ocupar una gran cantidad de espacio, lo que ralentiza la carga de una página web.

En mesa. 1 enumera las versiones de navegador y los formatos de fuente que admiten.

Pestaña. 1. Formatos admitidos

Formato	explorador de Internet	Cromo	Ópera	safari	Firefox	Androide	iOS
TTF	9.0+	4.0+	10.0+	3.1+	3.5+	2.2+
fin de semana	5.0-8.0
WOFF	9.0+	5.0+			3.6+
SVG		1.0+	9.0+	3.1+	3.5+		1.0+

El formato más compatible es TTF. A excepción de IE hasta la versión 9.0 e iOS, todos los navegadores lo entienden perfectamente. Entonces, si tiene una fuente en este formato y está apuntando a navegadores modernos, no tendrá que hacer ningún paso adicional. Basta con escribir el siguiente código en estilos (ejemplo 1).

Ejemplo 1: Conexión TTF

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

Primero, cargamos el archivo de fuente usando la regla @font-face. En su interior escribimos el nombre de la familia tipográfica a través del parámetro font-family y la ruta al archivo a través de src. A continuación, utilice la fuente como de costumbre. Entonces, si necesitamos configurar la fuente del encabezado, entonces para el selector h1, como se muestra en el ejemplo, configuramos la propiedad font-family con el nombre de la fuente cargada. Para versiones anteriores de IE, enumeramos las alternativas separadas por comas. En este caso, la fuente del título será "Comic Sans MS" porque IE8 y versiones anteriores no admiten el formato TTF.

El resultado de este ejemplo se muestra en la Fig. una.

Arroz. 1. Título con fuente descargada

¿Qué sucede si necesita desesperadamente una fuente ornamentada en IE8? Afortunadamente, @font-face te permite incluir varios archivos de fuentes de diferentes formatos al mismo tiempo. El navegador sólo tiene que elegir el adecuado. Por lo tanto, una solución universal que funcione en todos los navegadores se reduce a convertir el formato TTF existente a EOT y luego incluir ambos archivos.

Para la conversión, existen varios servicios en línea que le permiten cargar un archivo TTF y obtener un archivo EOT como salida. Desafortunadamente, la mayoría de estos servicios tienen el mismo problema: recibimos el archivo, pero el idioma ruso no es compatible. Como resultado, no se logra el resultado deseado, la conversión es incorrecta. Entre los sitios que revisé, había uno que mostraba el texto en IE correctamente.

Vamos a este sitio, cargamos el archivo TTF y hacemos clic en el botón "Convertir TTF a EOT", después de lo cual guardamos el archivo resultante en la carpeta de fuentes. En estilos, queda hacer un pequeño truco y conseguir que diferentes navegadores descarguen la fuente en el formato adecuado. Para hacer esto, agregue dos parámetros src. El primero apunta al archivo EOT y es para versiones anteriores de IE. El segundo parámetro src debe contener dos direcciones separadas por comas, una de las cuales apunta a un archivo TTF. El hecho es que la versión 8.0 de IE y anteriores no entienden la coma en el parámetro src y, en consecuencia, ignorarán todo el parámetro. Puede haber varias opciones de ortografía, por ejemplo, repetir url, especificar el nombre de la fuente dentro del parámetro local o incluso escribir una fuente inexistente. Si el navegador no puede cargar dicha fuente, irá a la segunda de la lista y la tenemos escrita correctamente. Ortografías aceptables.

src: url(fuentes/pompadur.ttf), url(fuentes/pompadur.ttf);
src: local(pompadur), url(fuentes/pompadur.ttf);
src: local("bla bla"), url(fuentes/pompadur.ttf);

En el ejemplo 2 se muestra una versión funcional de la conexión de la fuente para todas las versiones de navegadores.

Ejemplo 2: Conexión de EOT

HTML5 CSS3 IE Cr Op Sa Fx

Elemento moderno del proceso político

De hecho, la doctrina política de Montesquieu lidera el tipo de cultura política europea continental, que se refleja en los escritos de Michels.

En cuanto a iOS, me parece que no tiene mucho sentido hacer y descargar una fuente separada en formato SVG. La audiencia de los sitios que lo ven vía iOS es aún pequeña, además, se intenta aligerar la versión del sitio para dispositivos móviles, y no es recomendable descargar unas decenas de kilobytes adicionales.

Fuentes web de Google

En www.google.com/webfonts. Aunque hay relativamente pocas fuentes diferentes en la colección (hay varias docenas), todas se seleccionan de muy alta calidad y son de uso gratuito en los sitios web.

Antes de elegir una fuente, cambie el valor de Script a cirílico, luego verá una lista de fuentes compatibles con el idioma ruso (Fig. 2).

Arroz. 2. Elegir fuentes en Google Web Fonts

La fuente que te gusta debe agregarse primero a la colección haciendo clic en el botón "Agregar a la colección" y luego en el botón "Usar" en la esquina inferior derecha de la pantalla. En la página siguiente (fig. 3) finalmente puede seleccionar las fuentes que necesita. Al mismo tiempo, debe entenderse que un tipo de letra puede contener varios estilos, y cada uno de ellos aumenta el volumen de archivos descargados.

Arroz. 3. Fuentes cargadas en la página

Puede conectar las fuentes seleccionadas de una de tres maneras, el código agregado se puede copiar hacia abajo en la página.

1. A través del elemento . La línea se verá como la siguiente.

2. A través de la regla @import. Inserte esta línea en su archivo CSS en la parte superior.

@importar url(http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic);

3. A través de JavaScript.

En principio, todos los caminos son iguales, así que elige según tus preferencias.

Las ventajas de utilizar este servicio son las siguientes.

• Las fuentes son de uso gratuito, no tiene que pagar por ellas.
• Las fuentes propuestas están "afiladas" para verlas en la pantalla, los archivos están optimizados y ocupan una cantidad relativamente pequeña.
• El navegador se detecta automáticamente y se emite una fuente en el formato requerido.

Una de las principales ventajas del servicio es que las fuentes se almacenan en formatos TTF, EOT, WOFF, SVG y se cargan después de verificar el navegador. Por lo tanto, el formato EOT solo estará disponible para versiones anteriores de IE.

Si usa o no Google Web Fonts, depende de usted. Si no encontró una fuente adecuada allí, siempre puede conectar el TTF popular y común. Además, es compatible con las últimas versiones de todos los navegadores populares.

¡Hola! Sobre eso, escribí en la lección 132, puedes leer. Y en este artículo, te diré cómo puedes conectar fácil y rápidamente una fuente a tu sitio desde Google Fonts. En el servicio de fuentes de Google, debe elegir una fuente para su sitio y luego conectarla.

No es necesario subir el archivo de fuentes al hosting. Basta con registrar el código HTML necesario en el encabezado del sitio y en el nombre de la nueva fuente. Las fuentes se pueden conectar no solo a un sitio de WordPress, sino también a cualquier otro sitio.

Cómo conectar Google Fonts al sitio

Vamos al servicio de fuentes de Google en este enlace y seleccionamos la fuente que necesitamos.
Las fuentes se pueden seleccionar a través del filtro. Es decir, configuramos los parámetros y, por lo tanto, el servicio encuentra fuentes con los parámetros seleccionados.

Puede establecer otros parámetros si lo desea: grosor (grosor de fuente), inclinación (oblicua), ancho (ancho de fuente).

También debe seleccionar cirílico si su sitio está en ruso: cirílico (cirílico) o cirílico extendido (cirílico extendido).

Cuando se seleccionan las opciones, el servicio mostrará todas las fuentes que se encuentran con estas.

Llevamos el cursor del mouse a la fuente que queremos instalar en el sitio, luego de lo cual aparecen configuraciones / parámetros adicionales: Uso rápido (uso rápido), Pop out (ver la fuente en una ventana separada) y Agregar a la colección (agregar a la colección).

Escoger " Uso rápido» y verá un widget en forma de velocímetro en el lado derecho. Muestra qué tan rápido se carga la fuente seleccionada. Cuanto menor sea el número en este velocímetro, mejor.

Aún más bajo, puede elegir una de las tres opciones para instalar la fuente en el sitio: standart, @import o javascript.

Cada opción tiene instrucciones en inglés sobre cómo conectar correctamente la fuente al sitio. te muestro la primera opcion estándar' porque es más simple.

Copie la línea resaltada en rojo y luego péguela en el archivo header.php entre las etiquetas ….

Luego, abrimos el archivo de estilo style.css, buscamos la fuente que debe cambiarse y escribimos una nueva. Simplemente ingrese el nombre de la nueva fuente. Ponemos la fuente de Google Fonts entre comillas, por ejemplo, familia de fuentes: "Aladin",Arial,Helvetica,Sans-serif.

Si no entiende nada de lo que estoy hablando aquí, mire el video donde hablo en detalle, cómo conectar la fuente de fuente de google al sitio de wordpress

______________________
Lección 204. pero sin el plugin

Una excelente fuente de fuentes para diseñadores web. EN WPBv4 comenzó a usar una combinación de fuentes popular fuente de Google: auriculares osvaldo Y Lora. Algunos usuarios han hecho preguntas sobre si las fuentes de Google se pueden usar en temas de WordPress y cómo hacerlo. Este artículo hablará sobre cómo agregar Google Web Fonts a los temas de WordPress. Correcto sin afectar el rendimiento de su sitio.

Encontrar fuentes web de Google que te gusten

Primero necesitas encontrar esas fuentes de Google que te gustan. Busque opciones entre las fuentes sugeridas en la biblioteca llamada Biblioteca de fuentes de Google. Una vez que encuentre una opción adecuada, haga clic en el botón Uso rápido:

Al hacer clic en este botón, accederá a una nueva página. Desplácese hasta que vea un formulario llamado " Agrega este código a tu sitio web":

Copie el código y péguelo en el bloc de notas, lo usaremos más tarde. Por lo general, se utilizan al menos 2 fuentes diferentes. Por ejemplo, en nuestra práctica, se utilizaron fuentes osvaldo + Lora. Por lo tanto, el procedimiento descrito anteriormente debe repetirse para la segunda fuente.

Agregar fuentes web de Google a su tema de WordPress

Hay tres formas principales de agregar fuentes de Google a su sitio web. Por ejemplo, hay una forma estándar, una forma de importar @importar y sumando con javascript. Por lo general, se utiliza uno de los dos primeros métodos.

La forma más fácil es abrir el archivo de su tema estilo.css y pegue el siguiente código en él, relacionado con la fuente que se agrega (recuerde, lo copiamos en el bloc de notas en el primer paso):

@importar URL (http://fonts.googleapis.com/css?family=Lora); @importar URL (http://fonts.googleapis.com/css?family=Oswald);

Eso es lo que mucha gente hace estudioprensa, Génesis). Pero, sin embargo, este no es un método completamente correcto para agregar fuentes abiertas. uso del método @importar bloquea las descargas paralelas, lo que hace que el navegador web descargue el archivo de fuente hasta el final antes de continuar descargando el resto del contenido de su sitio web. Entonces, si bien esto parece conveniente, no es la mejor manera de trabajar con una fuente si le preocupa la velocidad y el rendimiento de su sitio. Puedes leer más sobre estos detalles aquí.

Lo mejor sería combinar las solicitudes de diferentes Google Fonts en Una solicitud para evitar solicitudes HTTP excesivas. Aquí está cómo hacerlo. Agregando código:

@importar URL(http://fonts.googleapis.com/css?family=Lora|Oswald);

Incluso si se ve obligado a usar @importar, al menos combine varias solicitudes en una sola.

Cómo agregar Google Web Fonts sin comprometer el rendimiento del sitio web

Lo mejor sería usar método estándar, que utiliza enlaces en lugar de importaciones de archivos. Solo toma dos direcciones URL del primer paso de esta guía. Combina 2 fuentes diferentes agregando un símbolo entre ellas | . Luego pon el código resultante en un bloque. cabeza tu tema Para hacer esto, tendrás que editar el archivo encabezado.php y agregue el código de la hoja de estilo. Deberías obtener algo como lo siguiente:

La meta principal es agregar una solicitud de fuente en una etapa temprana. Según el blog del proyecto. Fuentes web de Google si hay una etiqueta de script antes de la declaración de la fuente @Perfil delantero, entonces Internet Explorer no representará nada en la página hasta que se cargue el archivo de fuentes.

Después de completar este paso, simplemente puede usar el fragmento de código resultante y la fuente en el archivo CSS tu tema Se verá algo como esto:

H1 (familia de fuentes: "Oswald", Helvetica, Arial, serif;)

Hay bastantes temas y marcos secundarios. No recomendado modifique los archivos de temas principales, especialmente si está utilizando un marco; porque los cambios en el tema se borrarán cada vez que actualice la versión del marco. Tendrá que trabajar en complementos y filtros en el tema principal o su marco si desea agregar correctamente las fuentes de Google a los temas secundarios.

Por ejemplo, si miras la página Plano, el equipo creó el tema WPBv4 como un tema secundario personalizado del marco Génesis. Veamos cómo agregar fuentes web de Google a un tema secundario basado en Génesis.

Cómo agregar fuentes web de Google al tema secundario basado en Génesis

Abre el tema hijo y su archivo. funciones.php y agregue el siguiente código a este archivo:

Add_action("genesis_meta", "wpb_add_google_fonts", 5); función wpb_add_google_fonts() (eco " "; }

Lo principal que hay que hacer es mirar el código dentro del bloque genesis_meta. Por defecto, hay opciones como META- descripciones, palabras clave, hojas de estilo, favicons, etc. Especificación de prioridad 5 , nos aseguraremos de que la hoja de estilo se cargue antes de que se cargue la hoja de estilo principal.

Desafortunadamente, no podemos cubrir todos los padres y marcos existentes que existen. Si tiene preguntas sobre temas específicos, hágaselas a los desarrolladores y autores de temas en los hilos correspondientes de los foros de desarrolladores de temas.

Nuestro consejo final sobre Fuentes web de Google en su sitio: no haga preguntas ni experimente con fuentes que no tiene la intención de usar. Por ejemplo, si solo desea fuentes normales y en negrita, no use ni personalice todos los demás estilos posibles para una fuente en particular. Esperamos que esta publicación lo ayude a configurar y usar correctamente Google Web Fonts en su sitio de WordPress.

Google Fonts es uno de los mejores recursos para fuentes web gratuitas, y Google le ofrece varias formas de importarlas a su sitio web. Desafortunadamente, ninguno de ellos incluye el popular motor de WordPress. Esto significa que tiene que usar complementos, que son abundantes, o ensuciarse las manos jugando con el código.

La buena noticia es que puedes instalar cualquier fuente de la biblioteca de Google en casi cualquier tema de WordPress sin mucha molestia. Cómo exactamente, te enseñaremos hoy.

Hay dos opciones: conectar el complemento o jugar un poco con el archivo functions.php.

Pero primero, me gustaría enumerar las ventajas y desventajas de Google Fonts, para que finalmente puedas decidir si usarlas en tus proyectos o no.

Buenas y malas fuentes web de Google

Cuando se trata de fuentes web, Google es una de las mejores opciones. en términos de rendimiento . Todo por el diseño liviano y el sistema de almacenamiento en caché. Los visitantes no tienen que esperar a que se carguen las fuentes de Google si recientemente visitaron un sitio que las usó. Las fuentes populares como Open Sans pueden mejorar el rendimiento de su sitio al reducir los tiempos de carga.

Otra característica es que Google te permite descargar estas fuentes , para que pueda usarlos en sus diseños.

Y finalmente la plataforma es completamente gratis . Todo lo que necesita hacer para comenzar a usar fuentes es iniciar sesión o tener una cuenta de Gmail (¿y quién no tiene Gmail hoy?).

de las deficiencias puedes especificar eso la elección de las fuentes de Google es pequeña muchos de ellos son similares entre sí. Tienes que pasar mucho tiempo buscando para encontrar una fuente original y decente. Hay muy pocas fuentes para cirílico.

Además, son comunes preocupaciones de seguridad - debe proporcionar algunos datos personales al instalar fuentes de Google en su sitio.

Cómo instalar fuentes de Google usando complementos de WordPress

Si busca complementos, lo primero que verá en los resultados de búsqueda es Complementos WP Google Fonts y Easy Google Web Fonts . Estos son realmente dos de los mejores complementos.

Los complementos no son la solución ideal para instalar fuentes de Google en un sitio de WordPress, no solo en términos de rendimiento, sino también porque los complementos no le permiten seleccionar ciertos fragmentos de texto. Sin embargo, si usted o su cliente están convencidos de que es mejor usar complementos, entonces mire estas dos opciones.

Este complemento le permite apuntar a elementos específicos como encabezados H1, párrafos y citas. También obtiene una opción de CSS personalizada para diseñar más fuentes individuales. Agregar y personalizar las fuentes de Google en su sitio de WordPress es bastante fácil con este complemento.

Easy Google Web Fonts hace honor a su nombre y hace que la instalación de Google Fonts sea muy fácil, incluso para los principiantes. Puede usar la función Vista previa en vivo para ver, probar y optimizar las fuentes sin salir del sitio web y crear sus propias reglas de fuente sin escribir una sola línea de código.

La forma correcta de instalar Google Fonts en una plantilla de WordPress

Al final, llegamos a la opción de abrir el archivo functions.php y jugar un poco con el código. Antes de poder hacer esto, debe seleccionar una fuente de la biblioteca de Google. Por el bien de un ejemplo, vamos a tratar de tomar un muy popular abrir sans.

Luego, debe elegir un estilo de fuente: normal, negrita o cursiva. Puedes hacerlo por ti mismo :)

Después de seleccionar estilos, Google le dará un fragmento de código. El nuestro se ve así:

Además, obtuvimos el estilo CSS:

familia de fuentes: "Open Sans", sans-serif;

Ahora es el momento de abrir el archivo functions.php (ruta del archivo: wp-content/themes/yourtheme). Al final del archivo, agregue una nueva función:

función cargar_fuentes()
{
wp_register_style("et-googlefonts",
"http://fonts.googleapis.com/css?family=Open+Sans:300cursiva,400cursiva,700cursiva,400,700,300"); wp_enqueue_style("et-googlefonts");
}
add_action("wp_print_styles", "load_fonts");

La clave de esta función es el comando "wp_enqueue_style", que hace que WordPress llame a las hojas de estilo de fuente en el encabezado de cada página. Si observa detenidamente, verá que eliminamos el enlace href= y rel='stylesheet' type'text/css' del código que Google nos proporcionó y deberá hacer lo mismo si desea agregar cualquier otra fuente de Google para su sitio de WordPress.

Todo lo que tiene que hacer ahora es abrir el archivo CSS principal y pegarlo en el estilo Open Sans. Aquí se aplican las reglas habituales, así que agregue el siguiente código a su hoja de estilo, guárdelo y actualícelo:

cuerpo
{
fuente: normal 1em "Open Sans", sans-serif;
color: #313131;
}

Este estilo funcionará en todo el sitio. Puede establecer un estilo diferente para fragmentos de texto individuales:

Texto en negrita
{
fuente: negrita 1em "Open Sans", sans-serif;
}

Como puedes ver, en realidad es muy simple. Prueba y comprueba el resultado :)