Sådan bruges Google Fonts i dit næste webdesignprojekt

Så du har sikkert hørt, at Google har hundredvis af gratis webskrifttyper klar til brug til dit næste projekt. Men hvordan bruger du dem på dit websted? Denne artikel vil lede dig gennem de trin, du skal tage for at få dem til at køre på dit websted. Det skal tage mindre end 10 minutter!

Hvad er Google-skrifttyper?

"Google Fonts blev først lanceret i 2010 som et ingeniørinitiativ til at bevæge internettet fremad og gøre det hurtigere." - Google Design

Google Fonts blev lanceret i 2010 og blev hurtigt Internets største, gratis open source-udvalg af skrifttyper. Alle Google-skrifttyper er gratis til kommerciel og personlig brug. Webstedet Google Fonts gør det let for enhver at hurtigt vælge og bruge forskellige skrifttyper til deres eget designbehov.

Hvem bruger Google Fonts?

Det gør alle! Grafiske designere, UX-designere, forskere, udviklere, webdesignere, bloggere, sociale mediechefer, iværksættere, kunstnere, studerende, lærere, fotografer og mange flere. Jeg har set Google-skrifttyper brugt på reklametavler, plakater, præsentationsdæk, bryllupsinvitationer, websteder og bøger.

Hvem opretter skrifttyperne?

Google Fonts samarbejder med typedesignere, type støberier og designfællesskabet over hele verden. Disse mennesker og organisationer designer de skrifttyper, du ser på Google Fonts. For eksempel er Łukasz Dziedzic en uafhængig skrifttypedesigner, der designede det populære skrifttype Lato. Et skrifttypestøberi ved navn ParaType designet skrifttypen PT Serif.

Hvorfor bekymrer Google sig om skrifttyper?

Hvert Google Fonts API-link på et websted giver Google mulighed for at udføre mere data mining. Lyder det groft? Ja, men jeg synes ikke, det skulle forhindre dig i at bruge Google Fonts.

En anden mere trøstende grund til, at Google bekymrer sig om skrifttyper, er fordi de ønsker at gøre open-source webskrifttyper tilgængelige for masserne. De ønsker at skabe et hurtigere og smukkere web, der er lettere at navigere og bruge. De startede også Google Fonts tilbage i 2010, da en tjeneste som denne var meget tiltrængt, så de løste endnu et problem, vi havde på Internettet. #dontbeevil

Hvorfor skal jeg overveje at bruge dem?

Du kan ikke slå fri. Har jeg ret? Ud over at være gratis, bør du overveje at bruge Google Fonts til dit næste webdesignprojekt, fordi ...

  • Skrifttyperne er nemme at implementere på dit websted
  • Der er over 850 skrifttyper at vælge imellem (og tælle)
  • Den generelle kvalitet af skrifttyperne fortsætter med at stige
  • Google-skrifttyper kan også downloades til udskrivning

Okay, okay, okay! Nu videre til, hvordan du bruger dem.

Sådan bruges Google-skrifttyper - trin for trin

1) Gå til webstedet Google Fonts

Besøg webstedet Google Fonts, hvor du kan vælge mellem 853 skrifttypefamilier og optælling! Hjemmesiden giver dig mulighed for at filtrere resultater efter skrifttypestil, sprog, popularitet og vægt. Google Fonts indeholder også nye skrifttyper, hvis du besøger siden "featured".

2) Søg efter skrifttyper, du kan lide

Hvis du har et fontfamilienavn i tankerne, kan du søge efter det.

3) Klik på “+”, når du er klar til at bruge det

Hver fontfamilie har en plusknap i øverste højre hjørne. Klik på plusknappen for at tilføje skrifttypefamilien til "valgskuffen", der vises nederst på skærmen.

4) Gentag trin 1–3, hvis du leder efter mere end én skrifttype, der skal bruges

5) Klik på “valgskuffen” for at vise alle de skrifttyper, du har valgt

I "markeringsskuffen" kan du se alle de skrifttyper, du har tilføjet. Det er her, du finder koden, der skal tilføjes til dit websted. Du har også mulighed for at downloade skrifttyperne til dit skrivebord.

6) "Valgskuffen" er hvor du får fat i den kode, som du vil kopiere / indsætte på dine websteds HTML- og CSS-kode

Fra "valgskuffen" kopierer du koden, der skal indsættes i din HTML og CSS. For at Google Fonts kan fungere på dit websted, skal du have både fontfamilien linket til Google Fonts API (i HTML), og du skal have fontfamilien specificeret (i CSS).

7) Tilføj forskellige skriftvægte og stilarter, hvis du ønsker det, ved at klikke på fanen "Tilpas"

Dette er din sidste chance for at tilføje forskellige fontvægte og stilarter til dine fontfamilier, før du tilføjer dem til dit websted. Tilføj kun de skriftvægte og typografier, du ved, du har brug for, fordi jo flere skrifttyper du tilføjer, jo langsommere indlæses de på dit websted.

8) Kopier HTML-koden og indsæt den på dit websteds

Okay, vi er næsten færdige! Alt hvad vi skal gøre nu er at kopiere og indsætte HTML- og CSS-koden på dit websted. Kopier først HTML-linket til hovedet på dit HTML-dokument.

9) Kopier CSS-reglen, og indsæt den i dit websteds CSS-fil

Endelig er vi også nødt til at kopiere og indsætte CSS-reglerne i din CSS-fil. Hvis du tilføjer en Google-skrifttype til dit websted, kan du tilføje CSS-skrifttypefamiliereglerne i dit body-tag. Ellers bliver du nødt til at være sikker på at du tilføjer det til de korrekte elementer i dine CSS-filer.

10) Gem begge filer (HTML og CSS), opdater derefter dit websted og se den nye skrifttype

Glem ikke at gemme og opdatere!

Der går du! Du har implementeret din første Google-skrifttype med succes på dit websted. Tillykke, du koder dig. Det er rimeligt at sige, at Google Fonts dybest set er ...

Mere læsning

  • “Reimagining Google Fonts” af Yuin Chien (Google Design)
  • “6 tip til bedre parring af skrifttyper” af Hayden Mills (fontpar)
  • "Valg af webskrifttyper: En begynderevejledning" af Google Fonts

Tak for læsningen

Du er velkommen til at efterlade en kommentar nedenfor eller kontakte mig på Twitter med spørgsmål ✌️

Jeg er også skaberen af ​​Font Pair, som hjælper dig med at parre Google Fonts sammen. Tjek vores nye Medium-publikation for at læse flere typografiindlæg!