50+ moderne fonte til brug på dit websted i 2024

Når du opretter et websted, skal du have alle de rigtige værktøjer på plads for at få en effektiv indvirkning. Dette inkluderer en række moderne fonte!

Dit tema har dog muligvis ikke det udvalg af HTML fonte, du har brug for at vælge imellem. Eller du er måske ikke tilfreds med dem, der er valgt til dig.

På grund af disse faktorer er det vigtigt at kunne installere nogle brugerdefinerede fonte. Vi diskuterer en række muligheder  for font her i dag. Men lad os først få de tekniske ting ud af vejen.

Hvad gør virkelig en font moderne?

Moderne fonte er slet ikke nye. Stilen blev oprindeligt udviklet i det 18. århundrede. På trods af det forbliver deres design relevante i den moderne verden. Faktisk ser du dem ganske bogstaveligt overalt.

Så hvordan ser moderne fonte ud?

Moderne fonte er skarpe, slanke, dristige, professionelle og stilfulde. De er også ofte sans serif (men ikke altid) og hører undertiden til i kategorien kursive skrifttyper. Deres design er straks særpræget, og de bruges ofte i overskrifter og logoer. De kan være tydeligt corporate, men ikke aggressive. Snarere er de modige og kræver opmærksomhed.

Her er et eksempel på et portfolio-side, der bruger en moderne font.

Bemærk, hvor kondenseret og smalt det er?

Det er selvfølgelig almindeligheder. Moderne typografi har udviklet sig, og du kan ofte også finde flere stilistiske eksempler. Men forhåbentlig giver dette dig en generel idé om, hvad en moderne font er (og hvorfor du måske vil bruge en).

Sådan uploades downloadede fonte til WordPress

Tilpassede fonte, der downloades fra internettet, har brug for lidt ekstra arbejde for at få dem til at køre, da du ikke bare kan importere dem som du kunne til en onlinetjeneste som Google Fonts. I stedet skal du enten uploade dine fonte manuelt eller bruge et plugin til at udføre jobbet.

Men inden du uploader, skal du først sikre dig, at dine fonte er websikre. Hvad mener vi med det? Nå, ikke alle fonte er websikre eller kompatible med alle webbrowsere lige ud af kassen.

Men dette er ikke et stort besvær. Brug bare det gratis Webfont Generator-værktøj til at omdanne enhver brugerdefineret font, du har fundet online, til et format, der kan læses og bruges af alle webbrowsere.

Gennemførelse af dette trin vil også gå langt mod hastighedsoptimering af dine fonte. Det er dog ikke alt der er ved det. Du bør også følge et par tip for at sikre, at dine brugerdefinerede fonte ikke spiser ressourcer eller unødvendigt bremser din websides indlæsningstid:

• Tjek ydeevne. Brug GTmetrix til at overvåge antallet af HTTP-anmodninger. Hvis der er meget, kan det betyde, at dit websted bruger langt flere fonte, som du endda har indset. Jeg taler om fonte, der automatisk er installeret sammen med plugins og temaer her (ikke dem, du har tilføjet manuelt).
• Tjek din analyse. Her kan du se, hvilke fonte container formater der er mest adgang til på dit websted. De mest almindelige valg er EOT, TTF, WOFF og WOFF2. Når du overvejer, hvilke der skal støttes, kan dette hjælpe dig med at bestemme, hvilke du skal prioritere.
• Sørg for, at fonte caches lokalt. Det er ikke som om du opdaterer fonte hver anden dag. Det betyder, at fonte sikkert kan cachelagres i hyppige besøgers browsere. Dette begrænser antallet af HTTP-anmodninger over tid.

At uploade fonte manuelt kræver lidt teknisk dygtighed, men det er ikke uden for rækkevidde for de fleste webstedsejere.

1. Download din valgte tilpassede moderne font (mange eksempler nedenfor).
2. Gem en backup af dit websted (inklusive alt indhold og databasen) og/eller brug et child tema til følgende ændringer.
3. Upload fontfiler i en .zip til mappen wp-content/themes/dit tema-navn/fonte. Hvis der ikke er nogen “fonte” -mappe, skal du fortsætte med at lave en og derefter uploade din .zip-fontfil der. Brug en hvilken som helst FTP-klient efter eget valg til at opnå dette.
4. I WordPress-dashboardet skal du navigere til Udseende > Tema Editor og få adgang til filen style.css. Du skal tilføje et tilpasset kodestykke til denne fil. Føj den relevante fontfamilie og URL til kodestykket, og klik derefter på Opdater fil.

@font-face { 
font-family: YOUR FONT NAME; 
src: url(http://sitename.com/wp-content/themes/themename/fonts/font-name.ttf); 
font-weight: normal; 
}

Ovenstående kode tilføjer fontn til dit websted. Dernæst skal du fortælle WordPress, hvor fontn skal bruges. Til det skal du åbne style.css igen og bruge dette kodestykke:

.SITE ELEMENT {
font-family: "FONT NAME", Helvetica, sans-serif; 
}

I dette kodestykke skal du identificere, hvilket aspekt af dit websted du vil bruge fontn til, og angive navnet på fonten, før du opdaterer filen.

Omvendt, hvis du vil springe alle disse manuelle uploads ting over, kan du bruge et plugin til at tilføje fonte til WordPress. En solid mulighed inkluderer Use Any Font. Som navnet antyder, kan du bruge den til at uploade enhver tilpasset font til dit websted og tildele den til CSS-elementer.

56 af de mest moderne fonte, der skal bruges i 2024

Nu hvor du ved, hvordan du optimerer og uploader tilpassede fonte, kan vi nu tilbyde en sund liste over moderne fonte og muligheder at vælge imellem.

1. Intro

Intro er en moderne moderne font, der tilbyder dristige linjer og præsentation, der let kan bruges til headers eller titler. Denne font family indeholder 72 fonte med 8 forskellige vægte fra tynd til tyk, hvilket giver dig masser af fleksibilitet.

2. Komoda

Et andet valg er Komoda. Denne font er kondenseret og super interessant at se på. Det er alle hætter og sans serif med et blokeret look, hvor midtlinien på hvert bogstav er hævet højt. Og dens ligaturer afgiver en erklæring. Et perfekt valg til logoer her.

3. Stoked

Stoked er et andet valg af alle hætter, der tilbyder et unikt look til headers og logoer. Det er interessant, mens det forbliver læseligt. Dets definerende funktion er inkluderingen af dobbeltlinjer på hvert bogstav samt linjeskift, der giver det et slags stencil look.

4. Classy Marisa

Der er også Classy Marisa. Denne moderne font er elegant og flydende og tilbyder en tyndere og mere lækker mulighed for en font til dine logoer og headers. Det har også rigtig interessante ligaturer, alternative glyffer og ornamenter, der tilføjer yderligere karakter til den tekst, du vil dele.

5. Canter

Canter er et andet godt valg. Denne er en sans serif-font, der indeholder alle hætter og har kondenseret afstand. Den kommer også i seks forskellige vægte, inklusive en 3D-mulighed og en med en fremtrædende drop shadow.

6. Lucky

Lucky er en anden moderne font, der er værd at overveje. Det er et andet sans serif-valg, der kan fungere godt som et logo eller header. Det har også en tydelig redaktionel kvalitet, der let kan anvendes på magasiner og online publikationer.

7. Zafir

Zafir tilbyder et andet moderne valg af font, der er værd at overveje. Det er super minimalt i præsentationen. Zafir er en anden mulighed for alle caps. Det er en serif-font med buede linjer og et generelt interessant udseende, der kan fungere godt for logoer og titler.

8. Coves

Eller du kan bruge Coves. Den leveres med to vægte, light og bold, og tilbyder en elegant og strømlinet mulighed for en font til dine nyeste projekter. Brug den også til standardtekst og til titler og overskrifter. Det er virkelig multifunktionelt.

9. Azonix

Azonix giver en anden moderne valg af font, denne gang med en futuristisk bøjning. Det er et sans serif-font, der understreger et geometrisk look. Det hele er kasketter og ser let ud som om det kunne bruges i den indledende kreditsekvens for en sci-fi-film.

10. Arkhip

Arkhip er et andet gratis valg af font, der opretholder et moderne design, mens man husker tilbage til svundne epoker. Det bruger elementer fra russisk typografi til at skabe noget moderne og virkelig nyt.

11. Prime

Der er en anden font, der skal overvejes, kaldet Prime. Det er en moderne sans serif-font, der har dristige linjer og har et samlet futuristisk udseende. Det har geometriske hjørner og ser perfekt ud til futuristiske- eller teknologitema websteder.

12. Glober

Glober er en anden moderne font, du skal se på. Denne font familie inkluderer 18 vægte med en jævn opdeling på 9 stolper og 9 kursiv. Det er en san serif-font, der er let at læse og let at anvende i en række forskellige situationer, herunder titler såvel som brødtekst.

13. MADE Gentle

MADE Gentle er et andet moderne font, der er værd at overveje. Det betragtes som en blød serif og blev inspireret af Cooper Black-fontn. Denne er en fed, men afrundet retroskrifttype, der minder om gamle bogomslag og skiltning fra 1970’erne.

14. Nordic

Nordic er både moderne og klassisk og tilbyder to fonte og tre vægte at vælge imellem. Designet var inspireret af norske runer og ville være perfekt til brug i titler, overskrifter og logoer.

15. Maddac

Maddac-fontn tilbyder en stilfuld mulighed for dit websted. Det er fed, blokeret og sans serif. Det er moderne i design og unikt i udførelse. Hvert bogstav har en svag vinkel eller hældning i forhold til et aspekt af dets design, hvilket giver lidt stil til ligningen.

16. Croc

Er Croc virkelig ikke en cool font? Det er en fed serif-font med en ikonisk stil, der er nostalgisk, mens den stadig er frisk.

17. Aqua

Aqua er en anden font, du skal se på. Denne har en art nouveau-kvalitet, der får den til at virke tidløs. Det er fed, men alligevel enkel og har udsmykninger og ligaturer, der gør det skiller sig ud fra andre lignende fonte.

18. Manifesto

Lav en dristig erklæring med Manifesto. Denne font blev inspireret af den italienske rationalistiske bevægelse og har en bestemt redaktionel kvalitet. Brug den til overskrifter, logoer og titler. Brug det til tryk og online design. Det er virkelig alsidigt på den måde.

19. Orkney

Orkney er en dejlig professionel udseende font. fontn er geometrisk i design og kan bruges til en lang række formål. Brug det til titler eller logoer. Brug den til standardtekst. Brug det på tryk eller i digitale medier. Her er der ingen grænser.

20. Elppa

Elppa har et futuristisk look, der er fængslende og mangesidig. fontn er ret minimal, mens den også fanger en slags følelse af rumalderen. Brug det til print- og webdesign. Det ville fungere for logoer og titler, sandsynligvis ikke brødtekst, men bestemt nyttigt til grafik og sådan.

21. Corn

Corn er en interessant font, der har afrundede hjørner og en gård-stil. Den består af 14 forskellige stilarter, som du kan begynde at bruge med det samme til titler, headere og logoer. Nogle stilarter kan endda bruges til brødtekst, hvis du ønsker det. Du kunne opbygge et helt webdesign med denne.

22. Koliko

Eller du kan vælge Koliko, en seriøst sjov font, der har øjeblikkelig appel til en lang række formål. Den kommer med tre stilarter, der hver især omfavner et perfekt ægteskab mellem form og funktion.

23. Quirk

Quirk er faktisk en ret finurlig font. Navnet på det er et godt valg. Det er en font med alle hætter, der indeholder sjove ligaturer og stabelbare elementer.

24. Le French

Le French er et sofistikeret valg af font, især hvis du ønsker at kopiere den vintage franske café-fornemmelse. Et fremragende valg til menuer og mad-relaterede websteder rundt omkring. Brug det også til titler, overskrifter, logoer og brødtekst.

25. Munich

Munich er et dejligt valg af en sans serif-font, der ville være et glimrende valg til et logo eller en titelgrafik. Den står højt og imponerende uden at være truende.

26. Northwest

Northwest er en moderne font med en retro-følelse. Det minder om logotyper til kampagner og titler på udendørs magasiner. Med kasse-agtige seriffer og dekorative elementer, vil denne font fungere godt til enhver form for indhold med udendørs tema.

27. Modeka

Modeka er kasse-agtig og moderne og ærligt talt bare super cool. Det er et moderne valg, der kan tilpasses til brug på en række forskellige måder. Med ekstra vinkler på hvert bogstav tilbyder det en unik stil, der måske bare passer til dit næste projekt.

28. Disclaimer

Disclaimer er et smalt og fedt valg af font, der er fremragende til en lang række formål. Den har en super kondenseret stil, der får bogstaverne til at stå høje og imponerende. Dette ville fungere godt for en header eller titel.

29. 5th Avenue

5th Avenue er positivt fancy med en klassisk luft, der er velegnet til officielle logoer og branding. Det er en fed skrift med serifs, der skiller sig ud takket være masser af alternative bogstaver, der tilføjer stil og interesse.

30. Quakiez

Quakiez er et andet moderne valg af font, der tilbyder en serif-mulighed til vores liste. Det blev designet med luksus i tankerne, men opretholder stadig et element af minimalisme. Den leveres med to stilarter og kan bruges til logoer, titler, overskrifter og mere.

31. Modern Outdoor

Eller du kan vælge Modern Outdoor og straks påberåbe sig camping og udendørs synligt. Denne font er perfekt til titler, overskrifter og logoer og ville give en reel indflydelse på plakater. Det kræver opmærksomhed, og når man sidder smukt i alle hætter, sikres det sin udendørs følelse.

32. Hyperbola

Hyperbola er afrundet og futuristisk. Faktisk ser det positivt rummeligt ud – på en god måde. Denne font har afrundede tællere, mens den opretholder en samlet boksform.

33. Boxing

Boxing fontn er boxy og ren, perfekt til headere, titler og logoer. Det er alle kasketter, høje og interessante at se ud. Bedst af alt er det ekstremt funktionelt og kan genbruges på utallige måder.

34. Sonder

Sonder er virkelig en anden mangesidet font. Den leveres med en mulighed for skive- og sans serif-font. Den leveres med flere vægte såvel som en regelmæssig og ru stil. Den grove stil har nogle huller i bogstaverne, hvilket skaber et rustikt og naturligt look.

35. Lombok

Lombok er en tynd font, der er ekstremt elegant. Det er en sans serif-mulighed med geometriske elementer, der får den til at skille sig ud og virke ret unik. Det er et ideelt valg til overskrifter, logoer og titler.

36. Distrito

Distrito er en all-caps font, der har en tydelig stil. Hvert bogstav er let skråt og tilbyder et unikt udseende, der kan oversættes godt til brug i logoer og overskrifter. Det er også en all-caps font inspireret af colombiansk modulært design.

37. Ailerons

Ailerons ligner den font, der vises på fremmede skiltning. Og det opnår denne æstetiske brønd. Det er sans serif og alle caps og har indflydelse, uanset hvor du placerer det, selvom titler og headere ville være bedst for det.

38. Ethna

Ethna har et klassisk udseende, men en moderne stil. Det er en sans serif font-familie inspireret af humanistisk design og gør et godt stykke arbejde med at kombinere vintage og moderne designelementer for at skabe noget nyt. Denne fungerer godt i enhver brugssag.

39. Noelle

Noelle er en geometrisk serif-font, der er klar til at give et positivt førsteindtryk. Det er minimalistisk i design og fungerer godt for titler og headere i enhver branche. Det har et par vintage-elementer, men ser stadig frisk ud. Brug det online eller på tryk. Plus, det kommer med en script font som en bonus.

40. Sequel

Sequel er en afrundet font, der er perfekt til logoer og overskrifter. Bedst af alt kommer den med en række ligaturer, der tilbyder stil og tilføjet interesse for alt, hvad du opretter med dem. Designet her er fed, men ikke imponerende.

41. Higher

Higher er et andet sofistikeret valg af fonte, der tilbyder et klassisk look. Denne font med alle hætter er super kondenseret og krævende og tilbyder øjeblikkelig stil til alt, hvad du bruger den til.

42. Nano

Nano er en font, der ikke er serif, og som har et futuristisk udseende og alle er små bogstaver, hvilket gør det til en unik mulighed på denne liste. Bogstaverne selv er supermoderne og identificerbare, hvilket gør dette til et godt valg til logoer og andre mærkevarer. Det er dog bedst til korte sætninger, da længere sætninger kan være en smule ulæselige.

43. Jollin

Jollin er en moderne font med krøllede signaler på nogle bogstaver og et alligevel tykt udseende. Denne sans serif-font kommer i en almindelig og kursiv version og indeholder en række alternative bogstaver, så du kan få din tekst til at se enklere eller mere avanceret ud, afhængigt af dit humør.

44. Phenomena

Phenomena er en smal og blokeret font med afrundede kanter. Det afgiver en erklæring og kan let bruges til titler, logoer eller overskrifter. Den kommer med 7 forskellige stilarter fra tynd til fed, og tilbyder også masser af standardtekst brugsmuligheder.

45. Calibre

Caliber er en super kondenseret font, der kan tårne over dit indhold, hvis du lader det – på en god måde. Det er en mulighed med store bogstaver, der også inkluderer tal, tegn og vestlige tegn for godt mål.

46. Sundays

Sundays er en serif-font, der helt sikkert er fra den nuværende æra, men som også har en klassisk følelse, der ikke kan benægtes. Det er tyndere og mere kurver end klassiske lignende fonte og har en stil, der passer til overskrifter til magasinr og titler, weblogoer, overskrifter og mere.

47. Cornerstone

Cornerstone er en anden blokeret font, der tilbyder et modulært design, der kan arbejde i en række forskellige applikationer fra logoer til overskrifter.

48. One Day

One Day er en tynd font med interessante afbrydende linjer, der gør den unik. Det er en anden stor bogstav med en lys og tynd stil. Det inkluderer tal og tegn og føles geometrisk uden at være for boxy.

49. Kollektif

Kollektif er en klassisk moderne font, der kan bruges på en lang række måder. Det er geometrisk i design og kommer i to vægte. Det er også optimeret til både print og internetbrug.

50. Nostalgia

Så er der Nostalgia, en moderne font med tilstrækkelig retro appel til at få det til at føles som om det blev oprettet for årtier siden. Det inkluderer 3 fonte samt alternative tegn, ligaturer og blomster. Det ville være et godt valg til logoer, titler, plakater eller invitationer.

51. Elixia

Elixia har et æterisk udseende, der passer til en alkymists hule. Det er geometrisk og inkluderer ekstra linjevinkler på hvert bogstav, der tilbyder en unik stil.

52. Salmon

Eller du kan vælge Salmon. Denne sans serif-font er bold og minimal. Det er ideelt til titler, logoer og headere. Det er et design med alle hætter og inkluderer en fyldt og skitseret version, der også passer godt sammen.

53. Thinoo

Thinoo er en anden san serif-font. Den kommer med en tynd og fed stil og inkluderer alle bogstavs-stilarter, inklusive tal, symboler og tegnsætning. Det er professionelt og rent. Enkel, men alligevel iøjnefaldende. Denne ville fungere godt for enhver form for hjemmeside såvel som trykte materialer.

54. Summer Loving

Eller du kan bruge Summer Loving, en super sjov moderne font, der indeholder flere font-stile, så du kan oprette et helt design ved hjælp af kun en font. Den leveres med en sans font samt en pensel detalje, der straks kan tilføje dimension til dine projekter. Det inkluderer ligaturer og alternative bogstaver også.

55. Silverfake

Silverfake tilbyder en mulighed for en serif-font, der er bredt placeret, til titler, logoer, overskrifter og trykte materialer. Denne ville f.eks. Se godt ud som et T-shirt-logo.

56. Vienna

Endelig er der Vienna. Denne moderne font er en serif-mulighed, der har al appel fra en klassisk font, der bruges på magasinomslag med tilstrækkelige ændringer til at appellere til nutidens æstetik. Det er minimalt og inkluderer bogstaver, tal og tegnsætning med store bogstaver.

Resumé

Der er en række grunde til, at du måske vil bruge tilpassede fonte på dit websted. Uanset om du ønsker bedre at passe til din branding eller gøre dit indhold mere læsbart på tværs af alle browsere, er det værd at uploade dine egne fonte i moderne stil.

Alligevel kan processen virke skræmmende i starten. Du skal finde en font, downloade den, lægge den i en .zip-fil og derefter uploade den til det rigtige bibliotek på dit websted ved hjælp af en FTP-klient. Du bliver nødt til at indsætte kodestykker i de relevante områder af dit temas CSS-fil. Du kan vælge at gøre dette manuelt eller ved hjælp af et plugin (eller du kan ansætte en udvikler).

Uanset hvordan du nærmer dig denne proces, kan du dog være sikker på at slutresultatet bliver stilfuldt og tilføjer karakter til dit websteds generelle udseende. Forhåbentlig vil samlingen af ​​56 moderne fonte, vi har kurateret her, hjælpe dig med at finde den rette til dit websted. Uanset om det er bold eller tynd, afrundet eller hård, pyntet eller almindelig, vil den font, du vælger, få indflydelse!

(Foreslået læsning: Sådan skjules siden og post titler i WordPress)