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
Fuentes optimizadas para legibilidad y legibilidad
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 ; }
