Las mejores fuentes para páginas web profesionales de Google Fonts

Fuentes de letras online para copiar y pegar

Google Fonts, se ha establecido como el recurso tipográfico esencial para creativos digitales. La calidad y naturaleza “open source” de sus fuentes para páginas web y apps, las hace imprescindibles tanto para el uso personal como comercial. La mayor parte de las fuentes de Google Fonts cuentan con numerosos estilos. Otro de los factores clave es que están diseñadas optimizando la legibilidad de sus caracteres en dispositivos digitales. Además la interfaz resulta muy intuitiva y accesible, es muy fácil comparar fuentes y estilos rápidamente.

La tipografía web está viviendo un periodo de gran creatividad gracias a las sucesivas mejoras técnicas en CSS que nos permiten experimentar manipulando y animando caracteres, párrafos y layouts. Estamos hablando de CSS Shapes, Flexbox, CSS Grid y Variable Fonts. Hacía mucho tiempo que los diseñadores web anhelaban poder emular las composiciones del diseño editorial.

Gracias a CSS Grid y Flexbox, podemos escapar de las constricciones del grid.La nueva APi de Google Fonts viene con bastantes mejoras y con una selección de 10 excelentes Variable Fonts con diferentes características como fuentes con serifa, sans-serif, slab, fuentes display o monoespaciadas. Lo increíble de las variable fonts es que nos permite manipular y animar, a través de CSS, una serie de propiedades determinadas por el diseñador de la fuente. Algunas de estas propiedades se limitan al peso de la fuente, pero otras atañen a elementos ornamentales y estructurales de la misma. Resumiendo, las posibilidades creativas son enormes.

Fuentes para páginas web de Google Fonts Esenciales

No queremos demorarnos más, pasamos a mostrar selección de fuentes más valoradas por los diseñadores y el jurado de Awwwards. Algunas destacan por sus cualidades estéticas, otras por su versatilidad o cualidades funcionales. Todas ellas con familias tipográficas con numerosos estilos y pesos.
También hemos querido destacar fuentes que han sido especialmente diseñadas para interfaces y otras que son especialmente legibles en párrafos o resultan particularmente confortables para la lectura en dispositivos móviles.

Fuentes para páginas web y Apps

Alegreya

B612

Muli

Titillium Web

Varela

Vollkorn

IBM Plex

Crimson Text

Cairo

BioRhyme

Karla

Lora

Frank Ruhl Libre

Playfair Display

Archivo

Spectral

Fjalla One

Roboto

Montserrat

Rubik

Source Sans

Cardo

Cormorant

Work Sans

Rakkas

Concert One

Yatra One

Arvo

Lato

Abril FatFace

Ubuntu

PT Serif

Old Standard TT

Oswald

Fuentes optimizadas para la interfaz de usuario UI

Pt Sans

Poppins

Fira Sans

Nunito

Oxygen

Fuentes optimizadas para legibilidad y legibilidad

Exo 2

Open Sans

Merriweather

Noto Sans

Source Sans Pro

Cómo usar fuentes web

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

La segunda es alojar la fuente en su servidor y usar la regla @font-face en su hoja de estilo, como puede 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 tenga una cuenta y no tiene límite de tráfico o dominios a diferencia de Typekit. Typekit establece el costo del servicio de acuerdo con la cantidad de dominios en los que se usa la fuente o el 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

Realmente es rápido y sencillo:

1. Elija una fuente. Puede agregarlo a su colección o usar «uso rápido» para generar el código y las opciones para esa fuente.

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

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

3. Ahora se puede acceder a la fuente en su código CSS

   cuerpo { familia tipográfica : ' Tangerine' , serif ; tamaño de fuente : 48px ; }   

Aquí puede consultar un manual ampliado sobre estilos, subconjuntos de scripts y el uso de varias fuentes.

Incrustar 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 de CSS2 en desuso que se ha vuelto a introducir en las especificaciones de CSS3 y es compatible con casi todos los navegadores modernos. Una fuente web es una fuente personalizada compatible con 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' ) formato ( 'embedded-opentype' ), url ( 'Chunkfive-webfont.woff' ) formato ( 'woff' ), url ( 'Chunkfive-webfont.ttf' ) formato ( 'truetype' ), URL ( 'Chunkfive-webfont.svg#ChunkFiveRegular' ) formato ( 'svg' ); fuente - peso : normal ; estilo de fuente : normal ; } 

Resumen

Artículo

Las mejores fuentes para páginas web profesionales de Google Fonts

Descripción

Google Fonts, se ha establecido como el recurso tipográfico esencial para creativos digitales. La calidad y naturaleza “open source” de sus fuentes para páginas web y apps, las hace imprescindibles tanto para el uso personal como comercial. La mayor parte de las fuentes de Google Fonts cuentan con numerosos estilos. Otro de los factores clave es que están diseñadas optimizando la legibilidad de sus caracteres en dispositivos digitales. Además la interfaz resulta muy intuitiva y accesible, es muy fácil comparar fuentes y estilos rápidamente.

Autor

Ideakreativa

Publicación

Ideakreativa

Logo