🐿️ Font Squirrel - 25 populaire lettertypen + hoe toe te voegen aan een site [5 stappen]

Dankzij sites zoals Font Squirrel kun je elk type of elke stijl lettertype op een website gebruiken. Vroeger waren de mogelijkheden beperkt tot een paar standaard webfonts waar iedereen gebruik van moest maken. Tegenwoordig zijn er veel meer keuzes beschikbaar. U bent niet langer beperkt tot enkele webcompatibele lettertypen. Nu kunnen lettertypen direct worden gedownload door simpelweg naar een website te gaan.

Websites zoals Font Squirrel, met toegang tot honderden en duizenden items, zijn erg populair. De weblettertypegenerator maakt het gemakkelijker dan ooit om inzendingen van derden en samengestelde creaties te gebruiken.

In plaats van standaardlettertypen zoals Arial, Calibri en Helvetica Neue te gebruiken, kunnen we de CSS @font-face-regel gebruiken. Hierdoor kunnen we elk lettertype gebruiken zonder het op de apparaten van bezoekers te hoeven installeren. Dit is een uitstekende optie die de vrijheid van meningsuiting voor de website-ontwerper en maximale bruikbaarheid voor de gebruiker biedt.

Lees verder: Hoe CSS te leren (Smashing Magazine)

Dit heeft het uiterst eenvoudig gemaakt om Font Squirrel en andere lettertypen die u kiest aan uw site toe te voegen.

In deze zelfstudie laten we u zien hoe u Font Squirrel op uw website kunt gebruiken. U kunt hetzelfde concept gebruiken om elk lettertype aan uw site toe te voegen, inclusief FontAwesome. 

Lettertype Squirrel toevoegen aan uw website

1. Zoek het gewenste FontSquirrel-lettertype

• Bezoek Lettertype Squirrel en selecteer Zoeken om te zoeken naar het lettertype dat u wilt toevoegen.
• Selecteer degene die u op uw website wilt gebruiken als onderdeel van uw webontwerp. U kunt de verschillende categorieën gebruiken om het lettertype te vinden dat u wilt gebruiken, de meest populaire, recent toegevoegde, populaire of trending toevoegingen te vinden. Er zijn duizenden om uit te kiezen. Selecteer degene die het beste werkt voor het project waaraan u werkt.

2. Download Font Squirrel WebFont-kit

• Nadat u het lettertype hebt geselecteerd dat u wilt gebruiken, klikt u op de knop WebFont Kit rechtsboven in het scherm.
• Klik op Download @font-face kit.

 De download bevat een zipbestand met een aantal bestanden, waaronder het gebruik van het weblettertype, eventuele licenties die aan dit Font Squirrel-lettertype zijn gekoppeld en natuurlijk het bestand zelf.

3. Upload de Font Squirrel-bestanden naar uw site

• Pak het bestand uit - Het wordt uitgepakt naar een map met de naam van het item dat je hebt gekozen.
• Upload ALLE bestanden naar de CSS-map van uw website. Je hebt een aantal bestanden die je moet uploaden, waaronder:

1. lettertypenaam-webfont.eot,
2. lettertypenaam-webfont.svg,
3. lettertypenaam-webfont.ttf,
4. lettertypenaam-webfont.woff,
5. stylesheet.css

4. Voeg het lettertype toe aan je CSS-stylesheet

De laatste stap zal een beetje variëren, afhankelijk van hoe lettertypen op uw site worden gebruikt. U vindt uw letterbeelddefinities in het CSS-bestand. Het bestand moet worden aangeroepen stylesheet.css. U moet het CSS-bestand vinden dat op uw site wordt gebruikt en de Font Squirrel-bestanden daar toevoegen met behulp van het volgende. Voeg het volgende toe aan uw stylesheet.css-bestand, ter vervanging van:

@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;
}

Als je de lettertypen naar de map TYPES hebt geüpload, verandert de code heel licht in:

@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. Wijzig de CSS-declaraties om de toegevoegde FontSquirrel-items te gebruiken 

Nadat u de bovenstaande declaraties aan de stylesheet hebt toegevoegd, moet u deze iets meer bewerken om het lettertype daadwerkelijk te gebruiken. Nadat u de bovenstaande code hebt toegevoegd, moet u de stylesheet verder bewerken om de nieuwe typen te gebruiken die u hebt toegevoegd.

Doe dit door de font-familie te wijzigen in de naam van de door u gekozen optie. Als u bijvoorbeeld het nieuwe type met uw kopteksten wilt gebruiken, zoekt u de CSS van de koptekst en wijzigt u deze dienovereenkomstig. 

Werk de CSS-declaratie bij met de FontSquirrel-naam die u hebt gedownload.

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

 Natuurlijk kun je de font-familie gebruiken in elke CSS-tag die je nodig hebt!

Als je alle bovenstaande stappen correct hebt gevolgd, zou je, zodra je de stylesheet opnieuw hebt geladen, het nieuwe Font Squirrel-lettertype moeten hebben dat je zojuist aan je website hebt toegevoegd!

Als dat niet het geval is, opent u de ontwikkelaarstools van uw browser om te controleren of alle bestanden correct worden geopend. Als dit niet het geval is, controleert u uw CSS opnieuw om er zeker van te zijn dat u de naam van het lettertype correct hebt gespeld. 

Bekijk hoe je dit doet als YouTube-video en hoe het lettertype in een WordPress-thema te veranderen.

25 populairste lettertypen op Font Squirrel

Als je op zoek bent naar inspiratie voor een lettertype om te gebruiken, zijn hier de 25 populairste lettertypen op Font Squirrel nu.

1. montserrat

Montserrat is een modern stedelijk lettertype dat beschikbaar is in meerdere gewichten. Het werkt van dichtbij en op afstand en zou goed kunnen werken op internet.

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

2. Open Sans

Open Sans behoeft geen introductie. Het is een van de meest populaire lettertypen ter wereld en is schoon, modern en flexibel.

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

3. Roboto

Roboto is een ander immens populair weblettertype dankzij de strakke lijnen, het no-nonsense uiterlijk en de flexibiliteit.

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

4. Raleway

Raleway lijkt qua uiterlijk op Roboto, maar is ook uniek. Nog een schoon en licht lettertype dat in elke situatie goed zou werken.

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

5. Lato

Lato bestaat al bijna 10 jaar dankzij zijn effectiviteit, moderne uitstraling en geweldige balans.

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

6. Bebas Neue

Bebas Neue is een interpretatie van het originele gratis lettertype Bebas Neue door Ryoichi Tsunekawa. Het is een zeer aantrekkelijk lettertype dat immens populair is.

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

7. Poppins

Poppins is een licht en zorgeloos lettertype met een goede balans. Het is ook door en door modern, wat betekent dat het in veel ontwerpen kan werken.

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

8. Geweldige sfeer

Great Vibes is een vloeiend lettertype in handschriftstijl dat nog steeds leesbaar is op verschillende schermformaten. Dit leent zich goed om te worden gebruikt op duurdere ontwerpen.

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

9. Alex Borstel

Alex Brush is een ander vloeiend handgeschreven penseelscript dat leesbaar is op verschillende schermformaten. Het is een meer ontspannen kijk op het thema met een duidelijke aantrekkingskracht.

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

10. Drijfzand

Drijfzand is licht en grillig en voelt luchtig aan. Een mix van modern en grillig, het lettertype zou ideaal kunnen zijn in een reeks webontwerpen.

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

11. Oswald

Oswald is een zwaarder, nadrukkelijker lettertype dat op verschillende afstanden goed leesbaar is. Het is ook no-nonsense en modern wat goed werkt.

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

12. Source Without Pro

Source Sans Pro is een evolutie van een van Adobe's eerste open source-lettertypen. Het is gestaag aangepast en verbeterd, en dit is een van de beste voorbeelden.

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

13. Playfair-weergave

Playfair Display is een meer traditioneel lettertype met een moderne twist. Het is goed uitgebalanceerd en kan in allerlei situaties werken.

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

14. Milkshake

Milkshake is een zwaarder lettertype met een Amerikaans thema. Het werd aanvankelijk geschetst met een penseel voordat het werd omgezet in een lettertype.

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

15. Kaushan-script

Kaushan Script heeft een Aziatisch element dat visioenen oproept van Saigon in de jaren dertig. Het is een mooi lettertype met een brede aantrekkingskracht.

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

16. Stuk vijf

Chunkfive is een beschrijvende naam voor dit dikke lettertype. Het is een vetgedrukt lettertype dat indruk maakt en goed zou kunnen werken voor koppen of koppen.

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

17. Amatisch

Amatic doet denken aan het schrijven op een schoolbord of The Simpsons, maar heeft toch een geheel eigen karakter. Het zou goed kunnen werken op less formele websites.

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

18. Allura

Allura is een ander vloeiend handgeschreven lettertype dat zeer aangenaam is voor het oog. Zorgvuldige overweging zou veel gebruik kunnen maken van dit lettertype.

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

19. Liga Spartaans

League Spartan is een no-nonsense lettertype dat veel aanwezig is. Het kan perfect werken als kop of als oproep tot actie.

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

20. Metropool

Metropolis is een modern geometrisch lettertype dat duidelijk is beïnvloed door enkele van de meer populaire lettertypen. Dit is een geweldige interpretatie.

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

21. Stille Oceaan

Pacifico is een luchtig, vloeiend lettertype dat doet denken aan Pepe-jeans en Amerika uit de jaren 1960. Het is een effectief lettertype in een historische setting.

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

22. Alles

Aller is een schoon, licht en modern ontwerp waarvan de angular uitstraling leent zich goed voor modern webdesign.

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

23. Josefin Sans

Josefin Sans slaagt erin moderniteit te combineren met erfgoed en zou een zeer flexibel lettertype kunnen zijn in een enorm scala aan ontwerpen.

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

24. Zwarte jack

Black Jack is een vloeiend lettertype met een informele uitstraling. Het zou goed kunnen werken in relaxte, komische of ontspannen ontwerpen.

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

25. Kreeft

Kreeft heeft de uitstraling van een merk, misschien New England of ergens aan zee. Een geweldig lettertype om te gebruiken als het ontwerp past.

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

Veelgestelde Vragen / FAQ

Wat is Lettertype Eekhoorn?

Font Squirrel is een opslagplaats van weblettertypen die afkomstig zijn van gratis en open source-makers. Alle lettertypen kunnen gratis worden gedownload en gebruikt, zelfs commercieel.

Hoe download ik weblettertypen van Font Squirrel?

Het downloaden van weblettertypen van Font Squirrel is eenvoudig. Identificeer het lettertype dat u wilt gebruiken, download het bestand met het lettertype. Upload de bestanden naar uw webhost en neem de naam van het lettertype op in uw stylesheet.css. Test vervolgens of uw lettertype wordt geladen.

Wat is op dit moment het meest populaire lettertype?

Het meest populaire lettertype op dit moment is Helvetica. Volgens Wired is Helvetica het populairste lettertype ter wereld, ondanks dat het 62 jaar oud is.

Wat is het meest trendy lettertype om te gebruiken?

Afgezien van Helvetica, zijn de meest trendy lettertypen die volgens Lifehack kunnen worden gebruikt, Baskerville, Times, Akzidenz Grotesk, Gotham, Bodoni en Didot.

Hoe lettertype eekhoorn te gebruiken?

Nadat u het lettertype dat u wilt gebruiken heeft gedownload, kunt u dit uploaden naar uw website en vervolgens de CSS maken met het lettertype volgens de bovenstaande instructies om dit lettertype in uw website op te nemen.

Over de auteur

Auteur: David AttardWebsite: https://www.linkedin.com/in/dattard/E-mail: David@collectiveray.com

David heeft de afgelopen 18 jaar in of rond de online / digitale industrie gewerkt. Hij heeft uitgebreide ervaring in de software- en webdesign-industrie met WordPress, Joomla en niches eromheen. Als digitale consultant richt hij zich op het helpen van bedrijven om een ​​concurrentievoordeel te behalen door een combinatie van hun website en digitale platforms die vandaag beschikbaar zijn.