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:
- lettertypenaam-webfont.eot,
- lettertypenaam-webfont.svg,
- lettertypenaam-webfont.ttf,
- lettertypenaam-webfont.woff,
- 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.
Alstublieft laat een nuttig geef commentaar met je mening, deel dit dan op je Facebook-groep (en) die dit nuttig zouden vinden en laten we samen de vruchten plukken. Bedankt voor het delen en aardig zijn!
Disclosure: Deze pagina kan links bevatten naar externe sites voor producten die we geweldig vinden en die we van harte aanbevelen. Als u producten koopt die we aanbevelen, kunnen we een verwijzingsvergoeding verdienen. Dergelijke vergoedingen hebben geen invloed op onze aanbevelingen en we accepteren geen betalingen voor positieve beoordelingen.