Hoe u lettertype Squirrel-lettertypen en -typen aan uw website kunt toevoegen in 5 eenvoudige stappen

lettertype eekhoorn

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.

 fontsquirrel-lettertypen vinden

 

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.

fontsquirrel download webfont-kit

 

fontsquirrel font face kit downloaden

 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. fontname-webfont.eot,
  2. lettertypenaam-webfont.svg,
  3. lettertypenaam-webfont.ttf,
  4. fontname-webfont.woff,
  5. stylesheet.css

 

lettertype eekhoorn bestanden uploaden

 

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.

 

vind de huidige lettertypefamilie

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.

 

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

Montserrat

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

Open Sans

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

Roboto

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

Raleway

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

Lato

5. Lato

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

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

Vrij Neue

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

Poppins

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

Great Vibes

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

Alex Brush

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

Drijfzand

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

Oswald

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

Bron Sans Pro

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

Playfair display

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

Milkshake

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

Kaushan-script

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

Chunkfive

16. Chunkfive

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

Amatic

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

Allura

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

Competitie Spartan

19. League Spartan

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

Wereldstad

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

Pacifico

21. Pacifico

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

gaan

22. Aller

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

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

Josefin Sans

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

Black Jack

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

kreeft

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

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.

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, de meest trendy lettertypen om te gebruiken volgens Lifehack omvatten Baskerville, Times, Akzidenz Grotesk, Gotham, Bodoni en Didot.

 

 

Over de auteur
David Attard
Auteur: David AttardWebsite: https://www.linkedin.com/in/dattard/
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.

Nog een ding... Wist je dat mensen die nuttige dingen zoals dit bericht delen er ook GEWELDIG uitzien? ​
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.

Auteur (s) Uitgelicht op:  Inc Magazine-logo   Sitepoint-logo   CSS Tricks-logo    webdesignerdepot-logo   WPMU DEV-logo   en nog veel meer ...