Cómo agregar fuentes de Google a su sitio de WordPress

Cómo agregar fuentes de Google a su sitio de WordPress

La apariencia de un sitio web es de gran importancia para captar y mantener la atención de un visitante. El contenido de un sitio web puede estar dominado por texto, imágenes o medios. El texto, dondequiera que se utilice, ya sea abundante o escaso, debe elegirse con cuidado. La tipografía juega un papel importante en la apariencia general de un sitio web.

Las fuentes integradas están disponibles en el navegador y el archivo style.css normalmente accede a estas fuentes para su visualización. Esto significa que no hay variación y esto da como resultado un sitio web mediocre. Pero no tiene por qué ser así. Puede elegir fuentes que harán que su sitio web sea extraordinario y único. A veces, las fuentes pueden incluso ser el carácter definitorio de un sitio web.

Puede ser útil saber que todas las fuentes se encuentran en una de dos fuentes, lo que significa que las fuentes tienen una línea o rizo adicional al final del trazo principal, o sans serif, es decir, sin esa línea o rizo.

Seleccionar fuentes

Hay muchos lugares para acceder a fuentes de gran apariencia como FontSquirrel. Compruebe que la licencia que acompaña a estos recursos le permite utilizarlos para sus propios fines. A menudo, los temas que utiliza en el sitio web vienen con su propia selección de fuentes y realmente debería hacer un buen uso de ellos. También puede comprar fuentes premium de Typekit.

Al elegir las fuentes, busque un estilo que se adapte al estado de ánimo o al público de su sitio web. Por ejemplo, un sitio web de una guardería puede usar fuentes que se parecen a la letra de un niño. Cuando combine dos estilos, elija opuestos como grueso y delgado. Sobre todo, las fuentes deben ser legibles.

Agregar fuentes de Google a un tema existente puede no ser una gran idea, ya que necesitará usar los filtros y ganchos proporcionados por ese tema para agregar fuentes de Google. Sin embargo, Google tiene una gran biblioteca de fuentes que se actualiza con regularidad. Este tutorial le mostrará cómo incorporarlo a su sitio web.

Una vez que haya elegido sus fuentes, el método para agregarlas variará.

  • Un método requiere que descargue el archivo de fuente y eso puede ocupar espacio en el servidor. Además, no todos los archivos de fuentes son compatibles con todos los navegadores.
  • Otro método requiere que utilice una secuencia de comandos en cola para asociar secuencias de comandos externas con su sitio.
  • Los complementos se pueden utilizar para agregar fuentes de Google.

Método 1: agregar fuentes de Google con código

Debido a que este método de incorporar fuentes de Google requiere cierta edición del diseño existente, es posible que desee trabajar en un sub-diseño para evitar perder cambios cuando actualice.

Abra la página de fuentes de Google en su navegador y vea las opciones de fuentes disponibles allí. Cuando encuentre el que desea, haga clic en el botón Agregar a la colección junto a ese estilo de fuente. Para este tutorial, elegiré el estilo Dancing Script con pesos 700 y 400. Puede elegir más de un estilo de fuente. En este caso, combine los múltiples estilos de fuente con un ‘|’ Símbolo. Si el nombre del estilo usa varias palabras, agregue un ‘+’ entre las palabras.

1

Se abre una ventana emergente en la parte inferior de la pantalla. Todos los estilos de fuente que seleccionó se mostrarán en esta ventana emergente.

2

Luego haga clic en el botón Usar a la derecha. Se abre otra página donde puede seleccionar la fuerza de las fuentes. El dial derecho muestra la velocidad a la que se carga el sitio web para cada fuente y peso. Si agrega más de un estilo de fuente, la esfera del reloj mostrará la velocidad total de todos los estilos de fuente combinados. Esta pantalla también le permite agregar caracteres especiales específicos al idioma que ha elegido.

3

En la parte inferior de la página, frente al paso 3, verá 3 pestañas: Estándar, Importación y Javascript. Puede seleccionar una de estas pestañas para insertar el código en su sitio web.

4-Importar con resaltado

Bajo la Pestaña Importar, verá un código que contiene (resaltado) el nombre de la fuente que seleccionó.

@import url(http://fonts.googleapis.com/css?family=Dancing+Script:400,700);

Ahora puede simplemente pegar este código en el archivo style.css de su tema. Si bien este método es fácil de seguir, tiene la desventaja de que ralentizará su sitio web. Esto se debe a que el archivo importado debe descargarse primero y luego el resto del contenido.

Una mejor manera de agregar Google Fonts es usar el código que está disponible haciendo clic en el Pestaña estándar.

5 estándar con un toque de luz

Insertar este fragmento de código directamente en header.php no funciona realmente. No es recomendable realizar cambios en los archivos del tema principal, ya que es posible que todos los cambios se pierdan la próxima vez que actualice. Una forma más fácil de hacer esto es realizar los cambios en functions.php en el tema hijo. Esto significa que estos cambios se reproducirán secuencialmente después de que se hayan realizado las funciones del tema principal (y no anularán las funciones del tema principal).

El enlace generado es una declaración de hoja de estilo. Puede registrar este código en ‘googleFonts’ y crear una función load_fonts. Esto pondrá el estilo en la cola. Add_action agrega las fuentes al encabezado.

function load_fonts() {
   wp_register_style('googleFonts',
'http://fonts.googleapis.com/css?family=Dancing+Script:400,700');
   wp_enqueue_style('googleFonts');
     }

add_action('wp_enqueue_scripts', 'load_fonts');

Una vez hecho esto, guarde el archivo.

Con esta acción, el código se agrega al encabezado, mientras que el tema hijo continúa heredando el header.php del padre. Este método mejora la portabilidad de su tema mientras lo mantiene compatible con los complementos.

Solo queda un paso: integrar Google Fonts en su CSS.

6 Integrar

Así que pase a su hoja de estilo CSS principal y agregue una declaración de familia de fuentes como esta.

body {
font-family: 'Dancing+Script' , sans-serif;
font-size: 14px;
color: #191919;
}

Asimismo, puede aplicar el mismo formato de estilo a otros elementos y guardar su archivo CSS.

Ahora verá que el sitio web se ha actualizado con las fuentes que seleccionó.

Si decide utilizar el código generado, haga clic en Javascript pestaña, pega el código en header.php inmediatamente después de abrir la etiqueta head.

Método 2: agregar fuentes de Google con complementos

Como mencioné al principio, también puede agregar Google Fonts a través de complementos. La instalación y activación de estos complementos es bastante sencilla. Sin embargo, elegir las fuentes adecuadas para algunos complementos puede ser un poco complicado, ya que puede requerir personalización con CSS.

Hay muchos complementos que puede usar para agregar fuentes a su sitio web, incluidas las fuentes de Google. Por nombrar algunos: Fontmeister, Supreme Google Webfonts, Typecase Web Fonts, Google Web Fonts Manager. Echemos un vistazo más de cerca a dos de los complementos más populares que ayudan a agregar Google Fonts.

WP Google Fonts

WP Google Fonts

WP Google Fonts agregará el código necesario a su sitio web. Le ayudará de dos formas a agregar fuentes desde el directorio de fuentes de Google:

  • En su panel de administración puede asignar fuentes de Google a ciertos elementos CSS de su sitio web.
  • O puede trabajar dentro de la hoja de estilo de su propio diseño.

Puede personalizar las fuentes muy bien marcando las opciones en la página de configuración. Sin embargo, no hay forma de obtener una vista previa de las fuentes antes de presionar el botón Guardar. Es posible guardar hasta 6 configuraciones y asignarlas a 6 etiquetas diferentes. El complemento se actualizará tan pronto como se agreguen fuentes a la biblioteca de fuentes de Google. Registra más de 100,000 instalaciones activas, pero, de manera molesta, los anuncios de otros servicios se han incluido con el complemento. Obtiene una calificación de 3.9 Estrellas.

Fuentes de google simples

Fuentes de Google simples 6

El simple complemento Google Fonts se integra con su personalizador de WordPress y le permite crear fuentes personalizadas para su sitio web y obtener una vista previa antes de poner a cero y guardar la fuente que desea. Puede insertar fuentes y variantes de fuentes sin codificación. Cada aspecto de la fuente se puede personalizar: peso, tamaño, altura, color, espaciado. Cuando selecciona una fuente de Google, todas las hojas de estilo para esas fuentes se ponen en cola automáticamente.

Una gran ventaja de este complemento es que no requiere ninguna edición en la hoja de estilo del tema, lo que significa que puede actualizar su tema sin perder las fuentes de Google. El complemento también está listo para traducir con archivos .mo y .po.

El complemento es ideal para los propietarios de sitios web que desean ceñirse a su tema, pero solo quieren cambiar la tipografía sin codificar. O para personas que tienen un conocimiento básico de codificación y desean agregar algunas fuentes personalizadas.

Este complemento ha registrado más de 200,000 instalaciones y ha calificado 4.9 estrellas.

graduación

Ahora que sabe cómo agregar fuentes de Google a un sitio web, es hora de probarlo con algunas variaciones en su sitio web. Tenga en cuenta que agregar demasiados estilos de fuente puede ralentizar su sitio web, así que manténgalo al mínimo que realmente usará.

¡Si te ha gustado no dudes en compartirlo!

Deja un comentario

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad