¡Hola a todos! Hoy quiero contarte cómo usar API de fuentes de Google para insertar las fuentes que necesita.

A la izquierda puedes ver filtrar y a la derecha hay ejemplos de una variedad de fuentes. Elige el que quieras. Siguiente haga clic en el botón uso rápido.

Después de esto, aparecerá una página frente a usted donde podrá seleccionar los estilos de fuente que necesita.

Por ejemplo, elijamos el estilo normal (400) y negrita (700).

Abajo, bajo el número 3 , puede encontrar el código de inserción. Prefiero elegir conectarme al archivo de estilos, así que haré clic en la pestaña @importar. Copia este código.

Ahora creemos un archivo. índice.html con un párrafo de texto.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, ¿funcionario?

Incluyamos nuestra hoja de estilo en la etiqueta. cabeza

Y en la hoja de estilos, al principio del archivo, pega el código copiado.

@importar URL(http://fonts.googleapis.com/css?family=Open+Sans:400,700);

elegí la fuente Abierto sin como ejemplo. Él es el primero.

En la página con la fuente, debajo del número. 4 , podrás encontrar el estilo que necesitamos. Copiémoslo y apliquémoslo a nuestro párrafo.

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

¡Todo! ¡Ahora puedes disfrutar de tu nueva fuente!

Pero no olvides que también elegimos el estilo atrevido. Para usarlo, simplemente escribe peso de fuente con el número que elegiste en el sitio. En mi caso - 700 .

PAG(
familia de fuentes: "Open Sans", sans-serif;
peso de fuente: 700;
}

Al igual que la negrita, también puedes utilizar el estilo cursiva si lo has elegido en el sitio.

Así de fácil es de usar fuentes de google. Al final, solo vale decir que todas estas fuentes cargan tu sitio. Para hacer esto, cuando selecciona una fuente en el sitio, hay un indicador a la derecha que muestra cuánto tiempo se cargará la página. Asegúrate de que el número no sea demasiado grande y utiliza sólo las fuentes que realmente necesitas. No debes elegir todos los estilos a la vez, nunca se sabe lo útiles que te serán.

Entonces eso es todo. ¡Gracias por su atención y hasta pronto!

Patrocinador del material.
Acondicionadores de aire en la tienda online http://www.technodom.kz/catalog/konditsionery. Aires acondicionados: los mejores productos, préstamos, gran selección, servicio impecable.

Buenas tardes queridos lectores. Probablemente todos sueñéis con hacer que vuestro sitio web o el de vuestro cliente sea más conciso y atractivo.

Uno de los principales factores responsables de la percepción de la información en un sitio web son las fuentes y cómo las usamos juntas. Dado que en un sitio se utilizan con mayor frecuencia dos o más tipos de fuentes, por ejemplo, para los títulos y solo para el texto principal.

Una de las posibilidades para mejorar visualmente la legibilidad de los textos es conectar fuentes de terceros. Después de todo, probablemente todo el mundo sepa lo pobre que es la colección estándar de fuentes cirílicas en Windows, que es responsable de mostrar el texto en el navegador.

Fuentes estándar:

Cufon y @font-face

Ya escribí anteriormente sobre con qué puede conectar fuentes no estándar al sitio. Ahora veamos un método más simple: la regla @font-face en CSS y cargar la fuente desde el almacenamiento de fuentes de Google Fonts.

La diferencia entre Cufon y @font-face es que el primero usa js para emular la fuente y dibuja caracteres usando sus propios medios, mientras que @font-face carga la fuente en la computadora del visitante y el navegador ya la usa para mostrar texto. .

En cualquier caso, Cufon y @font-face reducen la velocidad de carga del sitio, aunque no de forma significativa.

Uso de Google Fonts en un sitio web

No escribiré mucho y durante mucho tiempo daré un ejemplo específico de cómo conectar Google Fonts, usando este blog como ejemplo.

Como puede ver, los títulos y subtítulos de mis artículos no son fuente estándar, ahora en la práctica te mostraré cómo hacer esto y tú intentarás lo mismo en tus sitios.

Seleccionar una fuente en el repositorio

Para que no te asustes, te lo explico: un repositorio es un repositorio, pero de forma burguesa :). Y entonces, vayamos a http://www.google.com/fonts/ y busque una fuente adecuada para usted:

No hay mucho en el menú:
A la izquierda, como puedes ver, hay un bloque con todo tipo de filtros de búsqueda de fuentes, en el que puedes seleccionar, por ejemplo, sólo fuentes latinas o cirílicas. Y encima, la configuración de visualización de ejemplos, que se divide en 4 pestañas:

• Palabra— visualización de varias letras. En este modo, es conveniente comparar muchas fuentes a la vez y ver cómo se ven caracteres específicos;
• Oración— mostrar en forma de una frase;
• Párrafo— se muestra un fragmento de texto grande, que le permitirá comparar visualmente la fuente en el texto mismo;
• Póster— se muestran los títulos; este método de comparación es conveniente para seleccionar la fuente que se utilizará en los títulos.

Conectando la fuente al sitio

Después de eso, en el panel Colección, que se encuentra en la parte inferior, vaya a la pestaña Usar, que es responsable de usar las fuentes de su colección. Aquí verá inmediatamente que Google muestra cuánto se deteriorará la velocidad de carga de la página:

A continuación se muestra un panel con la opción de “tipo de visualización”, seleccione Latín (latín) y Cirílico (cirílico), lo que nos dará la oportunidad de mostrar letras tanto latinas como cirílicas:

Después de esto, pasamos al tercer punto de esta página, es decir, la conexión en sí. Google nos ofrece tres opciones para incrustar sus fuentes: mediante js, manera estándar a través de conexión a y @import en el archivo css. Yo uso el último método.

Abre tu archivo css y escribe la línea que nos proporcionó Google:

Eso es todo, hemos conectado la fuente de Google Fonts al sitio, ¿ahora cómo usarla?

Uso en CSS

Todo es bastante simple, después de conectar la fuente a través de @import, necesitamos escribir instrucciones estándar para aquellas clases e identificadores para los cuales se usará el nuestro. nueva fuente. Por ejemplo:

h1, h2, h3 (familia de fuentes: 'Cuprum', sans-serif;)

Después de todas estas manipulaciones, verá títulos con una fuente nueva y no estándar.

Eso es todo, gracias por su atención y hasta pronto.

Aprender todo por tu cuenta no es fácil, pero sí muy interesante. Si tiene al menos una comprensión superficial de cómo funciona el sitio, entonces es mejor que lo haga usted mismo para implementar su proyecto. Al mismo tiempo, no sólo ahorrarás mucho dinero, sino que también aprenderás muchos “trucos”, secretos, etc. El uso de las fuentes de Google no suele llamar la atención, aunque gracias a ellas el blog puede volverse mucho más interesante.

Servicio

Hace bastante tiempo, apareció en Internet un gran servicio de fuentes web. fue desarrollado por google. Los usuarios pueden utilizarlo de forma gratuita. A pesar de que este tipo de configuración no se considera muy complicada, todavía hubo personas que cometieron errores y no pudieron hacer frente al servicio.

Para ello se desarrolló especialmente un diseño sencillo. Ahora trabajar con Google Fonts se ha vuelto más fácil y el número de visitantes ha aumentado. La biblioteca también se ha ampliado. El año pasado, se rediseñó el servicio, que recibió muchas críticas positivas. Ahora es más fácil para las personas conectar fuentes a sus sitios web y verlas.

Apariencia

Entonces, para aquellos que nunca han estado en un sitio con el diseño antiguo, necesitan tener una idea general de los cambios. En el pasado, el servicio parecía bastante masivo. Había marcos gruesos por todas partes, botones azules llamativos, los gráficos no eran los mejores. resolución alta. Todo esto influyó significativamente en el visitante.

Ahora los desarrolladores se han centrado en Material Design. Todo ha adquirido características refinadas. Apariencia se volvió “más fácil”. La animación sutil y la interactividad se hicieron notables. No hay nada más que te distraiga de elegir la fuente de Google Fonts adecuada.

Existe una adaptación conveniente del recurso para dispositivos móviles. Por supuesto, tal cambio no se nota mucho en el contexto de las innovaciones, pero teniendo en cuenta los errores versión anterior se convertirá en "maná del cielo" para los usuarios ávidos.

Oportunidad

Los diseñadores suelen utilizar este servicio. A pesar de su experiencia y profesionalidad, también trabajan con visualización. El rediseño brindó más oportunidades similares que le permitirían combinar de antemano lo que necesitaría implementar más adelante en su proyecto.

Por lo tanto, el problema de cómo una fuente coincide con otro color y un tercer fondo ha desaparecido. La compañía agregó más herramientas al sitio y una paleta con tonos universales que le permitirían experimentar y descubrir cómo se vería una fuente en particular en un color determinado.

Favoritos

El servicio de fuentes Google Fonts permite a los usuarios utilizar sus opciones favoritas. Una pestaña especial contiene un conjunto de estilos que el desarrollador recomienda utilizar. Estas colecciones se destacan del resto. Están desarrollados por especialistas de Google y agencias de terceros. La mayoría de ellos tienen un estilo determinado y una filosofía especial.

Vista

Uno de los cambios importantes se refería a la elección de las fuentes. Esto significa que anteriormente el usuario veía frente a él una determinada imagen con botones adicionales y uno azul grande, que agregaba la fuente a la colección. En general, esta opción se veía bien, pero el cuadro no siempre tenía una resolución de imagen suficientemente buena con el estilo y, por lo tanto, era difícil determinar sin ambigüedades cómo se vería la fuente.

También surgieron preguntas sobre estos botones adicionales, de los que a primera vista se sabía poco. Tenías que señalarlos o usarlos. Ahora todo ha quedado más o menos claro. Han aparecido características adicionales:

• Seleccione una oración, un párrafo o un elemento de texto personalizado específico.
• Experimentando con el peso de la fuente.
• Ajuste rápidamente los tamaños usando el control deslizante.

Por cierto, cambiar el tamaño de fuente de Google se volvió más adaptable, ya que solo se cambió un ejemplo y no todo lo que hay en la página. EN versión antigua los usuarios podrían ser transferidos de un lado de la página al otro, pero en la nueva simplemente permaneces en el ejemplo que estás ajustando.

Conexión

Si está listo para utilizar este servicio, puede intentar conectar fuentes a su recurso. El proceso de obtención de un enlace es universal. Pueden surgir problemas dependiendo de su sistema CMS. Cada uno utiliza sus propios métodos. Por lo tanto, tendrá que seleccionar opciones separadas para diferentes proyectos.

Veremos cómo obtener un enlace para conectar las fuentes de Google. Debes ir al sitio web oficial de Google Fonts. Allí navegas por un catálogo de estilos y eliges el que más te convenga. Para hacer esto, haga clic en el signo más al lado. Luego, la fuente se agregará a un bloque especial en la parte inferior de la página.

Haga clic en este bloque y luego configúrelo. Aquí puedes elegir el estilo y el alfabeto deseado. Si necesita fuentes cirílicas de Google, consulte la línea cirílica. Posteriormente se generará un enlace. Se puede encontrar en la misma ventana en la pestaña Insertar. Sólo necesitas copiarlo o usarlo. código completo HTML.

Por lo general, en la configuración del sitio hay una configuración para fuentes y colores. Hay opciones estándar y puedes agregar opciones avanzadas. Contienen una opción separada para Google Fonts. Si luego necesita descargar fuentes a través del complemento Supreme Google Webfonts.

Opciones populares

Por supuesto, es difícil juzgar qué estilos son mejores, especialmente para diferentes temas de sitios web. Al crear su sitio web, recuerde que no debe atraerle a usted, sino a su audiencia. Por lo tanto, es mejor echar un vistazo más de cerca a los sitios de la competencia.

Por lo general, en el caso de los recursos comerciales, nadie se preocupa por los estilos. Después de todo, si ves una fuente en Google Chrome en una tienda en línea, es poco probable que te concentres en ella. Pero si tienes un blog frente a ti, lo más probable es que algunas cosas te gusten, pero otras, por el contrario, te irritarán.

Google Fonts ha preparado muchas colecciones que incluyen estilos populares. Por ejemplo, les gusta usar Lobster para bloques de texto individuales. Es difícil de leer cuando todo el artículo está escrito en cursiva y negrita. Pero las inserciones y las citas se ven bien.

Bad Script también es una opción para blogs. La letra cursiva dificulta la lectura de grandes cantidades de texto, pero puede resaltar la idea principal. El estilo imita la escritura a mano. Jura normal 400 es una opción interesante para el alfabeto cirílico. El autor afirma que se trata de un euroestilo de la familia Sans Serif. Realmente queda muy bien y tiene varias variaciones.

¡Hola a todos! Puedes leer sobre lo que escribí en la lección 132. Y en este artículo te contaré cómo puedes conectar fácil y rápidamente una fuente a tu sitio web desde Google Fonts. Al utilizar el servicio Google Font, debe seleccionar una fuente para su sitio y luego conectarla.

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

Cómo conectar Google Fonts a un sitio web

vamos a servicio de google Fuente desde este enlace y seleccionamos la fuente que necesitamos.
Las fuentes se pueden seleccionar a través de un filtro. Es decir, configuramos los parámetros y así el servicio encuentra fuentes con los parámetros seleccionados.

Puede configurar otros parámetros si es necesario: grosor (grosor de fuente), inclinación (inclinación), ancho (ancho de fuente).

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

Cuando se seleccionan los parámetros, el servicio mostrará todas las fuentes que están disponibles con estos.

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

Seleccionar " uso rápido"y vemos desde lado derecho widget de velocímetro. Muestra qué tan rápido se carga la fuente seleccionada. Cómo número más pequeño En este velocímetro, mejor.

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

Hay instrucciones para cada opción. Inglés, cómo conectar correctamente la fuente al sitio. Te mostraré la primera opción " estándar", porque es más sencillo.

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

Luego abra el archivo style.css, busque la fuente que debe cambiarse y agregue una nueva. Simplemente escribimos el nombre de la nueva fuente. Colocamos la fuente de Google Fonts entre comillas, por ejemplo, familia de fuentes: "Aladin",Arial,Helvetica,Sans-serif.

Si no entiendes nada de lo que dije aquí, entonces mira el video donde hablo en detalle, cómo conectar Google Font al sitio de WordPress

______________________
Para la lección 204. sin complemento

Saludos, queridos lectores. Hoy hablaremos sobre Google Fonts (Google Web Fonts), cómo descargarlas y conectarlas al sitio.

vamos al sitio www.google.com/fonts/, en el filtro de la derecha seleccionamos: 1. la categoría deseada, 2. si es necesario, ordenarlas y 3. seleccionar el idioma que necesitamos (si necesita una fuente rusa en el menú de la izquierda, seleccione cirílico).

Entonces hemos elegido la fuente, ahora necesitamos seleccionar su estilo, para hacer esto, expanda el panel en la parte inferior ( Abrir cajón de selección) y vaya a la pestaña PERSONALIZAR y selecciona los estilos e idiomas que necesitas.

Para descargar haga clic en el botón descargar.

Conectando la fuente descargada

Copie las fuentes contenidas en el archivo a la carpeta /fonts, que debe estar en el mismo directorio que la carpeta /css de su sitio HTML.

Conexión estándar de fuentes descargadas se ve así

@font-face ( font-family: "Font_name_any"; src: url("Font_file_name.eot"); src: url("Font_file_name.eot? #iefix") formato("embedded-opentype"), url("Font_file_name .woff") formato("woff"), url("Font_file_name.ttf") formato("truetype"), url("Font_file_name.svg#DSNoteRegular") formato("svg"); peso de fuente: normal; fuente -estilo: normal)

En mi caso la conexión se verá así

/* Código para incluir la fuente en /css/style.css */ @font-face ( font-family: "RobotoRegular"; url("../fonts/RobotoRegular.ttf") format("truetype"); font - estilo: normal; peso de fuente: normal);

Para conectar la fuente que ha elegido al sitio, vaya a la pestaña EMPOTRAR, allí verás 2 métodos de conexión:

1.ESTÁNDAR

Este código debe agregarse a la sección su documento HTML.

2. @IMPORTAR

@import url("https://fonts.googleapis.com/css?family=Roboto:400,700&subset=cyrillic");

Importante. Independientemente del método de conexión, utilice las siguientes reglas CSS para definir estas familias: font-family: 'Roboto', sans-serif; Más sobre esto a continuación.

Problemas