så använder du google fonts på dina webbsidor
TRANSCRIPT
![Page 1: Så använder du Google fonts på dina webbsidor](https://reader033.vdocuments.site/reader033/viewer/2022042818/55aed3bc1a28ab895b8b4603/html5/thumbnails/1.jpg)
ANVÄND GOOGLES TYPSNITT PÅ DIN EGEN WEBBSIDA
![Page 2: Så använder du Google fonts på dina webbsidor](https://reader033.vdocuments.site/reader033/viewer/2022042818/55aed3bc1a28ab895b8b4603/html5/thumbnails/2.jpg)
![Page 3: Så använder du Google fonts på dina webbsidor](https://reader033.vdocuments.site/reader033/viewer/2022042818/55aed3bc1a28ab895b8b4603/html5/thumbnails/3.jpg)
SÅ HÄR GÖR DU
![Page 4: Så använder du Google fonts på dina webbsidor](https://reader033.vdocuments.site/reader033/viewer/2022042818/55aed3bc1a28ab895b8b4603/html5/thumbnails/4.jpg)
HTTP://GOOGLE.COM/FONTS
Gå till denna adress.
(Font, teckensnitt och typsnitt används synonymt i denna presentation.)
![Page 5: Så använder du Google fonts på dina webbsidor](https://reader033.vdocuments.site/reader033/viewer/2022042818/55aed3bc1a28ab895b8b4603/html5/thumbnails/5.jpg)
I VÄNSTERMENYN FINNS ALTERNATIV FÖR TECKENSNITT
![Page 6: Så använder du Google fonts på dina webbsidor](https://reader033.vdocuments.site/reader033/viewer/2022042818/55aed3bc1a28ab895b8b4603/html5/thumbnails/6.jpg)
BOCKA GÄRNA UR NÅGON KATEGORI FÖR FÖRENKLAD SÖKNING
![Page 7: Så använder du Google fonts på dina webbsidor](https://reader033.vdocuments.site/reader033/viewer/2022042818/55aed3bc1a28ab895b8b4603/html5/thumbnails/7.jpg)
DU KAN VÄLJA ATT VISA ETT EGETORD - SKRIV IN DET HÄR.
![Page 8: Så använder du Google fonts på dina webbsidor](https://reader033.vdocuments.site/reader033/viewer/2022042818/55aed3bc1a28ab895b8b4603/html5/thumbnails/8.jpg)
DU KAN SKRIVA EN MENING - OCH SORTERA EFTER EX. TREND.
![Page 9: Så använder du Google fonts på dina webbsidor](https://reader033.vdocuments.site/reader033/viewer/2022042818/55aed3bc1a28ab895b8b4603/html5/thumbnails/9.jpg)
DU KAN VISA ETT STYCKE.
![Page 10: Så använder du Google fonts på dina webbsidor](https://reader033.vdocuments.site/reader033/viewer/2022042818/55aed3bc1a28ab895b8b4603/html5/thumbnails/10.jpg)
DU KAN VISA ETT ORD, OCH SORTERA EX. ALFABETISKT
![Page 11: Så använder du Google fonts på dina webbsidor](https://reader033.vdocuments.site/reader033/viewer/2022042818/55aed3bc1a28ab895b8b4603/html5/thumbnails/11.jpg)
NÄR DU BESTÄMT DIG:KLICKA PÅ PILEN I RUTAN
![Page 12: Så använder du Google fonts på dina webbsidor](https://reader033.vdocuments.site/reader033/viewer/2022042818/55aed3bc1a28ab895b8b4603/html5/thumbnails/12.jpg)
SIDAN DU KOMMER TILL KAN SE OLIKA UT
För detta teckensnitt finns enbart
ett alternativ på storlek
![Page 13: Så använder du Google fonts på dina webbsidor](https://reader033.vdocuments.site/reader033/viewer/2022042818/55aed3bc1a28ab895b8b4603/html5/thumbnails/13.jpg)
ANDRA TYPSNITT KAN HA MÅNGA ALTERNATIV
Klicka för de alternativ du vill använda. Men tänk på att ju fler
storlekar du väljer, ju längre tid tar det att ladda webbsidan.
Det är därför det finns en ”mätare” till höger, som signalerar
lite rekommendationer. Grundregel: Inte fler än du behöver!
![Page 14: Så använder du Google fonts på dina webbsidor](https://reader033.vdocuments.site/reader033/viewer/2022042818/55aed3bc1a28ab895b8b4603/html5/thumbnails/14.jpg)
DEN HÄR KODEN SKA DU KOPIERA OCH KLISTRA IN I HEADTAGGEN
Du behöver länka till adressen hos google (i head-taggen)
på din html-sida, för att det ska funka. Först då hämtas den
ner från nätet. (Instruktionerna finns till höger.)
![Page 15: Så använder du Google fonts på dina webbsidor](https://reader033.vdocuments.site/reader033/viewer/2022042818/55aed3bc1a28ab895b8b4603/html5/thumbnails/15.jpg)
KOPIERA DENNA KOD TILL DE REGLER DÄR DU VILL ANVÄNDA FONTEN
Koden du behöver lägga in i din css-fil för den selektor du vill
påverka. Du kan givetvis använda flera teckensnitt i din
teckensnittslista, se kodexemplet till höger.
När detta är klart är det bara att testa att det fungerar!
Enkelt, eller hur…?