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 linkene i siden 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 2024?
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.
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
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
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
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
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
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
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
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
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
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
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 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
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
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
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
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
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
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
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 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
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
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
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
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
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
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.
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
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
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
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
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
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
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:
- Segoe script
- Rage
- Script MT
- Snell Roundhand
- Lucida Handwriting
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:
- Arial
- Calibri
- Candara
- Century Gothic
- Consolas
- Dejavu Sans
- Franklin Gothic
- Gill Sans
- Helvetica
- Lucida Sans
- MS Sans Serif
- Neue Helvetica
- Optima
- Segoe UI
- Tahoma
- Trebuchet MS
- Verdana
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 HTML 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.
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:
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.
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.
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.
Normalt gøres dette mod toppen. Hvis ikke, kan du søge på “font-family” ved hjælp af din valgte kodeditor.
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 kunne lide dette indlæg, så tjek vores guide til de 50 bedste retro skrifttyper for at give dit websted eller dit grafiske designprojekt en nostalgisk følelse.
Head of Content at Kinsta and Content Marketing Consultant for WordPress plugin developers. Connect with Matteo on Twitter.
Skriv et svar