¿Quieres agregar fuentes web de Google a tu tema de WordPress?
Las fuentes de Google te permiten usar fácilmente fuentes web hermosas en tu sitio web de WordPress. Puedes usarlas para mejorar la tipografía, la experiencia del usuario y la estética de tu sitio web.
Este artículo te mostrará cómo agregar fuentes web de Google a los temas de WordPress correctamente.
Aquí tienes un breve resumen de los temas que cubriremos en esta guía.
- Encontrar las mejores fuentes de Google para tu tema de WordPress
- Método 1. Agregar fuentes de Google a tu tema usando un plugin
- Método 2. Agregar fuentes web de Google al encabezado de tu tema
- Método 3. Agregar fuentes de Google en la hoja de estilos del tema
- Método 4. Incluir correctamente fuentes de Google en WordPress
- Sección adicional: Cómo las fuentes web afectan la velocidad de WordPress
Encontrar las mejores fuentes de Google para tu tema de WordPress
Lo primero que debes hacer es encontrar las fuentes de Google que te gusten. Simplemente visita el sitio web de Google Fonts y navega por la biblioteca.
Cuando encuentres una fuente web segura que te guste, haz clic en ella para ver los diferentes estilos disponibles.
Puedes seleccionar los estilos que te gustaría usar en tu sitio web.
A continuación, haz clic en el botón 'Ver familias seleccionadas', que abrirá una barra lateral.
Desde aquí, verás las instrucciones de uso en la sección 'Usar en la web'.
Verás que hay dos pestañas diferentes para agregar la fuente a tu sitio
La primera es el método de enlace, que es la forma estándar recomendada de agregar fuentes web.
La segunda pestaña utiliza el método CSS @import que te permite cargar las fuentes a través de tu hoja de estilos CSS.
Te mostraremos cómo usar cada uno de estos métodos y cuáles son sus pros y contras.
Nota: Para algunos de estos métodos, necesitarás editar los archivos de tu tema de WordPress. Puedes hacerlo conectándote a tu sitio web usando un cliente FTP o la aplicación Administrador de Archivos en tu panel de control de hosting.
Una vez conectado, necesitas visitar la carpeta /wp-content/themes/Nombre-de-tu-tema/. Desde ahí, encontrarás los archivos del tema que podrías necesitar editar para este tutorial.
Para más detalles, consulta nuestro tutorial sobre cómo copiar y pegar fragmentos de código en WordPress.
Método 1. Agregar fuentes de Google a tu tema usando un plugin
Para este método, usaremos un plugin de WordPress para cargar Google Fonts.
Primero, necesitas instalar y activar el Plugin de Fuentes. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Tras la activación, necesitas visitar la página Apariencia » Personalizar para lanzar el personalizador de temas. Desde aquí, verás la nueva pestaña del Plugin de Fuentes.
Al hacer clic en ella, se mostrarán las opciones del plugin.
Puedes elegir usar Google Fonts para diferentes áreas de tu sitio web.
Alternativamente, también puedes elegir cargar una fuente para tu tema de WordPress.
Simplemente cambia a la pestaña Configuración avanzada » Solo cargar fuentes.
Desde aquí puedes elegir las fuentes de Google que deseas cargar para tu tema de WordPress.
Simplemente escribe el nombre de la fuente y luego selecciónala.
Una vez que hayas terminado, no olvides hacer clic en el botón Publicar para guardar tus cambios.
Ahora, si utilizaste las funciones avanzadas del plugin para asignar fuentes a diferentes áreas de tu sitio web, estas funcionarán automáticamente.
Por otro lado, si optaste por cargar solo fuentes, necesitarás agregar reglas de CSS personalizado para ellas. Por ejemplo, así es como cargarías una fuente para el elemento de párrafo en todo tu sitio web.
p {
font-family: 'Open Sans', sans-serif;
}
Método 2. Agregar fuentes web de Google al encabezado de tu tema
Este método es la forma más fácil de agregar fuentes de Google directamente a tu tema de WordPress.
Simplemente edita el archivo header.php de tu tema de WordPress o tema hijo. Después de eso, copia y pega el código Link antes del código del enlace de la hoja de estilos de tu tema de WordPress.
Así es como se vería:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;800&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="YOUR THEME STYLESHEET" media="screen">
Básicamente, el objetivo es colocar la solicitud de fuente lo antes posible. Esto permite que el navegador del usuario descargue las fuentes antes de renderizar la página.
Una vez que hayas hecho eso, puedes usar la fuente en el archivo CSS de tu tema:
h1 {
font-family: 'Open Sans', sans- serif;
}
Método 3. Agregar fuentes de Google en la hoja de estilos del tema
Para este método, importaremos el CSS de la fuente en el archivo CSS principal de nuestro tema de WordPress.
Simplemente edita el archivo style.css en la carpeta raíz de tu tema de WordPress y agrega el código de la pestaña '@import' en la parte superior del archivo CSS.
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;800&display=swap');
Así es como se veía en el archivo style.css de nuestro sitio de demostración.
Importante: Asegúrate de agregar la línea @import en la parte superior de tu archivo CSS.
Método 4. Incluir correctamente fuentes de Google en WordPress
Los dos primeros métodos que mencionamos anteriormente requieren que agregues fuentes directamente editando los archivos de tu tema de WordPress.
Esto funciona bien si estás utilizando un tema hijo para realizar todos tus cambios.
Por otro lado, si estás haciendo estos cambios en el tema principal, entonces tus cambios se perderán la próxima vez que actualices el tema.
Una solución más fácil para eso es agregar programáticamente algo de código que cargue automáticamente las fuentes de Google para que tu tema de WordPress las use.
Para esto, puedes agregar un fragmento de código personalizado a un plugin específico del sitio o usando un plugin de código personalizado. Para más detalles, consulta nuestro tutorial sobre cómo agregar código personalizado en WordPress.
Simplemente agrega el siguiente fragmento de código a tu sitio web de WordPress.
function wpb_add_google_fonts() {
wp_enqueue_style( 'wpb-google-fonts', 'https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300', false );
}
add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' );
Nota: No olvides reemplazar la URL con la URL de las fuentes de Google que deseas agregar.
¡Eso es todo! WordPress ahora usará el método Link para obtener automáticamente las fuentes de Google que agregaste.
Puedes confirmarlo viendo el código fuente de tu sitio web, allí verás tu hoja de estilos de fuentes de Google agregada en la sección del pie de página de tu sitio web.
Sección adicional: Cómo las fuentes web afectan la velocidad de WordPress
Las fuentes de Google se cargan extremadamente rápido porque se sirven a través de la enorme red CDN de Google con ubicaciones de servidores en todo el mundo.
Dado que estas fuentes son utilizadas por millones de sitios web, existe una buena posibilidad de que los usuarios ya las tengan almacenadas en la caché de su navegador.
Esto reduce su impacto en el rendimiento de la velocidad de tu sitio web. Puedes reducir aún más este impacto utilizando solo una o dos fuentes web en tu diseño.
Para más consejos, consulta nuestra guía completa sobre el rendimiento y la velocidad de WordPress para principiantes.
Esperamos que esta guía te haya ayudado a aprender cómo agregar fácilmente fuentes web de Google a tu tema de WordPress. También te puede interesar nuestra guía sobre cómo crear un tema personalizado de WordPress desde cero sin codificar y nuestra lista de los mejores servicios de hosting web gratuitos.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Jiří Vaněk
Es genial que hayas proporcionado información sobre cómo cargar fuentes localmente en un sitio web. Luché con la velocidad durante mucho tiempo e intenté optimizar todo. Este fue el primer sitio donde alguien me aconsejó cargar fuentes localmente, y realmente funciona. Fueron solo milisegundos, pero aun así, la velocidad del sitio mejoró. A veces, esos milisegundos marcan la diferencia entre verde y naranja en PageSpeed Insights o Google Search Console.
Armando
Noté que este video/instrucciones datan de 2015 y las capturas de pantalla, etc., son diferentes. Cuando intenté incrustar el código de Google Fonts en mi archivo header.php como se muestra, arrojó un error. Así que estoy pensando que tal vez este tutorial necesite ser actualizado. No estoy seguro, pero... Gracias.
Soporte de WPBeginner
Gracias por tus comentarios, nos aseguraremos de revisarlos para actualizar este artículo cuando sea posible.
Administrador
Wout
¡Gracias por el artículo! Por favor, reemplaza http: en fonts.googleapis.com/css… con https: en la función para encolar Google Fonts para habilitar un enlace cifrado a googleapis.com…
Soporte de WPBeginner
Thanks for pointing this out, we will be sure to update the links as soon as we are able
Administrador
Sofia
Estoy bastante seguro de que es 2017, ¿por qué tenemos que aprender todo esto :"((
charles
¿Sigue siendo esta la forma correcta de hacerlo?
Renee
Conseguí que la fuente apareciera, pero no logro entender cómo ponerla en negrita.
Aquí hay un ejemplo de lo que hice en el CSS
font-family:"Open Sans", sans-serif;
font-weight:bold;
en el enlace que agregué a mi header.php agregué esto:
Intenté sustituir 700 por bold, pero no funcionó...
¿Alguna idea?
gracias de antemano
Isaac Anderson
Asegúrate de verificar los pesos de fuente deseados en Google Fonts después de seleccionarlos en la pestaña "personalizar".
Louis
¡Funciona perfecto! Gracias.
josh
¿Eh? ¿Qué demonios significa todo esto? ¿Cómo hago para poder agregar una fuente de Google en mi publicación o página?
Shubham Kumar
¿Qué opinas sobre importar Google Web Fonts usando JavaScript de forma asíncrona como se menciona aquí:
Gracias
Shubham
Jordan
Una pregunta rápida: busqué la referencia del código para wp_enqueue_style(). Su primer argumento es una cadena que denota el nombre de la hoja de estilos. En tu ejemplo, usas 'wpb-google-fonts' para el primer argumento. ¿Cómo puedo saber qué poner aquí para mi sitio?
pete rome
¿dónde pego cosas en el encabezado exactamente? siempre veo eso pero la gente nunca explica exactamente dónde está.
Carla DeLauder
¿Qué hace 'false' en esta función? Otras funciones encoladas no lo incluyen.
Gracias.
Kev
ese es el argumento para encabezado o pie de página. Dado que la mejor práctica es poner [casi] todos los scripts en el encabezado, se establece por defecto en 'true' => pie de página, mientras que 'false' significaría NO en el pie de página, sino en el encabezado en su lugar.
Desafortunadamente, los scripts de fuentes detienen todo lo demás de cargarse, por lo que ponerlos en el encabezado apesta un poco, es por eso que este artículo habla sobre asegurarse de que solo incluyes las fuentes que realmente usarás. Por otro lado, ponerlos en el pie de página puede causar que fuentes predeterminadas como Arial se carguen momentáneamente en tu pantalla durante la pintura hasta que se cargue la fuente web. Es una advertencia horrible, pero es lo que hay.
Una práctica que estoy incorporando en mi flujo de trabajo es cargar fuentes condicionalmente basándome en su uso en el sitio. Por ejemplo, tal vez "negrita" solo se usa en h2 y h3 en las plantillas de publicaciones de blog (single.php), entonces escribiré una cola condicional para el script de negrita para que solo se ponga en cola cuando esté en la plantilla single.php.
Espero que eso ayude.
Kev
Además, para que conste.
Por "negrita" arriba, me refería a una versión específica en negrita de una familia de fuentes. <= solo para que lo sepas.
Kenneth John Odle
A partir de WordPress 3.3, wp_print_styles está obsoleto.
Bram
Sí, deberías actualizar este artículo.
Soporte de WPBeginner
Actualizado.
Administrador
Soporte de WPBeginner
Hemos actualizado el artículo, ahora muestra cómo agregar fuentes de Google usando la función correcta
wp_enqueue_styley el hook de acción wp_enqueue_scripts.Administrador
isak
¿Cómo se ponen en cola dos familias de fuentes a través de functions.php?
Abril
Estoy usando el plugin Punch Fonts para agregar fuentes de Google, pero no estoy seguro de cómo obtener solo el encabezado 1 para la fuente deseada. No necesito esta fuente para los encabezados 2-6, así que solo quiero usar la fuente de Google para el encabezado uno. ¿Cómo escribo eso en el parámetro?
Actualmente estoy usando: Oleo+Script+Swash+Caps:400
Melissa
Bueno, si alguien está atascado, también existe este plugin llamado Easy Google Fonts. Muy útil.
Melissa
Hola,
He intentado los tres métodos, pero ninguno de ellos surtió efecto por completo. Parece que solo se aplica a ciertos elementos y no a otros que especifiqué con esa fuente en la hoja de estilos.
Cuando uso el Inspector de Elementos para el elemento donde mi Fuente de Google no se aplica, esto es lo que veo:
#site-title {
font-family: \’Questrial\’, Helvetica, Arial, sans-serif;
¿Qué significan esas comillas dobles \\ alrededor de mi fuente? Quiero decir, parece que indica un error, pero no puedo averiguar qué estoy haciendo mal. ¿Qué podría ser? ¿Algún código que anule el mío, con mayor prioridad? ¿pero dónde? ¿cómo? ¡Arghhh, me está volviendo loco!
Ali Sajjad
Estimado Editorial, quiero agregar todas las fuentes web de Google en este sitio, y luego usarlas en mis medios.
pero no quiero usar demasiados enlaces en el archivo de encabezado. ¿alguna otra manera?
Soporte de WPBeginner
Solo agrega las fuentes que quieras usar.
Administrador
Anurag
Entonces, tengo un blog ( http://www.goingtechy.com/ ). El problema que tengo es que quiero optimizar la entrega de CSS de la fuente de Google que mi sitio ya utiliza. Entonces, el sitio ya tiene fuentes de Google. ¿Cómo puedo optimizarlo?
Samantha
¡Muchas gracias por esta publicación! Para alguien que no tiene formación formal en html/css, me impresionó la simplicidad de esta publicación.
Tanisha
So easy and go it to work perfectly. Thanks for this.
Greg
Hola,
Usando Genesis y el tema Parallax Pro…
Pero soy nuevo en cosas como php, etc.
Agregué este código al archivo fuctions.php como me indicaste:
add_action( ‘genesis_meta’, ‘wpb_add_google_fonts’, 5);
function wpb_add_google_fonts() {
echo ”;
}
Los encabezados que usan la fuente anterior permanecen sin cambios.
Preguntas:
1. ¿Tengo razón al suponer que el código anterior es lo único que agrego?
2. ¿Dónde exactamente se debe agregar el código, al principio o al final de fuctions.php?
2. ¿Falta algo en el código?
3. ¿Debo agregar algo al archivo style.css?
Agradezco tu ayuda
Saludos
Greg
Soporte de WPBeginner
Greg, nos parece bien. Creemos que WordPress probablemente omitió la parte de tu código donde imprimiste el enlace de la fuente. Sí, necesitarás usar CSS para establecer reglas de estilo para los selectores donde quieras usar tu fuente de Google.
Administrador
Tony Porto
Ninguna de las anteriores es lo suficientemente buena, todos sabemos que “wp_enqueue_style( ‘google-font’)” es la “forma técnicamente correcta de llamar a un script, pero en este caso tu <header terminará así;
FUENTE 1:
FUENTE 2:
FUENTE 3:
FUENTE 4:
No sirve, tiene que ser así:
Akmal
¿Dónde debo pegar el código anterior? No pude encontrar la última línea de código en ningún lugar de mi archivo header.php. ¿Me puedes decir paso a paso?
Gracias.
Soporte de WPBeginner
En tu archivo header.php encontrarás
</head>, puedes pegar este código en cualquier lugar antes de esa etiqueta.Administrador
Sarah
Intenté volver a escribir lo siguiente, y todavía no cambia nada:
/* Importar Fuentes
———————————————————— */
add_action( ‘genesis_meta’, ‘wpb_add_google_fonts’, 5);
function wpb_add_google_fonts () {
echo ‘’;
}
/* Predeterminados
Funcionó la primera vez. ¡Estoy tan confundido!
Gracias por tu ayuda.
Sarah
Hola,
Estaba tan orgulloso de mí mismo por copiar el código y cambiar la fuente, que encontré demasiado grande para mi sitio. Cuando intenté cambiarla a otra cosa, debí haber mezclado algo, y solo un estilo de fuente sigue apareciendo, incluso cuando juego con los códigos. Me siento como un tonto ahora – no hablo de tecnología. ¿Alguien puede ayudarme? Lo he hecho con y sin los números en caso de que no sean realmente parte de ello. Gracias. Esto es lo último que ingresé.....
/* Importar Fuentes
———————————————————— */
1 add_action( ‘genesis_meta’, ‘wpb_add_google_fonts’, 5);
2
3 function wpb_add_google_fonts() {
4 echo ”;
5 }
/* Predeterminados
———————————————————— */
Soporte de WPBeginner
Esperamos que no hayas ingresado los números con el código. ¿O sí lo hiciste?
Administrador
Sarah
Sin números, pero me falta algo esta vez. Esto es exactamente lo que tengo en mi tabla:
add_action( ‘genesis_meta’, ‘wpb_add_google_fonts’, 5);
function wpb_add_google_fonts() {
echo ”;
}
Sarah
Parece que el código funcionó... en una computadora. No ha funcionado en otras dos que uso.
¿Puedes sugerir por qué podría ser ese el caso?
Muchas gracias
Karissa Skirmont
¿Cómo se pueden usar múltiples fuentes de Google en el functions.php?
Tenía esto:
//* Enqueue Google fonts add_action( 'wp_enqueue_scripts', 'executive_google_fonts' ); function executive_google_fonts() { wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700', array(), CHILD_THEME_VERSION ); wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Dancing+Script:400italic,700italic,400,700', array(), CHILD_THEME_VERSION ); }Pero el Dancing Script no aparecía en mi segunda computadora, ni en mi iPhone, ni en mi tablet.
Eliminé Open Sans y empezó a funcionar.
Soporte de WPBeginner
@Karissa, el primer argumento en la función wp_enqueue_style es el identificador del script de estilo que estás cargando. Intenta con este código en su lugar:
//* Enqueue Google fonts add_action( 'wp_enqueue_scripts', 'executive_google_fonts' ); function executive_google_fonts() { wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700', array(), 20131111 ); wp_enqueue_style( 'google-font-2', '//fonts.googleapis.com/css?family=Dancing+Script:400italic,700italic,400,700', array(), 20131111 ); }1-click Use in WordPress
Administrador
Karissa Skirmont
Olvídalo, descubrí que necesitaba usar un enlace como este:
‘//fonts.googleapis.com/css?family=Euphoria+Script|Rouge+Script|Montez|Federo|Great+Vibes|Clicker+Script|Dancing+Script:400,700|Satisfy|Ruthie|Rochester|Open+Sans|Open+Sans+Condensed:300’
Karissa Skirmont
Ah, ya veo, respondí arriba antes de actualizar la página y ver tu respuesta.
Al usar el enlace que Google proporciona cuando tienes varias fuentes seleccionadas, lo produce así y puedes probar más fácilmente diferentes fuentes en vivo en el sitio.
Chaitanya
Thank you so much!! Whenever I need any WordPress help, I come directly to wpbeginner as I know I would find a best solution here. You guys don’t know how much you have helped beginners like me, Appreciate you support
Long Live WPBeginner…
Salud,
Chaitanya
Jenny
Meh, me gusta usar la importación. Menos trabajo para mí porque soy perezoso~
pete rome
sí, demasiado trabajo en cada método aquí y allá, no debería haber necesidad de agregar nada a la hoja de estilo, busca un plugin
Jimmy Reynolds
A you mean the nerd way
mzilverberg
Algo que me perdí aquí fueron los comentarios condicionales para hacer que las fuentes web de Google funcionaran en IE8 y anteriores si solicitas más de un peso de fuente. Por ejemplo:
<link href=”http://fonts.googleapis.com/css?family=Cabin:400,700″ rel=”stylesheet” type=”text/css” />Por eso creé una función para cargar fuentes: https://github.com/mzilverberg/LoadGoogleWebfonts
Mi script también coloca las URL de respaldo apropiadas dentro de un comentario condicional.
Con unas pocas líneas de código, también podrías hacer que esto funcione en functions.php en tu tema de Wordpress.
Greg
¿Qué hay de agregar Google Fonts al lado del administrador?
Personal editorial
¿Por qué querrías agregar Google Fonts al lado del administrador?
Administrador
Bruce Smith
Para mantener WYSIWYG en el editor de contenido del administrador. Para que vea la misma cara de fuente en el editor del administrador que en mi sitio web.
Dan Merhar
De hecho, me estaba preguntando cómo hacer lo mismo (y este es el primer resultado que apareció en Google).
Sé que existen plugins para agregar funcionalidad de Google Webfonts al editor WYSIWYG, pero los ralentizan muchísimo. Voy a investigarlo más a fondo y ver si hay una manera fácil de agregar una o dos fuentes.
Marleen
Muchas gracias por compartir, estoy muy contento con esto. Soy un usuario de Genesis y empecé a usar @import porque ya se está haciendo en la hoja de estilos. Me siento mucho mejor con esta solución.
¡Feliz 2013!
jeff
En tu código, ¿reemplazo "TU HOJA DE ESTILOS DEL TEMA" con algo?
¿la mía es STYLE.CSS, o necesita ser una URL?
gracias,
Jeff
Personal editorial
Sí, necesitas insertar la ruta de style.css de tu tema allí.
Administrador
Charles
Esto es lo que uso.....
Agrega esto al archivo functions.php de tu tema:
/*----------------------------------*/ /* Load CSS Files /*----------------------------------*/ if(!function_exists('load_theme_styles')) { function load_theme_styles() { if (!is_admin()) { $cssURL = get_template_directory_uri().'/css/'; $fontURL = 'http://fonts.googleapis.com/css?family=Lora|Oswald'; // Registering New Styles wp_register_style('googleFont', $fontURL); wp_register_style('style', $cssURL.'/style.css', 'googleFont', '1.0', 'screen'); wp_register_style('print', $cssURL.'/print.css', 'googleFont', '1.0', 'print'); // Enqueing Styles wp_enqueue_style('googleFont'); wp_enqueue_style('style'); wp_enqueue_style('print'); } } } add_action('wp_enqueue_style', 'load_theme_styles');¿Qué opinas de esto?
Chris Reynolds
Esta es la forma CORRECTA de agregar fuentes de Google. Siempre usa wp_register_style/wp_enqueue_style
David
Mejor aún, agrega un comentario condicional para servir las fuentes por separado para IE 7 y 8:
Desde aquí:
http://www.smashingmagazine.com/2012/07/11/avoiding-faux-weights-styles-google-web-fonts/
Bryan Nickson
Buenos tutoriales. Quería algo así... ¡¡Felicitaciones!!
Peter
¿Qué hay de la opción de JS, es una opción más rápida o la otra es mejor? Gracias
Personal editorial
El método en este es, con mucho, el más recomendado.
Administrador
QLStudio
En tu respuesta no pones en cola el css, ¿es realmente la mejor manera de agregarlo?
Chris
¡Gran artículo! Creo que sería genial si WordPress, por defecto, incluyera Google Fonts, pero esto parece bastante fácil. ¡Gracias por explicar!
Personal editorial
Google Fonts are great, but not everyone uses it (considering the amount of folks who use WordPress). WordPress has a 95% rule. If the feature would not satisfy 95% of the audience, then it is usually falls in the plugins category. However, sometimes exceptions are made. We can assure you that the Core WP team, will not make this into an exception though
Administrador
Aaron Crow
¡Eres genial, hombre! ¡Justo lo que estaba buscando! Gracias por publicar esto… Busqué por mucho tiempo algo sobre cómo agregar esto a mi tema. Me alegra haber encontrado tu página.
Anderson Curry
Gran publicación e incluso si existe un plugin para hacer esto, siempre es mejor aprender la forma manual también.
Brad
Así que obviamente no aceptas usar los varios plugins de fuentes de Google. Tendré que revisar mis archivos CSS en ese caso.
sadhu
no entiendo la segunda parte que es agregar la fuente a la cosa de acción de adición de Genesis… ¿es otro método para agregar la fuente web de Google?
y sé que no tenemos que incluir todos los estilos de la fuente, pero el método recomendado, que es http://fonts.googleapis.com/css?family=Lora|Oswald
solo por ejemplo, ¿qué pasa si solo quiero el estilo negrita para Lora y el estilo ligero para Oswald, entonces cómo combino los estilos de fuente?
gracias
Personal editorial
La segunda parte es SOLO para Usuarios de Genesis. Si no estás usando el Genesis Theme Framework, entonces no necesitas esa parte. Para combinar estilos como quieres, aquí te explico cómo hacerlo:
http://fonts.googleapis.com/css?family=Oswald:300|Lora:700
Administrador
Anton
¿Qué debo hacer si quiero usar @font-face en Genesis Framework como lo mostraste aquí con las Google Webfonts? ¿Hay alguna solución para eso.
He estado buscando todo el día ya que mis fuentes cargan increíblemente lento.
Saludos
Gautam Doddamani
gran tutorial… de hecho uso el plugin wp google fonts… ¿recomendarías ese plugin o hacer la forma manual como se describe arriba… cuál es más eficiente en cuanto a rendimiento?
Personal editorial
No he probado ese plugin. Pero casi siempre intentamos evitar plugins de ese tipo porque se puede hacer más fácil con los archivos del tema.
Administrador
Gautam Doddamani
sweet…thanks will edit my theme instead of using a plugin
Pippin
Evitar el plugin de Google Fonts solo porque es un plugin no es una buena razón en absoluto. Usar el plugin en realidad te brinda mucha más flexibilidad que incluirlo en tu tema, especialmente si alguna vez decides cambiar de tema.
Personal editorial
En lo que a mí respecta, las fuentes en la mayoría de los casos se consideran elementos estilísticos, por lo tanto, basadas en el tema, y generalmente cambian cuando cambias a un tema diferente.
Siddanth Adiga
Publicación excelente, estaba buscando esto mismo, estaba experimentando con CSS y fontface. Intentaré con esta también, gracias.
Konstantin Kovshenin
The “Right” way would be to use the wp_enqueue_style function
Here’s some more thoughts: http://kovshenin.com/2012/on-wordpress-theme-frameworks/
Personal editorial
Konstantin, estoy totalmente de acuerdo contigo. La función wp_enqueue_style siempre debe usarse. Eso es lo que intenté hacer primero, como sugirió Nathan Rice, en el artículo de StudioPress sobre Google Fonts. Excepto que Google indica claramente que los estilos de fuente deben cargarse antes que cualquier otra cosa. Usando wp_enqueue_style y luego imprimiéndolos con wp_print_styles, esto imprimía el elemento después de que la hoja de estilos principal ya se hubiera cargado. Esa fue la razón por la que tuve que engancharme al hook genesis_meta(). De todos modos, estoy totalmente de acuerdo con tus pensamientos en tu artículo.
Administrador
Japh
I’m a little late to this, but I wanted to mention that you could still use
wp_enqueue_style, just set the priority higher so that they are loaded firstBob R
Gran tutorial. Una observación: la primera imagen del artículo estaba destinada a mostrar la pestaña @import, ¿verdad?
Personal editorial
No, no se suponía que mostrara eso.
Administrador