Du har ikke brug for tusindvis af fonte for at oprette et flot websted. Men du skal sørge for, at de fonte, du bruger, er synlige for alle, der besøger dit websted. Og det er her websikre fonte kommer ind.

Og hvis du kunne finde websikre fonte, der er a) 100% gratis at bruge og b) ikke behøver at være hosted andre steder for at dine besøgende kan se dem, ville det være en sikker vinder for dig.

Det er nøjagtigt, hvad dette indlæg er skrevet til: vi dækker de 31 bedst web-sikre fonte og viser dig nøjagtigt, hvordan du implementerer dem på dit WordPress-websted.

Brug nedenstående links til at navigere til det afsnit, der interesserer dig mest, eller spring direkte til vores liste med websikker fonte:

Hvilke fonte er sikre på Internettet?

Inkluderet variationer er der over 650.000 forskellige fonte tilgængelige online. fonte, der understøttes af de fleste browsere og operativsystemer, anses for at være websikker. Operativsystemet inkluderer automatisk fontfiler, så besøgende ikke behøver at downloade fonte fra dine servere.

Et eksempel er den allestedsnærværende Arial-font, der fødte tusinder af “spin-offs”.

Er websikker fonte nødvendige i 2021?

Browser markedsandel 2019-2020

Browser markedsandel 2019-2020 (Billedekilde: StatCounter)

Sikker på, at langt størstedelen af ​​brugerne nu bruger Google Chrome, både på mobil og desktop. Men det betyder ikke, at websikker fonte hører fortiden til.

Faktisk varierer understøttede fonte afhængigt af operativsystemerne, inklusive den aktuelle version, en bruger har. Så hvis du designer et websted med en font, der kun understøttes af den nyeste version af Windows 10, vil de fleste brugere se noget andet.

Derudover, hvis du vælger at bruge og hoste for en brugerdefineret lokal font eller font hostet af en tredjepart, kan den bremse dit websted. Så skift til websikker fonte kan fremskynde dit websted. Og det er en god ting. Fordi næsten 70% af forbrugerne siger, at sidehastighed påvirker deres købsbeslutninger.

Er Google Fonts websikker?

Google Fonts understøttes ikke iboende af dit operativsystem, så de er pr. definition ikke websikre fonte. I stedet for, da Google, en tredjepart, er host for dem, kaldes en Google Font en webfont. Forvirrende, vi ved, men forskellen er, at din browser skal indlæse en fil, før den kan vise Google-fonte.

Websikker fonte har allerede font files klar på de fleste enheder. Men bekymre dig ikke om manglen på ordet sikkert. Google-fonte er helt sikre at bruge til at forbedre designet af dit websted. Men de ekstra HTTP-request til en ekstern server kan bremse din sides indlæsningshastighed.

Disse websikre fonte er a) 100% gratis at bruge ✅ og b) behøver ikke at få hosted fra andre steder, for at dine besøgende kan se dem ✅ Find alle 30+ muligheder her ⬇️Click to Tweet

De 31+ bedste websikre fonte

Vi har samlet en liste med over tredive forskellige flotte websikker fonte, du kan bruge til at designe dit websted.

Lad os hoppe lige ind i det.

1. Arial

Eksempel på Arial-font

Eksempel på Arial-font

Arial er en klassisk sans serif-font, der passer til både afsnit og overskrifter. Det har længe været et dagligt syn i webdesign. Selvom det i de senere år ofte bruges som en reserve i en font-stack snarere end som den vigtigste font familie.

Anbefalet font stack

Font-family: Arial, Helvetica Neue, Helvetica, sans-serif.

2. Baskerville

Eksempel på baskerville font

Eksempel på baskerville font

Baskerville er en relativt tyk serif-font, der oprindeligt blev udviklet som et font af John Baskerville i 1750. Designet er velafbalanceret ved hjælp af en blanding af tykke og tynde streger for at blødgøre de hårde kanter på et typisk serif-font. Det understøttes godt af nyere Apple- og Microsoft OS-versioner.

Anbefalet font stack

Font-family: Baskerville, Baskerville Old Face, Garamond, Times New Roman, serif.

3. Bodoni MT / Bodoni 72

Eksempel på Bodoni MT font

Eksempel på Bodoni MT font

Bodoni MT er en serif-font, ligesom Times New Roman, mere egnet til paragraph tekst end overskrifter for de fleste websteder. Bodoni MT er som standard tilgængelig med Microsoft 10 og nogle ældre versioner. Bodoni 72 er inkluderet i macOS Sierra og nyere versioner.

Anbefalet font stack

Font-family: Bodoni MT, Bodoni 72, Didot, Didot LT STD, Hoefler Text, Garamond, Times New Roman, serif.

4. Calibri

Eksempel på Calibri-font

Eksempel på Calibri-font

Calibri er Microsofts standard sans serif-font og har været siden dens frigivelse med Microsoft Office 2007. Den har et blødt, moderne look med afrundede kanter for at hæve den typiske sans serif-følelse, hvilket gør den mere varm end robot.

Anbefalet font stack

Font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif.

5. Calisto MT

Eksempel på Calisto MT-font

Eksempel på Calisto MT-font

Calisto MT er en serif-font med lidt blødere og mindre udtalt serifs end de fleste lignende fonte. Det er en standard Microsoft-font, der følger med de fleste nyere versioner af Windows. MacOS- eller iOS-ækvivalent er fonten Bookman Old Style.

Anbefalet font stack

Font-family: Calisto MT, Bookman Old Style, Bookman, Goudy Old Style, Garamond, Hoefler Text, Bitstream Charter, Georgia, serif.

6. Cambria

Eksempel på Cambria font

Eksempel på Cambria font

Cambria er en endnu blødere serif-font med i mange tilfælde næppe mærkbare serifs selv for store bogstaver. Dette giver det en mere moderne følelse og opretholder også en høj læsbarhed på skærme.

Anbefalet font stack

Font-family: Cambria, Georgia, serif.

7. Candara

Eksempel på Candara-font

Eksempel på Candara-font

Candara er en sans serif font. Det er en del af Microsofts ClearType font collection. MacOS og iOS-ækvivalenten er Optima Regular. De ujævne stroke weights får det til at føles lidt mindre moderne og virksomhedsmæssigt end andre sans serif-fonte.

Anbefalet font stack

Font-family: Candara, Calibri, Segoe, Segoe UI, Optima, Arial, sans-serif.

8. Century Gothic

Eksempel på Century Gothic font

Eksempel på Century Gothic font

Century Gothic er en geometrisk sans serif-font med et meget rent og afbalanceret udseende. Det er en fantastisk font til internettet, især til overskrifter og underoverskrifter. Det blev oprindeligt designet til at konkurrere med fonten Futura. Det følger med de fleste Microsoft- og Apple-operativsystemer.

Anbefalet font stack

Font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif.

9. Consolas

Eksempel på Consolas font

Eksempel på Consolas font

Consolas er en sans serif-font med en unik tilgang til design. Alle tegn har samme bredde, hvorfor det kun bruger serifs til bogstavet “I” og små bogstaver “l”. Det er en del af ClearType-samlingen.

Anbefalet font stack

Font-family: Consolas, monaco, monospace.

10. Copperplate Gothic

Eksempel på Copperplate Gothic

Eksempel på Copperplate Gothic

Copperplate Gothic er en gotisk-inspireret font med små glyfiske serifs på visse bogstaver. Da det er inspireret af gotiske runer, er der ingen små fonte tilgængelige.

Anbefalet font stack

Font-family: Copperplate, Copperplate Gothic Light, fantasy.

11. Courier New

Courier New font eksempel

Courier New font eksempel

Courier New er en serifisk font med monospace, med meget tyndere almindelig tekst end de fleste andre serif- og sans serif-fonte. Det har næsten perfekt dækning af både Microsoft og Apple på både computere og mobile enheder.

Anbefalet font stack

Font-family: Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace.

12. Dejavu Sans

Eksempel på Dejavu Sans font

Eksempel på Dejavu Sans font

Dejavu Sans er en sans serif-font med rene, lige linjer, næsten et throwback til de klassiske sans-fonte som Arial og Verdana.

Anbefalet font stack

Font-family: Dejavu Sans, Arial, Verdana, sans-serif.

13. Didot

Eksempel på font

Eksempel på font

Didot er en font inspireret af de originale Didot-fonte, der blev brugt af det franske tryk-firma fra det 19. århundrede, Didot-familien. Det er en Apple-grundpille, der understøttes af størstedelen af deres operativsystem og enheder.

Anbefalet font stack

Font-family: Didot, Didot LT STD, Hoefler Text, Garamond, Calisto MT, Times New Roman, serif.

14. Franklin Gothic

Eksempel på Franklin gotisk font

Eksempel på Franklin gotisk font

Franklin Gothic er en sans serif-font med usædvanligt tykke bogstaver, næsten som om den dristige version af en anden font. Den originale font blev udviklet i det tidlige 20. århundrede af amerikanske type grundlæggere. Det er et godt valg af font til overskrifter, men det er måske ikke et godt valg til brødtekst.

Anbefalet font stack

Font-family: Franklin Gothic, Arial Bold.

15. Garamond

Eksempel på font Garamond

Eksempel på font Garamond

Garamond er en serif-font, inspireret af fonte lavet af den parisiske gravør fra det 16. århundrede, Claude Garamond. Det har blødere, rundere kanter end nogle af de mere standard serif-fonte, som Times New Roman. Moderne versioner af Microsoft og Apple OS inkluderer deres egne versioner af Garamond-fonten.

Anbefalet font stack

Font-family: Garamond, Baskerville, Baskerville Old Face, Hoefler Text, Times New Roman, serif.

16. Georgia

Eksempel på Georgia font

Eksempel på Georgia font

En nær slægtning til Garamond, Georgia er en anden serif-font med for det meste afrundede kanter og en ret varm følelse. Det blev udviklet til Microsoft i 1996 og er stadig en af de mest udbredte MS-fonte. Det understøttes af stort set alle Windows- og macOS-versioner.

Anbefalet font stack

Font-family: Georgia, Times, Times New Roman, serif.

17. Gill Sans

Eksempel på Gill Sans font

Eksempel på Gill Sans font

Gill Sans er en sans serif-font med skarpe, rene linjer, der giver det et moderne udseende. Det er ikke direkte ideelt til afsnittetekst, på grund af manglende kontrast mellem bogstaver og tæt afstand. Men som du kan se i eksemplet på teksten, skaber det en flot overskrift. De fleste iOS-, macOS- og Windows-drevne enheder understøtter det.

Anbefalet font stack

Font-family: Gill Sans, Gill Sans MT, Calibri, sans-serif.

18. Goudy Old Style

Eksempel på Goudy Old Style font

Eksempel på Goudy Old Style font

Goudy Old Style er en blød gammeldags serif-font med stærke serifs og et gammeldags udseende. Perioderne er diamantformede snarere end de regelmæssige perfekte, runde cirkler af de fleste serif-fonte. Den følger med de fleste nyere versioner af Windows.

Anbefalet font stack

Font-family: Goudy Old Style, Garamond, Big Caslon, Times New Roman, serif.

19. Helvetica

Helvetica font

Helvetica font dokumentar (Kilde: Kanopy)

Helvetica er måske den mest berømte font nogensinde og bestemt en af de eneste fonte, der har sin egen dedikerede dokumentar. Det er en moderne font med sans serif, inspireret af andre moderne schweiziske og tyske fonte fra slutningen af det 19. og det tidlige 20. århundrede.

I stedet for et blødt, afrundet og varmt design er det afbalanceret og fokuseret på rene linjer og former. Dette gør det til en af de få fonte, der er velegnede til både body copy og headers. Alle Apple-enheder inkluderer Helvetica-fonte, mens Microsoft som standard er Arial, dets MS-ækvivalent.

Anbefalet font stack

Font-family: Helvetica Neue, Helvetica, Arial, sans-serif.

20. Impact

Eksempel på Impact font

Eksempel på Impact font

Impact er en realistisk sans-serif-font med et meget tykt bold look som standard for al tekst, stort og lille bogstav. Modigheden gør det til at skille sig ud fra almindelig tekst og gør det perfekt til overskrifter eller CTAs (calls to action), men det er ikke ideelt til body copy.

Det var en del af de originale core fonts for the web i 1998. Den er stadig bredt inkluderet og understøttet af både Apple- og Windows-computere og telefoner den dag i dag.

Anbefalet font stack

Font-family: Impact, Charcoal, Helvetica Inserat, Bitstream Vera Sans Bold, Arial Black, sans serif.

21. Lucida Bright

Eksempel på Lucida Bright font

Eksempel på Lucida Bright font

Lucida Bright er serif-fonten i Microsofts serie af Lucida-fonte, der blev udviklet til MS i 1991. En af de ting, der får den til at skille sig ud, er brugen af mere firkantede, mere robuste serifs, for eksempel på hovedstaden “T” og “L” . Det er som standard inkluderet i de fleste nyere versioner af Windows, mens macOS typisk kun inkluderer sans serif-fonten Lucida Grande, hvilket gør Georgien til en logisk fallback font.

Anbefalet font stack

Font-family: Lucida Bright, Georgia, serif.

22. Lucida Sans

Eksempel på Lucida Sans font

Eksempel på Lucida Sans font

Lucida Sans er en ren humanistisk sans serif-font, der er designet specielt til at supplere serif-fontene i Lucida-linjen. Der er en større variation i stroke weight end med de renere sans-fonte som Helvetica eller Arial. Dette får det til at føles lidt mindre futuristisk eller robot og mere legende. Uden for boksen er det en fantastisk font til headers og CTA’er.

Anbefalet font stack

Font-family: Lucida Sans, Helvetica, Arial, sans-serif.

23. Microsoft Sans Serif

Eksempel på Microsoft Sans Serif-font

Eksempel på Microsoft Sans Serif-font

Microsoft Sans Serif er en sans serif-font, der først blev introduceret med Windows 2000. Det er efterfølgeren til MS Sans Serif-fonten, som også blev kendt som Helv (forkortelse for Helvetica). Det er inspireret af og baseret på Helvetica, den førende sans serif-font i moderne tider.

Det er en ren font med jævn slaglængde, hvilket fører til et rent, professionelt udseende. Perfekt til overskrifter og virksomhedswebsteder. Det blev inkluderet som en af de originale fonte til internettet og er stadig standard for alle Microsoft-enheder.

Anbefalet font stack

Font-family: MS Sans Serif, sans-serif.

24. Optima

Eksempel på Optima font

Eksempel på Optima font

Optima er en humanistisk sans serif-font med varierende stroke weight og varierende symmetri. Dette får det til at se næsten ud med hånden, som bekæmper den typiske masseproducerede fornemmelse af en sans serif-font. Det er en af de standard Apple sans serif-fonte og understøttes af de fleste iOS- og macOS-enheder. Microsoft-ækvivalenten er Segoe.

Anbefalet font stack

Font-family: Optima, Segoe, Segoe UI, Candara, Calibri, Arial, sans-serif.

25. Palatino

Eksempel på font fra Palatino

Eksempel på font fra Palatino

Palatino er en anden gammeldags serif og ville føle sig hjemme i enhver online avis eller et magasin. Men det er mindre ensartet end noget som en Georgia eller Times New Roman med forskellige stroke weights og former.

Kæmper du med nedetid og WordPress problemer? Kinsta er hosting løsningen, designet med ydeevne og sikkerhed i tankerne! Check vores planer

Designtilgangen hjælper med at blødgøre skarpe bogstaver som k, l, x, y og z. Det er også lidt dristigere end andre serif-fonte. Disse to faktorer hjælper det med at føle sig lidt varmere. Palatino er inkluderet i de fleste Windows- og Apple-enheder.

Anbefalet font stack

Font-family: Palatino, Palatino Linotype, Palatino LT STD, Book Antiqua, Georgia, serif.

26. Perpetua

Eksempel på Perpetua font

Eksempel på Perpetua font

Perpetua er en serif-font med et unikt design, oprindeligt oprettet af den engelske billedhugger Eric Gill. Der er en skarp kontrast i stroke weight, se f.eks. på små bogstaver “e” eller tallet “3”. Dette giver fonten en kreativ, næsten legende kvalitet. Det er typisk en Windows-font, men Baskerville, en nær slægtning, er standard på de fleste Apple-enheder.

Anbefalet font stack

Font-family: Perpetua, Baskerville, Big Caslon, Palatino Linotype, Palatino, serif.

27. Rockwell

Eksempel på Rockwell font

Eksempel på Rockwell font

Rockwell er en firkantet eller serifisk font med meget fed, næsten monoweight bogstaver. Det er velegnet til overskrifter eller CTA’er, men den ekstra font-weight er ikke god til brødtekst. Det er inkluderet i de fleste nyere versioner af MS Windows.

Anbefalet font stack

Font-family: Rockwell, Courier Bold, Courier, Georgia, Times, Times New Roman, serif.

28. Segoe UI

Eksempel på font til Segoe UI

Eksempel på font til Segoe UI

Segoe UI er den førende sans serif-font i Segoe-font family. Microsoft bruger det ikke kun i mange applikationer, men også i forskellige marketingmaterialer til sine produkter.

Det er en moderne font med symmetriske bogstaver og lille variation i stroke weight. Skrifttypen er ikke inkluderet i Apple-computere, men den tilsvarende Helvetica Neue er ens i udseende.

Anbefalet font stack

Font-family: Segoe UI, Frutiger, Dejavu Sans, Helvetica Neue, Arial, sans-serif.

29. Tahoma

Eksempel på font i Tahoma

Eksempel på font i Tahoma

Tahoma er en anden Microsoft-udviklet sans serif-font. Det har lidt dristigere bogstaver end Segoe UI og bruger firkantede prikker til små bogstaver, punktum og andre mærker.

Det er en ren, ensartet font og føles ikke malplaceret i indhold eller overskrifter. Det er inkluderet i alle Microsoft-enheder og næsten alle Apple-enheder.

Anbefalet font stack

Font-family: Tahoma, Verdana, Segoe, sans-serif.

30. Trebuchet MS

Eksempel på font fra Trebuchet MS

Eksempel på font fra Trebuchet MS

Trebuchet MS er en anden sans serif-font udviklet af Microsoft. Det var en af de originale fonte, der var inkluderet i kernefonterne til webpakken af Microsoft. Det understøttes stadig af stort set alle Microsoft- og Apple-enheder. Bogstaverne er slankere end mange andre sans serif-fonte, hvilket gør det til en mulighed for afsnit og brødtekst.

Anbefalet font stack

Font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, sans-serif.

31. Verdana

Eksempel på Verdana font

Eksempel på Verdana font

Verdana, en ren sans serif-font, er en anden Microsoft-hæfteklammer, der har eksisteret siden 1996. Stroke weight er ret lav for en sans serif, hvilket fører til slanke, letlæselige bogstaver. Du kan bruge det til både paragraph text og headers uden problemer. Det understøttes af stort set alle Apple- og Windows-enheder.

Anbefalet font stack

Font-family: Verdana, Geneva, sans-serif.

Websikker kursive fonte

Hvis du vil bruge en websikker kursiv font, har du ikke for mange muligheder at vælge imellem. Specifikt:

Der er ikke nogen kursive fonte, der understøttes universelt på tværs af Apple- og Microsoft-enheder. Du bør overveje, at brug af en markant font til din body tekst måske ikke er en god ide, da læsbarhed er en stor del af brugervenligheden på hjemmesiden.

Du skal altid bruge meget læselig tekst til dine afsnit, ellers vil besøgende med nedsat syn have svært ved at læse teksten på dit websted. Dette kan føre til høje bounce rates og en generel mangel på engagement med dit indhold.

Websikker Sans Serif-fonte

Sans betyder “uden” på fransk, så sans serif betyder i det væsentlige “uden serif”. En serif er en linje eller et streger tilføjet til et længere slag i et bogstav. For eksempel de små lodrette linjer under det øverste strejke i et stort T, der er almindeligt i aviser eller overskrifter i magasin. Sans serif-fonte er de mest almindelige og populære på internettet, så du har mange muligheder at vælge imellem:

Hvor kan jeg downloade websikker fonte?

Det fantastiske ved websikker fonte er, at du ikke behøver at bekymre dig om at downloade dem. De understøttes allerede af enhver besøgendes operativsystem, så du skal bare kode det med CSS. Hvis du ikke ved noget om HTML og CSS eller kodning til internettet, kan det virke lidt overvældende.

Men stol på os, det er ikke så svært, som du måske tror det er. Vi gennemgår processen trin for trin i vores næste afsnit.

Sådan tilføjes websikker fonte til dit WordPress-websted

Hvis du har et WordPress-sted med det nyeste Twenty Twenty-tema, kan du redigere fontene ved at tilføje tilpasset CSS i WordPress-tilpasningen.

Få adgang til det ved at klikke på linket Udseende> Tilpas i menuen og derefter udvide den ekstra CSS-fane.

WordPress Customizer

WordPress Customizer – ekstra CSS

Derefter skal du bruge Chrome Dev Tools (eller et lignende værktøj til en anden browser) til at identificere vælgerne af den tekst, du vil ændre.

For eksempel kan du inspicere overskriften på dit blogindlæg:

Chrome Dev Tools - inspicér

Chrome Dev Tools – inspicér

Vi kan se, at temaet bruger standard “entry-title” vælgeren til overskriften. Du kan også søge efter attributten “font-family” for at se, hvordan temaet styler teksten, og på hvilket niveau.

Da Twenty Twenty ikke bruger en bestemt font til overskrifter, kan du let ændre overskriftens font ved at målrette mod “font-family” vælgeren.

For eksempel, hvis vi vil ændre overskriften til Impact-fonten, kan vi bruge følgende kode:

h1.entry-title { font-family: Impact, Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif; }

Du skal blot tilføje den til den ekstra CSS og klikke på “Publicer” for at skubbe dine ændringer live.

WP Customizer - Ny header type

WP Customizer – Ny header type

Vi dækker dette og meget mere i vores guide til, hvordan du ændrer fonte i WordPress. Hvis du har bygget dit websted ved hjælp af HTML og CSS, kan du redigere fonten direkte i kildekoden.

Hvis du f.eks. Bruger style tag i HTML-dokumenterne til at anvende CSS-kode på hver side, kan du redigere font-family-attributten der.

Body CSS selector font family

Body CSS selector font family

Hvis du vil ændre fonten for al tekst på siden, skal du målrette “body” -selector. Hvis du vil ændre fonten til en bestemt tekst, skal du bruge en bestemt vælger.

Hvis du brugte en skabelon til at opbygge dit websted, er din CSS sandsynligvis placeret i et separat typografiark. Dette er fantastisk, fordi det betyder, at du kan ændre fonten for hele dit websted ved kun at redigere en fil.

I så fald skal du finde din stylesheet file (typisk navngivet style.css eller en eller anden variation af det). Derefter skal du finde det afsnit, der styrer fontene og fontene på dit websted.

Eksempel på CSS stylesheet

Eksempel på CSS stylesheet

Normalt gøres dette mod toppen. Hvis ikke, kan du søge på “font-family” ved hjælp af din valgte kodeditor.

Vidste du, at skift til websikker fonte kan fremskynde dit websted? 🚀 Og at 70% af forbrugerne siger, at sidehastighed påvirker deres købsbeslutninger? 😱 To gode grunde til at tjekke denne liste over 30+ websikre fonte ⬇️Click to Tweet

Resumé

Ligesom med temaer og plugins er der ingen mangel på muligheder for dig, når det kommer til ideer til fonte.

Med en række serif, sans serif, monospace og endda cursive fonte, der er tilgængelige gratis, er websikker fonte et godt sted at starte, når du opretter et websted.

De perfekte fonte får dit brand til at skille sig ud, forbedre læsbarheden og understøtte din besked. Vælg klogt!


Hvis du godt kunne lide denne artikel, så vil du elske Kinstas WordPress hostingplatform. Boost dit website og få 24/7 support fra vores WordPress-ekspertteam. Vores Google Cloud-drevne infrastruktur fokuserer på automatisk skalering, ydeevne og sikkerhed. Lad os vise dig Kinsta-forskellen! Tjek vores planer