easyfonts

Polices faciles

Easy Fonts fournit des classes CSS à utiliser dans HTML comme <div classs="font-open-sans"></div> . Cela facilite l'utilisation des polices Google dans vos projets. Easy Fontts facilite le webfont 2 car vous n'avez plus besoin de répéter les étapes suivantes chaque fois que vous essayez une nouvelle famille de polices:

1. Pas besoin de générer une nouvelle feuille de style de police à chaque fois, et
2. Pas besoin de modifier CSS pour appliquer la police.

Avec des polices faciles, vous pouvez utiliser un seul fichier CSS léger pour importer toutes les polices de votre projet et ne jamais vous soucier d'importer de nouvelles polices.

Pourquoi les polices faciles

Easy Fonts a été développé pour tirer parti de la technique de consolidation de l'hôte utilisé par PageCDN pour accélérer les sites Web. Notre objectif initial était d'autoriser les sites Web qui utilisent PageCDN pour leur livraison de contenu afin de fournir également éventuellement des polices sur le même hôte CDN pour réduire les 2 recherches DNS supplémentaires requises par Google Fonts. Plus tard, les polices faciles se sont révélées être une bibliothèque très utile pour le prototypage rapide. Nous l'avons donc déplacé vers GitHub pour toute personne intéressée par l'auto-hébergement de cette bibliothèque ou l'utiliser en combinaison avec Fonts.google.com.

En utilisant des polices faciles

Easy Fontts fournit une collection de cours CSS pour vous aider à créer des sites Web plus rapidement sans vous soucier de modifier CSS chaque fois que vous devez tester une nouvelle famille de polices. Utilisez une référence facile pour les polices pour en savoir plus sur toutes les familles de polices disponibles et les cours CSS pertinents.

 < 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 vous utilisez fonts.css , les navigateurs téléchargeront uniquement les fichiers de police que vous utilisez réellement dans votre HTML et ne gaspilleront pas la bande passante de l'utilisateur en chargeant toutes les polices. Le fichier fonts.css lui-même est seulement 25 Ko lorsqu'il est chargé à partir de PageCDN. PageCDN utilise Brotli: 11 Compression pour compresser très étroitement le fichier pour conserver la taille dans des limites acceptables.

Importer une police

Le répertoire dist contient des fichiers CSS pour chaque famille de polices individuelles auxquelles vous pouvez vous connecter à partir de votre HTML. Vous pouvez télécharger la bibliothèque pour lire avec des familles de polices individuelles ou un lien vers des fichiers CSS directement à partir de CDN. Vous trouverez ci-dessous le lien pour open sans Font. Pour d'autres familles de polices, voici un outil de recherche pratique.

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

Importation de toutes les polices

Pour tester rapidement différentes polices, les polices faciles facilitent l'importation de toutes les familles de polices à la fois. Pour cela, vous devez utiliser le fichier dist/fonts.css ou utiliser le lien CDN ci-dessous.

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

En utilisant avec Google Fonts

Il est possible d'utiliser des polices faciles et des polices Google ensemble. Voici comment le faire.

 < 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 " />

Importation de polices dynamiquement

Easy Fonts fournit des informations sur les polices au format JSON pour les familles de polices individuelles. Cela vous aide à créer des interfaces de sélection de polices pour les thèmes et les constructeurs de sites Web. Le JSON est situé dans le répertoire dist/info . Vous pouvez charger des informations pour les polices individuelles ou utiliser un fichier JSON tout compris pour toute la collection de polices.

Chargez des informations de toutes les polices

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

Chargez des informations sur la famille des polices uniques

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

Licence

Les fichiers de police TTF à l'intérieur dist/fonts sont des copies non modifiées des fichiers TTF dans Google Fonts GitHub Repo où vous pouvez lire les informations de licence. Les familles de polices individuelles ont leurs propres fichiers de licence dans dist/license . Les fichiers de licence pertinents sont également liés à partir de chaque fichier CSS pour vous aider à afficher facilement les informations de licence.

Les fichiers CSS et JSON dans ce référentiel sont générés par Dynamicaly à partir des fichiers de police et sont couverts par la licence MIT. Si vous êtes au courant d'un problème de licence avec toute famille de polices répertoriée dans ce dépôt, veuillez ouvrir un problème afin que nous puissions résoudre l'écart.