så använder du google fonts på dina webbsidor

15
ANVÄND GOOGLES TYPSNITT PÅ DIN EGEN WEBBSIDA

Upload: thomas-lindbjer

Post on 22-Jul-2015

47 views

Category:

Education


1 download

TRANSCRIPT

Page 1: Så använder du Google fonts på dina webbsidor

ANVÄND GOOGLES TYPSNITT PÅ DIN EGEN WEBBSIDA

Page 2: Så använder du Google fonts på dina webbsidor
Page 3: Så använder du Google fonts på dina webbsidor

SÅ HÄR GÖR DU

Page 4: Så använder du Google fonts på dina webbsidor

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

I VÄNSTERMENYN FINNS ALTERNATIV FÖR TECKENSNITT

Page 6: Så använder du Google fonts på dina webbsidor

BOCKA GÄRNA UR NÅGON KATEGORI FÖR FÖRENKLAD SÖKNING

Page 7: Så använder du Google fonts på dina webbsidor

DU KAN VÄLJA ATT VISA ETT EGETORD - SKRIV IN DET HÄR.

Page 8: Så använder du Google fonts på dina webbsidor

DU KAN SKRIVA EN MENING - OCH SORTERA EFTER EX. TREND.

Page 9: Så använder du Google fonts på dina webbsidor

DU KAN VISA ETT STYCKE.

Page 10: Så använder du Google fonts på dina webbsidor

DU KAN VISA ETT ORD, OCH SORTERA EX. ALFABETISKT

Page 11: Så använder du Google fonts på dina webbsidor

NÄR DU BESTÄMT DIG:KLICKA PÅ PILEN I RUTAN

Page 12: Så använder du Google fonts på dina webbsidor

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

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

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

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…?