Comment ajouter des polices et des types de polices Squirrel à votre site Web en 5 étapes faciles

é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

  • Visit 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. Raleway

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?

Outre Helvetica, les polices les plus à la mode à utiliser selon Lifehack comprennent Baskerville, Times, Akzidenz Grotesk, Gotham, Bodoni et Didot.

 

 

À propos de l’auteure
David Attard
Auteur: David AttardSite 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 ...