easyfonts

Fuentes fáciles

Easy Fonts proporciona clases CSS para ser utilizadas en HTML como <div classs="font-open-sans"></div> . Esto facilita el uso de Google Fonts en sus proyectos. Easy Fonts facilita el paso de WebFonts 2, ya que ya no necesita repetir los pasos de Folowing cada vez que prueba una nueva familia de fuentes:

1. No es necesario generar nuevas hojas de estilo de fuente cada vez, y
2. No es necesario editar CSS para aplicar la fuente.

Con fuentes fáciles, puede usar un solo archivo CSS ligero para importar todas las fuentes en su proyecto, y nunca preocuparse por importar nuevas fuentes.

Por qué fuentes fáciles

Easy Fonts se desarrolló para aprovechar la técnica de consolidación del host utilizada por PAGECDN para acelerar los sitios web. Nuestro objetivo inicial era permitir que los sitios web que usen PAGECDN para su entrega de contenido también entreguen opcionalmente fuentes sobre el mismo host CDN para reducir las 2 búsquedas DNS adicionales requeridas por Google Fonts. Más tarde, las fuentes fáciles demostraron ser una biblioteca muy útil para la prototipos rápidos. Por lo tanto, lo trasladamos a GitHub para cualquier persona interesada en la autoestima esta biblioteca o en usarla en combinación con fuentes.google.com.

Usando fuentes fáciles

Easy Fonts proporciona una colección de clases de CSS para ayudarlo a construir sitios web más rápido sin preocuparse por modificar CSS cada vez que necesita probar una nueva familia de fuentes. Use la referencia de fuentes fáciles para aprender sobre todas las familias de fuentes disponibles y las clases relevantes de CSS.

 < link href =" https://pagecdn.io/lib/easyfonts/fonts.css " rel =" stylesheet " />

<!-- Or load specific font files
<link href="https://pagecdn.io/lib/easyfonts/open-sans.css" rel="stylesheet" />
<link href="https://pagecdn.io/lib/easyfonts/roboto.css" rel="stylesheet" />
-->

< div class =" font-roboto " >
    < div class =" font-open-sans w600i " >
        Stuff here appears in Open Sans, bold and italic
    </ div >
    < div class =" w600 " >
        Stuff here appears in Roboto, bold
    </ div >
    < div >
        Stuff here appears in Roboto and uses inherited weight and style
    </ div >
</ div >

:)

Si está utilizando fonts.css , los navegadores descargarán solo los archivos de fuentes que realmente usa en su HTML y no desperdiciará el ancho de banda del usuario cargando todas las fuentes. El archivo fonts.css en sí es de solo 25 kb cuando se carga desde PAGECDN. PAGECDN utiliza la compresión Brotli: 11 para comprimir muy bien el archivo para mantener el tamaño dentro de los límites aceptables.

Importar una fuente

El directorio dist contiene archivos CSS para cada familia de fuentes individuales a la que puede vincular desde su HTML. Puede descargar la biblioteca para reproducir con familias de fuentes individuales o enlaces a archivos CSS directamente desde CDN. A continuación se muestra el enlace a la familia open sans Font. Para otras familias de fuentes, aquí hay una práctica herramienta de búsqueda.

 < link href =" https://pagecdn.io/lib/easyfonts/open-sans.css " rel =" stylesheet " />

Importando todas las fuentes

Para probar rápidamente diferentes fuentes, las fuentes fáciles facilitan la importación de todas las familias de fuentes a la vez. Para esto, debe usar el archivo dist/fonts.css o usar el siguiente enlace CDN.

 < link href =" https://pagecdn.io/lib/easyfonts/fonts.css " rel =" stylesheet " />

Usando con Google Fonts

Es posible usar fuentes fáciles y fuentes de Google juntas. Aquí está cómo hacerlo.

 < link href =" https://fonts.googleapis.com/css2?family=Open+Sans:ital@0;1&display=swap " rel =" stylesheet " > 
< link href =" https://pagecdn.io/lib/easyfonts/classes.css " rel =" stylesheet " />

Importar fuentes dinámicamente

Easy Fonts proporciona información de fuentes en formato JSON para familias de fuentes individuales. Esto le ayuda a construir interfaces de selección de fuentes para temas y constructores de sitios web. El JSON se encuentra en el directorio dist/info . Puede cargar información para fuentes individuales o usar un archivo JSON con todo incluido para toda la colección de fuentes.

Cargar información de todas las fuentes

 https://pagecdn.io/lib/easyfonts/info/fonts.json

Cargar información de la familia de fuentes individuales

 https://pagecdn.io/lib/easyfonts/info/open-sans.json

Licencia

Los archivos de fuentes TTF dentro de dist/fonts son copias no modificadas de los archivos TTF en Google Fonts GitHub Repo, donde puede leer información de licencias. Las familias de fuentes individuales tienen sus propios archivos de licencia en dist/license . Los archivos de licencia relevantes también están vinculados desde cada archivo CSS para ayudarlo a ver fácilmente la información de la licencia.

Los archivos CSS y JSON en este repositorio son dinámicos generados solo a partir de archivos de fuentes y están cubiertos por la licencia MIT. Si está al tanto de un problema de licencia con cualquier familia de fuentes que figura en este repositorio, abra un problema para que podamos resolver la discrepancia.