đŸżïž Font Squirrel - 25 polices populaires + comment ajouter Ă  un site [5 Ă©tapes]

Ă©cureuil de police

GrĂące Ă  des sites comme Font Squirrel, vous pouvez utiliser n'importe quel type ou style de police que vous aimez sur un site Web. Les options Ă©taient auparavant limitĂ©es Ă  quelques polices Web standard que tout le monde devait utiliser. Aujourd'hui, il y a beaucoup plus de choix disponibles. Vous n'ĂȘtes plus limitĂ© Ă  quelques polices compatibles avec le Web. DĂ©sormais, les polices peuvent ĂȘtre tĂ©lĂ©chargĂ©es Ă  la volĂ©e simplement en accĂ©dant Ă  un site Web.

Les sites Web tels que Font Squirrel, avec accÚs à des centaines et des milliers d'articles, sont trÚs populaires. Son générateur de polices Web facilite plus que jamais l'utilisation des soumissions de tiers ainsi que des créations organisées.

PlutÎt que d'utiliser des polices de caractÚres standard telles que Arial, Calibri et Helvetica Neue, nous pouvons utiliser la rÚgle CSS @ font-face. Cela nous permet d'utiliser n'importe quelle police sans avoir à l'installer sur les appareils des visiteurs. C'est une excellente option qui offre la liberté d'expression pour le concepteur du site Web et une convivialité maximale pour l'utilisateur.

Lire la suite: Comment apprendre le CSS (Smashing Magazine)

Cela a rendu extrĂȘmement facile l'ajout de Font Squirrel et de toutes les autres polices de votre choix sur votre site.

Dans ce tutoriel, nous allons vous montrer comment utiliser Font Squirrel sur votre site Web. Vous pouvez utiliser le mĂȘme concept pour ajouter n'importe quelle police de caractĂšres Ă  votre site, y compris FontAwesome. 

Ajouter Font Squirrel Ă  votre site Web

1. Trouvez la police FontSquirrel souhaitée

  • Rendez-vous dans la Police Squirrel et sĂ©lectionnez Rechercher pour rechercher la police que vous souhaitez ajouter.
  • SĂ©lectionnez celui que vous souhaitez utiliser sur votre site Web dans le cadre de votre conception Web. Vous pouvez utiliser les diffĂ©rentes catĂ©gories pour trouver la police que vous souhaitez utiliser, trouver les ajouts les plus populaires, rĂ©cemment ajoutĂ©s, chauds ou tendance. Il y en a des milliers parmi lesquels choisir. SĂ©lectionnez celui qui convient le mieux au projet sur lequel vous travaillez.

 trouver des policespolicesquirrel

 

2. Téléchargez le kit Font Squirrel WebFont

  • Une fois que vous avez sĂ©lectionnĂ© la police que vous souhaitez utiliser, cliquez sur le bouton Kit WebFont en haut Ă  droite de l'Ă©cran.
  • Cliquez sur TĂ©lĂ©charger le kit @ font-face.

fontsquirrel télécharger le kit de polices web

 

fontsquirrel télécharger le kit de visage de police

 Le tĂ©lĂ©chargement contiendra un fichier zip avec un certain nombre de fichiers, y compris comment utiliser la police Web, toutes les licences associĂ©es Ă  cette police Font Squirrel et, bien sĂ»r, le fichier lui-mĂȘme.

3. Téléchargez les fichiers Font Squirrel sur votre site

  • Extraire le fichier - Il sera extrait dans un dossier avec le nom de l'Ă©lĂ©ment que vous avez choisi.
  • TĂ©lĂ©chargez TOUS les fichiers dans le dossier CSS de votre site Web. Vous aurez un certain nombre de fichiers que vous devez tĂ©lĂ©charger, notamment:
  1. nom de police-webfont.eot,
  2. nom de police-webfont.svg,
  3. nom de police-webfont.ttf,
  4. nom de police-webfont.woff,
  5. feuille de style.css

 

fichiers de téléchargement d'écureuil de police

 

4. Ajoutez la police Ă  votre feuille de style CSS

La derniĂšre Ă©tape variera un peu selon la façon dont les polices sont utilisĂ©es sur votre site. Vous trouverez vos dĂ©finitions de caractĂšres dans le fichier CSS. Le fichier doit ĂȘtre appelĂ© feuille de style.css. Vous devriez trouver le fichier CSS utilisĂ© sur votre site et y ajouter les fichiers Font Squirrel en utilisant ce qui suit. Ajoutez ce qui suit Ă  votre fichier stylesheet.css, en remplaçant:

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

Si vous avez téléchargé les polices dans le dossier TYPES, le code changera trÚs légÚrement en:

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

5. Modifiez les déclarations CSS pour utiliser les éléments FontSquirrel ajoutés 

Une fois que vous avez ajouté les déclarations ci-dessus à la feuille de style, vous devrez la modifier un peu plus pour utiliser réellement la police. AprÚs avoir ajouté le code ci-dessus, vous devez modifier davantage la feuille de style pour utiliser les nouveaux types que vous avez ajoutés.

Pour ce faire, remplacez la famille de polices par le nom de l'option que vous avez choisie. Par exemple, si vous souhaitez utiliser le nouveau type avec vos en-tĂȘtes, recherchez le CSS de l'en-tĂȘte, puis modifiez-le en consĂ©quence. 

trouver la famille de polices Current

Mettez à jour la déclaration CSS avec le nom FontSquirrel que vous avez téléchargé.

h1,h2,h3,h4,h5,h6 {
    color: #444;
    text-decoration: none;
    font-family: 'FontName', sans-serif;
}

 Bien sûr, vous pouvez utiliser la famille de polices dans n'importe quelle balise CSS dont vous avez besoin!

Si vous avez suivi correctement toutes les étapes ci-dessus, une fois que vous avez rechargé la feuille de style, vous devriez avoir la nouvelle police Font Squirrel que vous venez d'ajouter à votre site Web!

Sinon, affichez simplement les outils de développement de votre navigateur pour vérifier si tous les fichiers sont correctement accédés. Sinon, revérifiez votre CSS pour vous assurer que vous avez correctement orthographié le nom de la police. 

Si vous cherchez de l'inspiration pour une police Ă  utiliser, voici les 25 polices les plus populaires sur Font Squirrel en ce moment.

Montserrat

1. Montserrat

Montserrat est une police urbaine moderne disponible en plusieurs poids. Il fonctionne de prĂšs et Ă  distance et pourrait bien fonctionner sur le Web.

https://www.fontsquirrel.com/fonts/montserrat

Sans ouvertes

2. Ouvrez Sans

Open Sans ne devrait avoir besoin d'aucune introduction. C'est l'une des polices les plus populaires au monde et elle est propre, moderne et flexible.

https://www.fontsquirrel.com/fonts/open-sans

Roboto

3. Roboto

Roboto est une autre police Web extrĂȘmement populaire grĂące Ă  ses lignes Ă©purĂ©es, son apparence sobre et sa flexibilitĂ©.

https://www.fontsquirrel.com/fonts/roboto

Raleway

4. Voie ferrée

Raleway est similaire en apparence à Roboto mais est également unique. Une autre police propre et légÚre qui fonctionnerait bien dans n'importe quelle situation.

https://www.fontsquirrel.com/fonts/raleway

Lato

5. Lato

Lato existe depuis prÚs de 10 ans grùce à son efficacité, son apparence moderne et son excellent équilibre.

https://www.fontsquirrel.com/fonts/lato

Boire Neue

6. Bebas Neue

Bebas Neue est une interprĂ©tation de la police gratuite originale Bebas Neue par Ryoichi Tsunekawa. C'est une police trĂšs attrayante qui est extrĂȘmement populaire.

https://www.fontsquirrel.com/fonts/bebas-neue

Poppins

7. Poppins

Poppins est une police légÚre et insouciante avec un bon équilibre. Il est également trÚs moderne, ce qui signifie qu'il pourrait fonctionner dans de nombreux modÚles.

https://www.fontsquirrel.com/fonts/poppins

Great Vibes

8. Bonnes vibrations

Great Vibes est une police d'Ă©criture manuscrite fluide qui est toujours lisible sur diffĂ©rentes tailles d'Ă©cran. Cela se prĂȘte bien Ă  ĂȘtre utilisĂ© sur des conceptions haut de gamme.

https://www.fontsquirrel.com/fonts/great-vibes

Alex Brush

9. Brosse Alex

Alex Brush est un autre script de pinceau manuscrit fluide qui est lisible sur différentes tailles d'écran. C'est une approche plus détendue du thÚme avec un attrait certain.

https://www.fontsquirrel.com/fonts/alex-brush

Sables mouvants

10. Sables mouvants

Les sables mouvants sont lĂ©gers et capricieux et ont une sensation aĂ©rienne. Un mĂ©lange de moderne et de fantaisie, la police pourrait ĂȘtre idĂ©ale dans une gamme de conceptions Web.

https://www.fontsquirrel.com/fonts/quicksand

Oswald

11.Oswald

Oswald est une police plus lourde, plus emphatique qui a une grande lisibilité à différentes distances. Il est également sobre et moderne, ce qui fonctionne bien.

https://www.fontsquirrel.com/fonts/oswald

Sans Source Pro

12. Source Sans Pro

Source Sans Pro est une évolution de l'une des premiÚres polices open source d'Adobe. Il a été modifié et amélioré réguliÚrement, ce qui en est l'un des meilleurs exemples.

https://www.fontsquirrel.com/fonts/source-sans-pro

Affichage Playfair

13. Affichage Playfair

Playfair Display est une police plus traditionnelle avec une touche moderne. Il est bien équilibré et pourrait fonctionner dans toutes sortes de situations.

https://www.fontsquirrel.com/fonts/playfair-display

Milkshake

14. Milk-shake

Milkshake est une police plus lourde avec un thĂšme amĂ©ricain. Il a d'abord Ă©tĂ© esquissĂ© avec un pinceau avant d'ĂȘtre transformĂ© en police.

https://www.fontsquirrel.com/fonts/milkshake

Kaushan Script

15. Script de Kaushan

Kaushan Script a un élément asiatique qui évoque des visions de Saigon dans les années 1930. C'est une belle police avec un grand attrait.

https://www.fontsquirrel.com/fonts/kaushan-script

Cinq morceaux

16. Cinq morceaux

Chunkfive est un nom descriptif pour cette police volumineuse. C'est une police audacieuse qui a un impact et pourrait bien fonctionner pour les titres ou les titres.

https://www.fontsquirrel.com/fonts/chunkfive

Amatic

17. Amatique

Amatic rappelle l'Ă©criture au tableau ou les Simpsons mais a pourtant un caractĂšre qui lui est propre. Cela pourrait bien fonctionner sur less sites Web officiels.

https://www.fontsquirrel.com/fonts/amatic

Allura

18. Allura

Allura est une autre police manuscrite fluide qui est trÚs agréable à regarder. Un examen attentif pourrait faire un grand usage de cette police.

https://www.fontsquirrel.com/fonts/allura

Ligue Spartan

19. Ligue Spartan

League Spartan est une police sans fioritures qui a beaucoup de présence. Cela pourrait parfaitement fonctionner comme un titre ou dans un appel à l'action.

https://www.fontsquirrel.com/fonts/league-spartan

MĂ©tropole

20. MĂ©tropole

Metropolis est une police géométrique moderne qui a évidemment été influencée par certaines des polices les plus populaires. C'est une excellente interprétation.

https://www.fontsquirrel.com/fonts/metropolis

Pacifique

21. Pacifique

Pacifico est une police fluide et légÚre qui évoque les jeans Pepe et l'Amérique des années 1960. C'est une police efficace dans un cadre patrimonial.

https://www.fontsquirrel.com/fonts/pacifico

Aller

22. Aller

Aller est un design Ă©purĂ©, lĂ©ger et moderne dont angular l'apparence se prĂȘte bien Ă  la conception Web moderne.

https://www.fontsquirrel.com/fonts/Aller

Josefin Sans

23. Josefin Sans

Josefin Sans parvient Ă  combiner modernitĂ© et hĂ©ritage et pourrait ĂȘtre une police trĂšs flexible dans une vaste gamme de designs.

https://www.fontsquirrel.com/fonts/josefin-sans

Black Jack

24. Jack noir

Black Jack est une police fluide avec une apparence informelle. Cela pourrait bien fonctionner dans des designs décontractés, comiques ou décontractés.

https://www.fontsquirrel.com/fonts/blackjack

Lobster

25. Homard

Le homard a l'apparence d'une marque, peut-ĂȘtre la Nouvelle-Angleterre ou quelque part au bord de la mer. Une excellente police Ă  utiliser si le design convient.

https://www.fontsquirrel.com/fonts/Lobster

Foire aux Questions

Qu'est-ce que Font Squirrel?

Font Squirrel est un rĂ©fĂ©rentiel de polices Web provenant de crĂ©ateurs gratuits et open source. Toutes les polices peuvent ĂȘtre tĂ©lĂ©chargĂ©es et utilisĂ©es gratuitement, mĂȘme Ă  des fins commerciales.

Comment télécharger des polices Web à partir de Font Squirrel?

Le téléchargement de polices Web à partir de Font Squirrel est facile. Identifiez la police que vous souhaitez utiliser, téléchargez le fichier contenant la police. Téléchargez les fichiers sur votre hébergeur et incluez le nom de la police dans votre feuille de style.css. Ensuite, testez pour vous assurer que votre police se charge.

La police la plus populaire actuellement est Helvetica. Selon Wired, Helvetica est la police la plus populaire au monde malgré l'ùge de 62 ans..

Quelle est la police la plus tendance Ă  utiliser?

Hormis Helvetica, les polices les plus tendances Ă  utiliser selon Lifehack incluent Baskerville, Times, Akzidenz Grotesk, Gotham, Bodoni et Didot.

Comment utiliser la police Ă©cureuil ?

AprÚs avoir téléchargé la police que vous souhaitez utiliser, vous pouvez la télécharger sur votre site Web, puis créer le CSS avec la police en suivant les instructions ci-dessus pour inclure cette police dans votre site Web.

À propos de l’auteur
David Attar
Author: David AttarSite Web : https://www.linkedin.com/in/dattard/
David travaille dans ou autour de l'industrie en ligne / numérique depuis 18 ans. Il possÚde une vaste expérience dans les industries du logiciel et de la conception Web utilisant WordPress, Joomla et les niches qui les entourent. En tant que consultant numérique, son objectif est d'aider les entreprises à obtenir un avantage concurrentiel en utilisant une combinaison de leur site Web et des plates-formes numériques disponibles aujourd'hui.

Encore une chose ... Saviez-vous que les personnes qui partagent des informations utiles comme cet article ont l'air géniales aussi? ;-)
Si vous voulez, vous pouvez laisser un incontournable commentez vos pensĂ©es, puis partagez-les sur votre ou vos groupes Facebook qui trouveraient cela utile et rĂ©coltons ensemble les avantages. Merci d'avoir partagĂ© et d'ĂȘtre gentil!

Divulgation: Cette page peut contenir des liens vers des sites externes pour des produits que nous aimons et que nous recommandons sans réserve. Si vous achetez des produits que nous suggérons, nous pouvons percevoir des frais de parrainage. Ces frais n'influencent pas nos recommandations et nous n'acceptons pas les paiements pour les avis positifs.

Auteur (s) présenté sur:  Logo du magazine Inc   Logo Sitepoint   Logo CSS Tricks    logo webdesignerdepot   Logo WPMU DEV   et beaucoup plus ...