🐿️ Font Squirrel - 25 populære skrifttyper + Sådan tilføjes til et websted [5 trin]

Takket være websteder som Font Squirrel kan du bruge enhver type eller stil af font, du kan lide på et websted. Indstillingerne plejede at være begrænset til et par standard webskrifttyper, som alle måtte bruge. I dag er der mange flere valgmuligheder. Du er ikke længere begrænset til et par webkompatible skrifttyper. Nu kan skrifttyper downloades på farten blot ved at få adgang til et websted.

Hjemmesider som Font Squirrel med adgang til hundreder og tusinder af varer er meget populære. Webgeneratoren til skrifttyper gør det lettere end nogensinde at bruge tredjepartsindlæg såvel som kuraterede kreationer.

I stedet for at bruge standard skrifttyper som Arial, Calibri og Helvetica Neue, kan vi bruge CSS @ font-face-reglen. Dette giver os mulighed for at bruge enhver skrifttype uden at skulle installere den på besøgendes enheder. Dette er en fremragende mulighed, der giver ytringsfriheden for webstedsdesigneren og maksimal brugervenlighed for brugeren.

Læs mere: Sådan lærer du CSS (Smashing Magazine)

Dette har gjort det ekstremt nemt at tilføje Font Squirrel og andre skrifttyper, du vælger, til dit websted.

I denne vejledning vil vi vise dig, hvordan du bruger Font Squirrel på dit websted. Du kan bruge det samme koncept til at tilføje ethvert skrifttype til dit websted inklusive FontAwesome. 

Føj Font Squirrel til dit websted

1. Find den ønskede FontSquirrel-skrifttype

• Besøg Font egern og vælg Find for at søge efter den skrifttype, du vil tilføje.
• Vælg den, du vil bruge på dit websted som en del af dit webdesign. Du kan bruge de forskellige kategorier til at finde det skrifttype, du gerne vil bruge, finde de mest populære, nyligt tilføjede, hotte eller populære tilføjelser. Der er tusinder at vælge imellem. Vælg den, der fungerer bedst til det projekt, du arbejder på.

2. Download Font Squirrel WebFont-sæt

• Når du har valgt den skrifttype, du vil bruge, skal du klikke på WebFont Kit-knappen øverst til højre på skærmen.
• Klik på Download @ font-face kit.

 Overførslen indeholder en zip-fil med et antal filer, herunder hvordan man bruger webskrifttypen, alle licenser, der er knyttet til denne skrifttype, egern, og selvfølgelig selve filen.

3. Upload Font Squirrel-filerne til dit websted

• Uddrag filen - Den ekstraheres til en mappe med navnet på det element, du valgte.
• Upload ALLE filerne til CSS-mappen på dit websted. Du vil have et antal filer, som du skal uploade, herunder:

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

4. Føj skrifttypen til dit CSS-stilark

Det sidste trin vil variere lidt alt efter, hvordan skrifttyper bruges på dit websted. Du finder dine skrifttypedefinitioner i CSS-filen. Filen skal kaldes stylesheet.css. Du skal finde den CSS-fil, der bruges på dit websted, og tilføje Font Squirrel-filerne der ved hjælp af følgende. Føj følgende til din stylesheet.css-fil, og erstatt:

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

Hvis du har uploadet skrifttyperne til TYPES-mappen, ændres koden meget lidt til:

@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. Skift CSS-erklæringerne for at bruge de tilføjede FontSquirrel-emner 

Når du har tilføjet ovenstående erklæringer til typografiarket, skal du redigere det lidt mere for faktisk at bruge typografien. Når du har tilføjet ovenstående kode, skal du redigere stilarket yderligere for at bruge de nye typer, du har tilføjet.

Gør dette ved at ændre fontfamilien til navnet på den indstilling, du har valgt. Hvis du f.eks. Vil bruge den nye type med dine overskrifter - find CSS for headeren, og skift den derefter. 

Opdater CSS-erklæringen med det FontSquirrel-navn, du har downloadet.

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

 Selvfølgelig kan du bruge fontfamilien i det CSS-tag, du har brug for!

Hvis du har fulgt alle ovenstående trin korrekt, skal du have den nye Font Squirrel-font, du lige har tilføjet til dit websted, når du har genindlæst typografiarket!

Hvis ikke, skal du bare åbne din browsers udviklerværktøjer for at kontrollere, om alle filerne får adgang korrekt. Hvis ikke, skal du kontrollere din CSS igen for at sikre, at du stavede skrifttypenavnet korrekt. 

Tjek hvordan du gør dette som YouTube-video og hvordan man ændrer skrifttypen i ethvert WordPress-tema.

25 mest populære skrifttyper på Font Squirrel

Hvis du leder efter inspiration til en skrifttype, du kan bruge, er her de 25 hotteste skrifttyper på Font Squirrel lige nu.

1. Montserrat

Montserrat er en moderne urban skrifttype tilgængelig i flere vægte. Det fungerer tæt og på afstand og kan fungere godt på nettet.

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

2. Åbne Sans

Open Sans behøver ingen introduktion. Det er en af ​​de mest populære skrifttyper i verden og er ren, moderne og fleksibel.

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

3. Roboto

Roboto er en anden uhyre populær skrifttype på nettet takket være dens rene linjer, upræcise udseende og fleksibilitet.

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

4. Raleway

Raleway ligner Roboto, men er også unik. En anden ren og let skrifttype, der fungerer godt i enhver situation.

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

5. Lato

Lato har eksisteret næsten 10 år takket være dets effektivitet, moderne udseende og store balance.

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

6. Bebas Neue

Bebas Neue er en fortolkning af den originale Bebas Neue gratis skrifttype af Ryoichi Tsunekawa. Det er en meget attraktiv skrifttype, der er utrolig populær.

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

7. Valmuer

Poppins er en let og ubekymret skrifttype med stor balance. Det er også grundigt moderne, hvilket betyder at det kan fungere i mange designs.

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

8. Store vibes

Great Vibes er en flydende skrifttypeskrift, der stadig er læselig på forskellige skærmstørrelser. Dette egner sig godt til at blive brugt på eksklusivt design.

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

9. Alex børste

Alex Brush er et andet flydende håndskrevet børste script, der er læsbart på forskellige skærmstørrelser. Det er en mere afslappet tag på temaet med en bestemt appel.

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

10. Kviksand

Kviksand er let og lunefuldt og har en luftig fornemmelse af det. En blanding af moderne og lunefuld, skrifttypen kunne være ideel i en række webdesign.

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

11. Oswald

Oswald er en tungere, mere eftertrykkelig skrifttype, der har stor læsbarhed på forskellige afstande. Det er også unfussy og moderne, som fungerer godt.

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

12. Kilde uden Pro

Source Sans Pro er en udvikling af en af ​​Adobes første open source-skrifttyper. Det er blevet ændret og forbedret støt, med dette som et af de bedste eksempler.

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

13. Playfair-skærm

Playfair Display er en mere traditionel skrifttype med et moderne twist. Det er godt afbalanceret og kan fungere i alle mulige situationer.

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

14. Milkshake

Milkshake er en tungere skrifttype med et amerikansk tema. Det blev oprindeligt tegnet med en pensel, før det blev til en skrifttype.

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

15. Kaushan Script

Kaushan Script har et asiatisk element, der fremkalder visioner om Saigon i 1930'erne. Det er en dejlig skrifttype med bred appel.

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

16. Chunkfive

Chunkfive er et beskrivende navn til denne klumpede skrifttype. Det er en fed skrift, der har indflydelse og kan fungere godt for overskrifter eller overskrifter.

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

17. Amatisk

Amatic minder om tavleskrivning eller The Simpsons alligevel har en helt egen karakter. Det kunne godt fungere less formelle hjemmesider.

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

18. Allura

Allura er en anden flydende håndskrevet skrifttype, der er meget behagelig for øjet. Omhyggelig overvejelse kan gøre stor brug af denne skrifttype.

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

19. Liga spartansk

League Spartan er en no-nonsense skrifttype, der har meget tilstedeværelse. Det kunne fungere perfekt som en overskrift eller inden for en opfordring til handling.

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

20. Metropolis

Metropolis er en moderne geometrisk skrifttype, der tydeligvis er blevet påvirket af nogle af de mere populære skrifttyper. Dette er en god fortolkning.

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

21. Stillehavet

Pacifico er en lethjertet flydende skrifttype, der fremkalder tanker om Pepe-jeans og 1960'ernes Amerika. Det er en effektiv skrifttype i en kulturarvsmiljø.

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

22. Aller

Aller er et rent, let og moderne design hvis angular udseende egner sig godt til moderne webdesign.

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

23. Josefin Sans

Josefin Sans formår at kombinere modernitet med arv og kunne være en meget fleksibel skrifttype i et stort udvalg af designs.

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

24. Black Jack

Black Jack er en flydende skrifttype med et uformelt udseende. Det kunne fungere godt i afslappede, komiske eller afslappede designs.

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

25. Hummer

Hummer ser ud som et brand, måske New England eller et eller andet sted ved havet. En fantastisk skrifttype at bruge, hvis designet passer.

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

Ofte stillede spørgsmål

Hvad er Font Squirrel?

Font Squirrel er et lager af webskrifttyper, der kommer fra gratis og open source-skabere. Alle skrifttyper kan downloades og bruges gratis, selv kommercielt.

Hvordan downloader jeg webskrifttyper fra Font Squirrel?

Det er let at downloade webskrifttyper fra Font Squirrel. Identificer den skrifttype, du vil bruge, download filen, der indeholder skrifttypen. Upload filerne til din webhost og inkluder skrifttypenavnet i dit stylesheet.css. Test derefter for at sikre dig, at din skrifttype indlæses.

Hvad er den mest populære skrifttype lige nu?

Den mest populære skrifttype lige nu er Helvetica. Ifølge Wired er Helvetica den mest populære skrifttype i verden til trods for at være 62 år gammel.

Hvad er den mest trendy font at bruge?

Bortset fra Helvetica inkluderer de mest trendy skrifttyper at bruge ifølge Lifehack Baskerville, Times, Akzidenz Grotesk, Gotham, Bodoni og Didot.

Hvordan bruger man font egern?

Når du har downloadet den skrifttype, du vil bruge, kan du uploade denne til dit websted og derefter oprette CSS'en med skrifttypen i henhold til instruktionerne ovenfor for at inkludere denne skrifttype på dit websted.

Om forfatteren

Forfatter: David AttardInternet side: https://www.linkedin.com/in/dattard/E-mail: david@collectiveray.com

David har arbejdet i eller omkring online / digital industri i de sidste 18 år. Han har stor erfaring inden for software- og webdesignindustrien ved hjælp af WordPress, Joomla og nicher, der omgiver dem. Som digital konsulent er hans fokus på at hjælpe virksomheder med at få en konkurrencemæssig fordel ved hjælp af en kombination af deres hjemmeside og digitale platforme, der er tilgængelige i dag.