Sådan tilføjes skrifttype egern skrifttyper og typer til dit websted i 5 nemme trin

font egern

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å.

 find skrifttyper

 

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.

skrifttype download webfont kit

 

fontsquirrel download font ansigt 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

 

font egern uploade filer

 

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.

 

find den aktuelle font-familie

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.

 

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

Montserrat

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

Åbne Sans

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

Roboto

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

Raleway

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

Lato

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

Bebas Neue

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

Poppins

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

Store vibber

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

Alex børste

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

Quicksand

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

Oswald

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

Kilde Sans Pro

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

Playfair-skærm

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

milkshake

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

Kaushan script

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

Chunkfive

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

Amatic

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

allura

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

Liga spartansk

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

Metropolis

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

Pacifico

21. Pacifico

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

gå

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

Josefin Sans

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

Black Jack

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

hummer

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.

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, de mest trendy skrifttyper at bruge ifølge Lifehack inkluderer Baskerville, Times, Akzidenz Grotesk, Gotham, Bodoni og Didot.

 

 

Om forfatteren
David Attard
Forfatter: David AttardInternet side: https://www.linkedin.com/in/dattard/
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.

En ting mere... Vidste du, at folk, der deler nyttige ting som dette indlæg, også ser FANTASTISKE ud? ;-)
Vær venlig forlade a nyttigt kommenter med dine tanker, så del dette på din Facebook-gruppe (r), der ville finde det nyttigt, og lad os høste fordelene sammen. Tak fordi du delte og var god!

Afsløring: Denne side kan indeholde links til eksterne websteder for produkter, som vi elsker og helhjertet anbefaler. Hvis du køber produkter, vi foreslår, tjener vi muligvis et henvisningsgebyr. Sådanne gebyrer påvirker ikke vores anbefalinger, og vi accepterer ikke betalinger for positive anmeldelser.

Forfatter (e) Fremhævet den:  Inc Magazine-logo   Sitepoint-logo   CSS Tricks-logo    webdesignerdepot logo   WPMU DEV-logo   og mange flere ...