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

La apariencia y la sensación de un sitio web son de gran importancia para atraer y mantener la atención de los visitantes. El contenido en un sitio web puede estar dominado por texto, imágenes o contenido de medios. El texto, donde sea que se use, ya sea en abundancia o fácilmente, debe elegirse cuidadosamente. La tipografía juega un papel importante en el aspecto general de un sitio web. Las fuentes construidas están disponibles en el navegador, y el archivo style.css generalmente accede a estas fuentes para la pantalla. Esto significa que no hay variación y esto hace que un sitio web esté desprovisto de luz. Pero no tiene que ser así. Puede elegir fuentes que hagan que su sitio sea notable y único. A veces, las fuentes pueden ser el carácter definitorio de un sitio web.
Puede ser útil saber que todas las fuentes caen en uno de los dos tipos: serif, lo que significa que las fuentes tienen una línea o bucle agregado al final de la línea principal o sans -series, lo que significa sin tal línea o bucle. Elegir fuentes Hay muchos lugares donde puede acceder a excelentes fuentes de apariencia, como Fontsquirrel. Verifique que la licencia adjunta a estos recursos le permita usarla para sus propósitos. A menudo, los temas que usa en el sitio web viene con su propia opción de fuentes y realmente debe usarlos. También puede comprar fuentes premium de Typekit.
Al elegir fuentes, elija un estilo que esté sincronizado con el estado de ánimo o el público objetivo de su sitio web. Por ejemplo, el sitio de una escuela de juegos puede usar fuentes que aparecen como escritura de un niño. Si combina dos estilos, elija opuesto, como grueso y delgado. Lo más importante, las fuentes deberían ser legibles. Agregar fuentes de Google a un tema existente puede no ser una buena idea, ya que deberá usar los filtros y los ganchos proporcionados por ese tema para agregar Google Fonts. Dicho esto, Google tiene una gran biblioteca de fuentes, que se actualiza regularmente. En este tutorial, aprenderá cómo integrarlo con su sitio web. Después de haber seleccionado las fuentes, el método de adición varía,
Un método requiere que descargue el archivo de fuentes y esto puede ocupar espacio en el servidor. Además, no todos los archivos de fuentes son compatibles con todos los navegadores.
Otro método requiere el uso de un script de reemplazo para unir los scripts externos a su sitio.
Los complementos se pueden usar para agregar Google Fonts.
Método 1: Agregar fuentes de Google utilizando el código porque este método de integración de fuentes de Google implicará una cierta edición de temas existente, es posible que desee trabajar en un tema secundario para evitar la pérdida de cambios en el momento de la actualización.
Abra la página de Google Fonts en su navegador y verifique las opciones de fuentes disponibles allí. Cuando encuentre el que desee, haga clic en el botón Agregar a la colección contra ese estilo de fuente. Para este tutorial, elijo el estilo de guión de baile con los 700 y 400 pesos. Puede elegir más de un estilo de fuente. En este caso, combine múltiples estilos de fuente con un “|” símbolo. Si el nombre del estilo de fuente usa varias palabras, ingrese un “+” entre palabras. Una ventana emergente se abrirá en la parte inferior de la pantalla. Todos los estilos de fuentes que hayan elegido se mostrarán en esa ventana emergente.
Luego haga clic en el botón Usar a la derecha. Otra página se abrirá en la que puede elegir el peso de las fuentes. El cuadrante derecho indica la velocidad a la que se cargará el sitio web para los estilos y pesos de fuentes respectivos. Si agrega más estilos de fuentes, el dial mostrará la velocidad total para todos los estilos de fuentes juntos. En esta pantalla, también puede agregar cualquier caracteres especiales específicos al idioma que haya elegido.

Baje la página, en relación con el paso 3, verá 3 archivos: Standard, Import y JavaScript. Puede elegir cualquiera de estas pestañas para incorporar el código en su sitio web.

En la pestaña Importar, verá un código que incluye el nombre de fuente (resaltado) que ha seleccionado. @Import URL (http://fonts.googleapis.com/css?family=dancing+script:400,700); Ahora, simplemente puede meter este código en el archivo style.css de su base, aunque este método es fácil de seguir, tiene la desventaja de ralentizar el sitio. Esto se debe al hecho de que el archivo importado tendrá que ser descargado primero y el resto del contenido más adelante. Una mejor manera de agregar Google Font es usar el código generado haciendo clic en la pestaña Estándar. Mentir este código directamente en el encabezado.php puede no funcionar realmente. Y no es aconsejable realizar cambios en los archivos de los archivos principales, ya que todos los cambios se pueden perder en la próxima actualización. Una forma más simple de hacerlo es hacer cambios en las funciones.php en el tema del niño. Esto significa que estos cambios se representarán secuencialmente después de realizar las funciones del padre (y no anularán las funciones del padre).

La conexión generada es una Declaración de Hoja de Estilo. Puede registrar este código en “GoogleFonts” y crear una función Load_Fonts. Esto exprimirá el estilo. Add_action, agregará las fuentes al encabezado. Función 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’); Después de haber terminado de guardar el archivo. Con esta acción, el código se incluirá en el encabezado, mientras que el tema del niño continúa heredando el encabezado.php. Este método mejorará la portabilidad de su tema, al tiempo que lo mantendrá compatible con los complementos.
Solo queda un paso: la integración de Google Fonts en CSS.
Entonces, cambie a la hoja de estilo principal de CSS y agregue una declaración de familia como esta, cuerpo {
Font-Family: ‘Dancing+script’, sans-serif;
Tamaño de fuente: 14px;

Color: #191919;
} Del mismo modo, puede aplicar el mismo formato de estilo para otros elementos y guardar el archivo CSS. Ahora verá que el sitio web se ha actualizado con las fuentes que seleccionó. Si elige ir con el código generado haciendo clic en la pestaña JavaScript, pegue el código en Header.php, inmediatamente después de abrir la etiqueta del cabezal. Método 2: Agregar fuentes de Google con complementos Como mencioné al principio, también puede agregar Google Fonts usando complementos. Instalar y activar estos complementos es bastante fácil. Pero elegir las fuentes correctas con algunos complementos puede ser un poco pegajoso, ya que puede necesitar una cierta personalización con CSS.
Hay muchos complementos que lo ayudan a agregar fuentes a su sitio web, incluidas las fuentes de Google. Para 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 lo ayudarán a agregar Google Fonts. WP Google Fonts
WP Google Fonts agrega el código requerido a su sitio web. Ayudarlo a agregar fuentes del director de Google Fonts de dos maneras –
Desde el panel de administración, puede asignar Google Fonts a ciertos elementos CSS de su sitio web.
O puede trabajar desde la hoja de estilo de su base.

Puede personalizar mucho las fuentes, verificando las opciones en la página de configuración.Sin embargo, no hay opción para obtener una vista previa de las fuentes antes de presionar el botón de rescate.Es posible ahorrar hasta 6 configuraciones y asignarlos a 6 etiquetas diferentes.El complemento se actualiza a medida que las fuentes se agregan a la biblioteca de fuentes de Google.Registra más de 100,000 instalaciones activas, pero molesto, el anuncio de otros servicios se incluyó en el complemento.Obtenga una calificación de 3.9 estrellas. Fuentes de Google ligeros