Hoy aprenderemos qué es la nueva fuente de Google y cómo implementarla de inmediato en sus diseños.
¡Es de uso gratuito y se puede instalar en menos de un minuto una vez que aprendas!
Introducción
En el último año, ha habido bastante explosión de opciones para implementar fuentes personalizadas en la web. Todo el mundo sabe que el futuro de la tipografía web es brillante, pero nadie sabe exactamente cuál será el resultado.
Varias compañías han visto con razón esta tecnología en ciernes como una forma de ganar algo de dinero. Recientemente hemos analizado en profundidad algunas de las opciones disponibles en este ámbito. Nuestros artículos sobre TypeKit y FontDeck muestran que estas soluciones son rápidas, fáciles y no tan diferentes. Sin duda, estos tipos de servicios continuarán brindando toneladas de fuentes premium a precios asequibles durante algún tiempo.
Sin embargo, si echa un vistazo a la tecnología realmente popular en la web, verá surgir una tendencia: gratis. HTML, CSS, JavaScript, PHP, no cuestan ni un centavo para usar. Por lo tanto, es razonable pensar que el futuro real de la tipografía web reside en una solución gratuita que puede ser utilizada por las masas sin condiciones.
¿Un cambiador de juego?
Obviamente, cuando Google lanza su sombrero a cualquier anillo, tiene una tendencia a cambiarlo todo. Recientemente, Google (junto con Typekit) lanzó silenciosamente una API de fuente web que podría resultar en un cambio a largo plazo. Mientras que otras compañías están estableciendo membresías, planes de pago y suscripciones, Google decidió renunciar a un servicio exclusivo para miembros completamente a favor de proporcionar una forma gratuita y fácil para que cualquier desarrollador web cargue rápidamente fuentes personalizadas en un diseño web.
Para ver cómo funciona todo, veamos un ejemplo rápido. Antes de comenzar, aquí hay una vista previa rápida y una demostración en vivo de lo que estaremos construyendo.
El HTML
Para aumentar la diversión, usemos HTML5 y CSS3 junto con la fuente de API de Google. De esa manera, ¡podremos realmente ver el futuro posible del diseño web! Tenga en cuenta que todavía hay algunos problemas de compatibilidad del navegador con estas tecnologías. Por lo tanto, si está utilizando un navegador de succión, sepa que su experiencia se reducirá un poco, pero debería degradarse bien.
El código de inicio
Para empezar, pegue un fragmento de código HTML5 en blanco.
Esta es una versión modificada de un archivo de inicio que encontré en Snipplr que contiene un truco de JavaScript para ayudar al buen IE antiguo junto con HTML5.
Los divs
Mantendremos la página muy simple e incluiremos solo un encabezado, una copia de subtítulo y un pie de página simple. Esto nos dará tres áreas únicas para jugar. Usaremos estas áreas para implementar dos fuentes diferentes de la API de Google.
Como puede ver, he usado una etiqueta h1 para el titular, una etiqueta p para el subtítulo y la etiqueta de pie de página HTML5 para el pie de página. Para este último, he incluido una lista de enlaces desordenados para tener algo ahí abajo. Siéntase libre de cambiar por completo todo esto si lo sigue, ya que realmente no importa lo que inserte, siempre y cuando tenga una copia.
En este punto, debes tener algo básico y feo como en la captura de pantalla de abajo.
¡Eso es todo el HTML que necesitaremos! Vamos a saltar al CSS.
El CSS
Para el CSS, elegí implementar un bonito efecto de tipografía inspirado en este tutorial de Line25 CSS3. En los navegadores que no admiten la sombra de texto, el texto seguirá siendo perfectamente legible y debe mantener el webfont de Google.
Estilos básicos
Primero implementaremos un restablecimiento de CSS súper básico y aplicaremos un color de fondo.
El encabezado
Siguiente lanzamiento en algunos estilos para el titular. Queremos un color de fuente que sea más oscuro que el fondo y un color de sombra que sea más claro que el fondo para crear esa bonita ilusión de tipografía.
Fíjate que también centramos la div y el texto. Por lo general, evito los diseños web centrados por varias razones, pero esto es simplemente para mostrar un poco de texto para que un div centrado funcione perfectamente. Si no te gusta, siéntete libre de alinear tu texto a la izquierda.
El subtítulo
El siguiente es el subtítulo o copia del párrafo. Diseñaremos esto esencialmente de la misma manera que el título, solo que más pequeño.
Tenga en cuenta que también hemos lanzado algunos estilos de enlace y desplazamiento. Cuando el usuario se desplaza sobre un enlace, se convertirá en un color más claro y el efecto de tipografía se convertirá en una sombra normal.
El pie de página
Finalmente, convertiremos nuestra lista desordenada en una línea horizontal de copia espaciada uniformemente.
Aquí apliqué estilos de enlace y desplazamiento similares a los de la copia de párrafo y agregué algo de relleno para espaciar los enlaces.
Previsualización previa a la fuente
Tenga en cuenta que he omitido intencionalmente cualquier referencia de familia de fuentes. Esto se debe a que, en nuestro próximo paso, insertaremos algunas de las fuentes de la API de Google. Por ahora, su página debería verse como la captura de pantalla siguiente. Tenga en cuenta que sus fuentes probablemente diferirán según los valores predeterminados en su navegador.
Como puede ver, nuestro efecto de tipografía está funcionando bien. Es sutil pero hace que el texto se vea un poco mejor.
Adición de fuentes con la API de fuentes de Google
Ahora que tenemos una página básica para jugar, ¡es hora de cargar algunas fuentes! Primero pase por la página de Google Font API y haga clic en el Directorio de fuentes de Google.
Aquí verá una breve lista (actualmente 18) de fuentes para elegir. Cada fuente tiene varias variantes y subfamilias para elegir. Cuando encuentre uno que le guste, haga clic en él para ver las opciones adicionales. Voy a elegir? IM Fell? y la primera familia bajo esta fuente (IM Fell DW Pica).
Cuando llegues a la pantalla de arriba, haz clic en "Obtener código". lengüeta. Bajo esta pestaña encontrará los fragmentos de código que necesitará para insertar la fuente en su página web. Hay dos formas de importar la fuente: enlazando en la sección de encabezado de su HTML o usando una declaración @import. Usaremos ambos para tener una idea de cómo funcionan.
Método 1: Enlace principal
Primero, tome el fragmento de código que se parece al de abajo y péguelo en la parte superior de su página HTML.
Ahora copie el fragmento de código CSS y péguelo en las secciones de encabezado y subtítulo de su hoja de estilo.
¡Eso es! Solo dos acciones de copiar y pegar y usted tiene una nueva fuente web de lujo.
Método 2: @Import
Ahora para la fuente de pie de página, repetiremos el mismo proceso con un cambio. Encuentra la fuente? Inconsolata? de la lista de fuentes de Google, vaya a "¿Obtener código? ¿Pestaña y mira debajo de? Variantes de fuentes y técnicas avanzadas? Sección para el siguiente fragmento de código:
Simplemente pegue esto en la parte superior de su página CSS, luego copie el fragmento de código CSS de la familia de fuentes y péguelo en la sección de pie de página.
Voila! Ahora su pie de página debe contener la fuente Inconsolata.
Vista previa final
Ahora que hemos terminado, eche otro vistazo a la vista previa para verlo en acción. Haga clic en la imagen para ver la demostración en vivo.
Para obtener más control avanzado sobre la carga de fuentes, consulte el WebFont Loader, una biblioteca de JavaScript provista por Google para ayudarlo a ajustar el proceso.
Pros
No hace falta decir que esta es la solución webfont más rápida y sencilla que he encontrado. Sé que dije eso en artículos anteriores, ¡pero estas cosas siguen mejorando y mejorando! La falta de un proceso de registro es un ahorro de tiempo real para el sistema de Google. Además, ya que no tiene que pasar por el lío de registrar nombres de dominio específicos para la licencia de las fuentes, ¡incluso puede probarlos localmente en su proceso de desarrollo! Esta perfecta integración en mi flujo de trabajo actual fue un gran estímulo para mí, ya que odiaba desarrollar localmente con la fuente incorrecta y aplicar la fuente personalizada en la página en vivo.
Al igual que con casi todas las soluciones populares de webfont, el sistema de Google está usando @ font-face para hacer el trabajo. Entonces, ¿por qué no hacerlo tú mismo? Chris Coyier señala tres ventajas principales en su artículo sobre la API de fuentes de Google: • Ahorro de ancho de banda (el peso está en Google), la velocidad de almacenamiento en caché (la misma fuente utilizada en varios sitios, la caché del navegador se activa) y la velocidad en general (el CDN de Google es más rápido que su sitio).
Así que esencialmente se reduce a la velocidad de la velocidad y la velocidad! Solo una nota técnica adicional en caso de que se lo esté preguntando: todo el texto es completamente seleccionable y se copia / pega muy bien. Odio que las fuentes personalizadas se puedan seleccionar en un sitio, ¡pero no se copian correctamente!
Contras
Una de las desventajas más grandes es que actualmente hay muy pocas fuentes para elegir, lo que realmente puede limitar sus diseños. Por ejemplo, originalmente iba a usar un buen script fluido, pero odiaba las dos opciones que Google me dio.
Tenga en cuenta que este sistema todavía es muy nuevo, por lo que puede esperar verlo crecer mucho más a medida que se agregan nuevas fuentes gratuitas. Sin embargo, es probable que nunca vea la calidad y la diversidad que obtendrá de una opción premium como FontDeck o TypeKit.
Además, como señalaron los chicos de FontSquirrel en un tweet reciente, no hay una versión SVG de la fuente provista, lo que significa que tendrá que crear la suya propia si desea compatibilidad con iPhone / iPad.
Mi queja final es que definitivamente hay algunos problemas notables de kerning con algunas de las fuentes disponibles (de nuevo, recuerde que son gratis). Soy un tipo impreso, así que esto realmente me hace temblar. Probablemente sea posible solucionarlo con CSS, solo será un poco tedioso y molesto.
Conclusión
Google Font API representa otro capítulo más en la historia de los métodos de @ font-face para crear tipografías más diversas en la web. Aunque las opciones de fuente actualmente son limitadas, esta es definitivamente la mejor implementación que he probado hasta ahora, ya que es muy rápida y fácil.
La capacidad de renunciar a un proceso de registro y realizar pruebas locales sin los dolores de cabeza del registro de un dominio específico son características realmente ganadoras para mí, pero me encantaría escuchar lo que piensas. ¿Te gusta el sistema de Google y si es así, lo usarás? Use la sección de comentarios a continuación para compartir sus pensamientos.