imagen porcentaje

Matricúlate con descuentos exclusivos

Programas Exclusivos UAH

imagen promoción

Matricúlate con descuentos exclusivos

Google Fonts se renueva este verano

google-fonts-renovado

Google aprovechó el calor del verano para estrenar el nuevo diseño de Google Fonts, su directorio online de fuentes gratuitas para proyectos de desarrollo web.

Las limitaciones en el uso de tipografías en desarrollo web…

Tradicionalmente y para garantizar la correcta visualización de los diseños web en HTML, el desarrollador / diseñador web veía limitada su capacidad de elección de tipografías. La limitación venía impuesta por el lado del usuario y que éste tuviera instalada esa tipografía, para que en su defecto, el navegador seleccionara una “Font-Family” equivalente: serif, sans-serif, cursive, fantasy o monospace; con una serie de fuentes predefinidas de aspecto similar como alternativas. Una solución que solventaba en problema a medias.

… hasta que llegó Google Fonts y su repositorio online de fuentes gratuitas

Antes de Google Fonts, las posibilidades de elección de tipografías en proyectos HTML eran limitadas. Pero desde el lanzamiento de Google Fonts en 2010, se rompieron esos límites. Disponibles en más de 135 idiomas, Google Fonts es un increíble directorio de más de 800 fuentes web gratuitas preparadas para ser utilizadas e integradas en proyectos web, con una licencia de uso Apache.

Otra barrera que cae frente a Adobe Flash

La aparición de Google Fonts supuso otra pequeña piedra en la tumba de la tecnología web de Adobe Flash. Ya que hasta ese momento, si querías aplicar a tu proyecto web una tipografía personalizada (y que no suele estar instalada de serie en equipos Windows y macOS), la única solución era hacerlo mediante un proyecto con Adobe Flash. Perdiendo la indexación del contenido en buscadores web y aumentando los tiempos de carga.

Pero con la llegada de Google Web Fonts (su nombre original) y la popularización de otros servicios similares como los de Adobe (con Adobe Edge Web Fonts y Adobe Typekit), Adobe Flash perdía otra de sus ventajas en comparación con el HTML tradicional. Circunstancia unida al creciente peso de la indexación de contenidos en buscadores para mejorar el posicionamiento SEO del proyecto web, hacía que los desarrolladores web comenzaran a dar la espalda a Adobe Flash.

Una parte importante de la joven e intensa historia de la tecnología web que ya hace unos meses repasamos en el artículo “Adobe Flash: pasado, presente y futuro (HTML5)” y “Adobe Animate CC, el relevo de Flash”. Novedades que todo profesional del diseño y desarrollo web debe considerar en sus nuevos proyectos y que los alumnos del Área de Formación de Marketing Online, Big Data, Social Media y Diseño Web de CICE asimilan desde el primer día de clase.

¿Cómo integrar una Web Font de Google Fonts?

El procedimiento para integrar una tipografía de Google Fonts en un proyecto web o app, es realmente sencillo. Bastará con seleccionar la tipografía adecuada para el proyecto, desplegar sus opciones y entonces:

Personalizar su formato: con diferentes niveles de negrita y combinaciones con cursiva.

google-fonts-customize

O, directamente, copiar el código HTML estándar que deberás pegar en tu página HTML dentro de la etiqueta “head”:

google-fonts-embed

O bien con el formato @Import:

google-fonts-embed-import

El tercer y último paso, sería especificar en la regla CSS la “Font-family” correspondiente.

¿Alguna complicación? ¡Ninguna! En el caso de encontrarse problemas de conexión al servicio de Google Fonts, el navegador web mostrará al usuario una alternativa basada en la familia de fuentes indicada.

Google Fonts se renueva, se simplifica y se potencia

A día de hoy, aún podrás acceder a la versión anterior de Google Fonts y así poder comparar por ti mismo los cambios introducidos en el servicio por Google. Una renovación que implica una simplificación de la interface de usuario, más limpia, con menos elementos de navegación, con más color y con una experiencia de usuario más optimizada.

Las opciones del nuevo Google Fonts, explicadas y en imágenes

A nivel general, disponemos del directorio principal con las más de 800 fuentes disponibles (y aumentando) y de un directorio alternativo con una selección de las 4 fuentes más destacadas del momento (algunas de ellas, creadas por Google).

En la parte superior derecha, encontraremos un cubo de pintura con el que modificar y personalizar el color del fondo de la web para comprobar el resultado visual de la tipografías con diferentes colores de fondo. Y a su derecha, encontrarás una lupa con la que desplegar un navegador de opciones y filtros de búsqueda, diferenciando por familias, orden de visualización de los resultados, idiomas compatibles, números de estilos incluidos, grosor, inclinación y anchura.

google-fonts-directory-opciones

Adicionalmente, y de forma individualizada, al posicionar el cursor sobre cada uno de los resultados mostrados, se muestran más opciones de personalización, como el tipo de texto mostrado (frases, párrafos, alfabeto, números o personalizados), su formato (nivel de negrita y cursiva), y el tamaño de la fuente para comprobar su legibilidad en diferentes usos: para encabezados, pie de página, textos de una noticia, etc.

Múltiples fuentes pueden ser seleccionadas, o mostrar su ficha ampliada con información complementaria, como el glyph (la diferencia entre minúscula y mayúscula), el listado completo de caracteres que ofrece, la biografía de su autor y de la propia fuente, sus diferentes estilos, su compatibilidad visual con otras fuentes, y unos interesantes datos estadísticos de su uso por países, número de veces que ha sido cargada en la última semana y el número de proyectos web que la utilizan en la actualidad. Una información que da una clara indicación de su popularidad.

google-fonts-info

Por último, se pueden aportar opiniones de la fuente elegida y conocer su licencia de uso.

¿Cuál es tu servicio de web fonts favorito?

La libertad de poder elegir entre las más de 800 fuentes web disponibles en Google Fonts para cualquier proyecto, insertando una simple línea de código en la página HTML o en la regla CSS, de forma totalmente transparente para el usuario final, es razón más que suficiente para el enorme auge que han experimentado este tipo de servicios en los últimos años. Es muy probable que ya hayas utilizado en alguna ocasión el servicio de hosting de web fonts de Google o de Adobe, pero desde CICE nos preguntamos ¿cuál es tu favorito y por qué? ¡Comparte tu opinión y experiencia con nosotros!

11/07/2016 | , | Noticias BigData, BI y Marketing Online

Miguel Gómez

Miguel Gómez

Escribe tu comentario

Si quieres personalizar tu avatar, click aquí.
Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *
Recuerda que los comentarios deben ser revisados por un administrador.

O si lo prefieres, déjanos tus datos y nosotros te llamamos.

*Selecciona una titulación

Te llamamos sin compromiso

Puedes llamarnos al 91 401 07 02 (Centro Maldonado) o al 91 435 58 43 (Centro Povedilla).

Si lo prefieres, déjanos tus datos y nosotros te llamamos.

Solo hasta el 25 de marzo

¡MATRÍCULA

GRATIS!

Solo quedan


*Consulta condiciones aquí
Google Fonts se renueva este verano
Buzón de quejas

*Por favor necesitamos que rellenes el formulario con tus datos reales.
Si prefieres escribir de forma anónima puedes hacerlo poniendo la palabra "anónimo" en cada campo.
Recuerda que para contestar tu queja necesitamos que nos facilites un email o teléfono de contacto real, ¡gracias!
SOLICITAR UNA CLASE DE PRUEBA GRATUITA
Google Fonts se renueva este verano

Horario atención al cliente

  • Lunes a viernes

    • De 9 a 14 horas
    • De 16 a 21 horas
  • Sábados

    • De 9 a 14 horas

Teléfono de contacto: 91 435 58 43

Solicita información sobre
Envíanos tu opinión sobre CICE
Nosotros te asesoramos

¿No te decides?

Nosotros te ayudamos. Utiliza nuestro buscador avanzado para encontrar el curso que quieres.