Los premios al diseño, la creatividad y la innovación en internet

El uso de la tipografía como elemento principal de diseño en las últimas tendencias, hace que Google Fonts sea ahora un recurso más valioso que nunca. Su interfaz y sistema de descarga es muy intuitivo y cómodo, a la vez que permite comparar todas las fuentes y estilos disponibles para satisfacer el panorama creativo actual que fusiona tipografía en negrita, fuentes con serifa y de pantalla, párrafos grandes, estilos decorativos, etc. Lea más sobre el protagonismo de la tipografía aquí La tipografía es el nuevo negro. Tendencias en diseño web

Top recommended Google Web Fonts

Aquí puedes encontrar una selección de fuentes que hemos elegido por su aspecto estético, pero sobre todo por su funcionalidad, conteniendo familias con muchos estilos y pesos.
Hemos destacado fuentes optimizadas para interfaces, UI Optimized web fonts, y otras que son especialmente legibles en párrafos, o especialmente cómodas para leer en móvil y legibles en cualquier dispositivo – ya sea smartphone, escritorio o tablet.

  • Alegreya Alegreya Google Fonts Web Fonts
  • B612 B612 Google Fonts Web Fonts
  • Muli Muli Google Fonts Web Fonts
  • Titillium Web Titillium Web Google Fonts Web Fonts
  • Varela Varela Google Fonts Web Fonts
  • Vollkorn Vollkorn Google Fonts Web Fonts
  • IBM Plex IBM Plex Google Fonts Web Fonts
  • Texto Carmesí Texto Carmesí Google Fonts Web Fonts
  • El Cairo El Cairo Google Fonts Web Fonts
  • BioRhyme BioRhyme Google Fonts Web Fonts
  • Karla Karla Google Fonts Web Fonts
  • Lora Lora Google Fonts Web Fonts
  • Frank Ruhl Libre Frank Ruhl Libre Google Fonts Web Fonts
  • Playfair Display Playfair Display Google Fonts Web Fonts
  • Archivo Archivo Google Fonts Web Fonts
  • Spectral Spectral Google Fonts Web Fonts
  • Fjalla One Fjalla One Google Fonts Web Fonts
  • Roboto Roboto Google Fonts Web Fuentes
  • Montserrat Montserrat Google Fonts Web Fonts
  • Rubik Rubik Google Fonts Web Fonts
  • Source Sans Source Sans Google Fonts Web Fonts
  • Cardo Cardo Google Fonts Web Fonts
  • Cormorant Cormorant Google Fonts Web Fonts
  • Trabaja sin Trabaja sin Google Fonts Web Fuentes
  • Rakkas Rakkas Google Fonts Web Fonts
  • Concert One Concert One Google Fonts Web Fonts
  • Yatra One Yatra One Google Fonts Web Fonts
  • Arvo Arvo Google Fonts Web Fonts
  • Lato Lato Google Fonts Web Fonts
  • Abril FatFace Abril Fatface Google Fonts Web Fuentes
  • Ubuntu Ubuntu Google Fonts Web Fonts
  • PT Serif PT Serif Google Fonts Web Fonts
  • Old Standard TT Old Standard TT Google Web Fonts
  • Oswald Oswald Google Fonts Web Fonts

Fonts Optimized for UI

  • PT Without PT Without Google Fonts Mobile Fonts UI
  • Poppins Poppins Google Fonts Mobile Fonts UI
  • Fira Sans Fira Sans Google Fonts Mobile Fonts UI
  • Nunito Nunito Google Fonts Mobile Fonts UI
  • Oxígeno Oxígeno Google Fonts Mobile Fonts UI

Fontas optimizadas para una mayor legibilidad

  • Exo 2 Exo 2 Google Fonts Mobile Fonts UI
  • Open Sans Open Sans Google Fonts Mobile Fonts UI
  • Merriweather Merriweather Google Fonts Mobile Fonts UI
  • Noto Sans Noto Sans Google Fonts Mobile Fonts UI
  • Source Sans Pro Source Sans Pro Google Fonts Mobile Fonts UI

Cómo usar las fuentes web

A estas alturas todo el mundo sabe cómo usar las fuentes web, pero si no estás seguro, sólo tienes que saber que hay dos maneras. La primera es utilizar servicios de fuentes web como Google Fonts, Webtype, Fonts.com o Typekit y descargar la fuente desde sus servidores, como verás en el siguiente ejemplo: 1. Servicios de incrustación de fuentes web

La segunda es alojar la fuente en tu servidor y utilizar la regla @font-face en tu hoja de estilos como puedes ver aquí: 2. Incrustar fuentes usando la regla @font-face

Servicios de incrustación de fuentes web

Google Web Fonts (GWF) o Typekit son sistemas que permiten el uso de fuentes alojadas en sus servidores. GWF es de uso gratuito, no requiere que tengas una cuenta y no tiene límite de tráfico o dominios a diferencia de Typekit. Typekit establece el coste del servicio en función del número de dominios en los que se utiliza la fuente, o del tráfico mensual del sitio. Una de las características más valoradas de GWF es la opción de descargar una versión de escritorio de las fuentes para utilizarlas en la fase de diseño del proyecto.

Implementación

Es realmente rápido y sencillo:

1. Elige una fuente. Puedes añadirla a tu colección o utilizar «quick-use» para generar el código y las opciones de esa fuente.

2. Copia y pega el código generado en tu <Head>

 <head> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine"> </head>

3. La fuente es ahora accesible en tu código CSS

 body { font-family: 'Tangerine', serif; font-size: 48px; }

Aquí puedes consultar un manual ampliado para estilos, subconjuntos de scripts y uso de múltiples fuentes.

Incorporar fuentes usando la regla @font-face

Las fuentes se alojan en el servidor del usuario independientemente de los servicios externos. @font-face era una regla obsoleta de CSS2 que ha sido reintroducida en las especificaciones de CSS3 y es soportada por casi todos los navegadores modernos. Una fuente web es una fuente personalizada que es soportada por diferentes navegadores y viene en formatos como TTF, WOFF, EOT y SVG.

 @font-face { font-family: 'ChunkFiveRegular'; src: url('Chunkfive-webfont.eot'); src: url('Chunkfive-webfont.eot?#iefix') format('embedded-opentype'), url('Chunkfive-webfont.woff') format('woff'), url('Chunkfive-webfont.ttf') format('truetype'), url('Chunkfive-webfont.svg#ChunkFiveRegular') format('svg'); font-weight: normal; font-style: normal; }