Annorlunda typsnitt med Google Web Fonts

9297 0 39

Ett känt problem med typsnitt är att den som läser just din blogg, måste ha samma typsnitt installerat på sin dator som du har valt att använda.
En hel del typsnitt finns på datorn som standard, men det är kanske inte alltid så roliga typsnitt.

Men, det finns sätt att komma förbi det där att besökaren av sidan måste ha typsnittet installerat på sin dator, och ett sätt är att använda Google Web Fonts.

Med hjälp av några kodrader och förändringar i stilmallen på din blogg så löser det hela sig och jag skall förklara hur.

Gör så här:

1. Gå in på Google Web Fonts

2. Klicka på Start Choosing Fonts

3. Leta upp ett typsnitt som du gillar och vill använda på din blogg. Klicka på Quick Use.

4. Kopiera den första kodraden som syns.

5. Klistra in den i dina kodmallar, precis ovanför </head>.

6. Kopiera nu den andra kodraden som kommer en bit längre ner.

7. Nu ska du klistra in den i din stilmall, på det ställe där du vill använda det typsnittet. I mitt exempel så har jag valt att göra brödtexten till det nya typsnittet, och då har jag lagt in koden i kodavsnittet .entrybody.

Sen så är det bara att spara allt och testa…

Ett tips: Om du vill, så kan du använda dig av flera olika typsnitt från Google Web Fonts på samma blogg, men hur du löser det, får du allt klura ut själv. En nackdel med det kan vara att det blir en tungladdad sida, så tänk på att inte använda för många typsnitt.

Lari Salminen

Grundare av Designa Din Blogg. Drev den här sidan som ett hobbyprojekt under åtta år, numera har jag lämnat över ansvaret för DDB. Är pappa till Ludvig och make till Elin.

Läs mina andra inlägg

39 comments

Svaraellen 10 december, 2011 at 19:22

Det här har man väntat länge på! Tack som fan!
Svaranatalie 10 december, 2011 at 20:58

kan man göra så på rubriken också? Isf, hur?
1. SvaraEmma 28 februari, 2012 at 18:22
  
  /** Entry headers **/
  
  Lägg den på den raden istället! 😀
  Om du fattar vad jag menar 😉
  1. Sifora 10 mars, 2012 at 22:44
    
    Över eller under den kodmallen?
SvaraElin 11 december, 2011 at 00:59

Det här är något man länge velat ha! Tack som fasen! Fungerar perfekt!
Svarakattis 14 december, 2011 at 16:05

Det funkar inte för mig 🙁
SvaraSunny 23 december, 2011 at 10:18

Jag behöver hjälp med en sak! Det är viktigt! På vissa bloggar så har dem en bloglovin-grej på sidan där alla kategorier står osv. hur sätter man in en sån sak där? Hjälp, någon?
1. SvaraTildiiz 28 december, 2011 at 12:11
  
  Man går in på Bloglovin’ och går in på ”Ikoner” typ, vad jag minns iaf. 😛
SvaraAmmy 26 december, 2011 at 00:19

jag vet precis hur man ska göra och så, men när allt är klart så blir inte texten i tex rubriken i samma typsnitt som jag har valt. Den ändras , men bara till en helt olik som jag har valt, & jag har inte valt fel typsnitt, det vet jag! Har testat olika typsnitt också på olika ställen! Är det för att tysnittet inte är instalerat på datorn eller? MÅSTE ha svar!
1. SvaraVilma Henricsson 4 januari, 2012 at 23:59
  
  JAG ÄLSKAR DIG!!!!!!!!!!
2. SvaraFelicia 17 oktober, 2013 at 21:05
  
  Jag har samma problem! Det blir ett annat typsnitt, men det är inte alls det som jag valde från den där google sidan!
SvaraEbba 26 december, 2011 at 20:58

Det kommer inte upp någon kodrad…
SvaraTildiiz 1 januari, 2012 at 20:21

Fungerar utmärkt! Tack 🙂 <3
SvaraIsabella 6 januari, 2012 at 15:41

supernöjd med detta, har använt det läänge! 😀 hade det till förra bloggen med men det bara fuckade sig när jag skulle fixa så fick byta blogga!
Svarasarah 6 februari, 2012 at 20:16

Det händer inget 🙁
SvaraTjejen 27 mars, 2012 at 17:23

Vad gör man om det inte kommer upp någon kodrad alls?! 🙁
SvaraMalin 1 april, 2012 at 11:49

Det går inte 🙁 jag vill lägga in typsnittet i rubriken men hur gör man det??
SvaraJossan ♥ 6 april, 2012 at 17:06

Tack så jätte mycket , har några olika typsnitt. Men jag undrar en sak.
Jag ändrade typsnittet i inläggen till flamenco. men när man ska kommetera inlägget så kommer man till en annan sida (inläggsidan), där visas inte åäö. Varför ?? Måste ha svar ! Snälla hjälp.
Skriv gärna till mailen , annars här!
Tack på förhand.
Jossan ♥
1. SvaraFelix 6 april, 2012 at 17:51
  
  Du har lagt in kod mellan och . Gör inte det. Javascript och länkar till stylesheets ska vara innanför .
  1. Jossan ♥ 7 april, 2012 at 13:09
    
    förstår inte?
    Såhär se inläggsidan ut bland kodmallen:
    
    <title${BlogTitle}
    
    ${BlogDescription}
    
    Två länkar ligger övanför head.
    Jag la den där för att jag ville ändra typsnittet i texten (inlägget).
    Ska jag göra ngt annorlunda eller lägga den någon annan stanns ? 🙂 Tacksam för svar!
    Jossan ♥

SvaraJossan ♥ 7 april, 2012 at 13:10

menade förståss


&lt;link href='https://fonts.googleapis.com/css?family=Flamenco' rel='stylesheet' type='text/css'&gt;
&lt;link href='https://fonts.googleapis.com/css?family=Bad+Script' rel='stylesheet' type='text/css'&gt;

&lt;head&gt;
 &lt;title&lt;&gt;${BlogTitle} 
 &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=ISO-8859-1&quot; /&gt;
 &lt;meta name=&quot;generator&quot; content=&quot;${AppUrl}&quot; /&gt;
 &lt;link rel=&quot;stylesheet&quot; href=&quot;${BlogUrl}style.css&quot; type=&quot;text/css&quot; /&gt;
 &lt;script type=&quot;text/javascript&quot; src=&quot;https://static.blogg.se/public/js/script_blogg.js&quot;&gt;&lt;/script&gt;
 &lt;script type=&quot;text/javascript&quot; src=&quot;https://static.blogg.se/shared/js/script.js&quot;&gt;&lt;/script&gt;
 &lt;script type=&quot;text/javascript&quot; src=&quot;https://static.blogg.se/shared/js/comments.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;

&lt;div id=&quot;wrapper&quot;&gt;

 &lt;div id=&quot;header&quot;&gt;
  &lt;h1&gt;&lt;a href=&quot;&quot;&gt;&lt;/a&gt;&lt;/h1&gt;
  &lt;h2&gt;${BlogDescription}&lt;/h2&gt;
 &lt;/div&gt;

SvaraAlice 15 maj, 2012 at 16:55

Hur gör man om det inte kommer upp någon kodrad?
SvaraAmanda 27 maj, 2012 at 13:36

undrar som många andra hur man får fram kodraden om den inte kommer upp av sig själv. Blir lite förvirrad, man annars var detta ett suuuuuperbra tips!
SvaraEllen 18 juni, 2012 at 13:51

Har letat över allt men hittar inte .entrybody :(. Jag har temat Simply Black, TACKSAM för hjälp.
SvaraCaroline 13 juli, 2012 at 10:58

Tack så sjukt mycket! =)
SvaraSara 13 juli, 2012 at 22:25

Tack SÅÅ mycket. 100000000 gånger enklare än cufont grejjen, herre vad många timmar man satt med den kändes det som 🙂
Tack Lari!!
SvaraHanna 16 augusti, 2012 at 12:29

ÅH TACK VAD GRYMT!! Fortsätt såhär!
SvaraAlexander 4 september, 2012 at 20:21

Hejsan. Jag lyckas inte riktigt med det här, men såg att det här inlägget publicerades 2011 och de har ändrat utseendet på länken som du skickade. Så jag undrar om du skulle kunna hjälpa till!
SvaraAnna 27 oktober, 2012 at 12:10

Tack något otroligt!
SvaraMelissa 11 november, 2012 at 10:34

Hej, vet inte om det beror på det nya sättet kodmallarna är upplagt på eller om det beror på vilket tema jag valde, men jag har inte script som är ovanför head, jag har ändå klistrat dit länken över head fast det fungerar ändå inte, jag gjorde båda stegen.

Tacksam för svar 🙂
SvaraMelissa 11 november, 2012 at 10:41

OJ, det fungerar! Förlåt.. Hade missat något. Tack för hjälpen, dett fungerar utmärkt!
SvaraFrida 1 december, 2012 at 17:38

Åh, tack så mycket! Du räddade just min blogg!
SvaraLovisa 14 december, 2012 at 23:32

Tack tack tack! Blev jättenöjd!
SvaraLinnea 23 februari, 2013 at 10:51

Tusen tack!
Svaranalle 16 maj, 2013 at 12:33

Hej!
Fantastiskt bra tips, får se om det fortfarande håller, trots åldern.
Min fråga: jag har egentillverkade typsnitt som jag skulle vilja använda i rubriker, kan man göra det? Hur?
Svaraemelie larsson 11 juli, 2013 at 01:43

fixade så jag fick på min framsida men hur gör man för att få samma typsnitt på rubriken fast på olika ställen tex när man klickar in på kommentarer
SvaraMoa - hobbyfotograf 3 februari, 2014 at 13:38

Tusen tusen tack för detta inlägget! Har så länge undrat och velat få en lösning på det! 😀
SvaraTilda 27 februari, 2015 at 16:47

Kan man få typsnittet smalare?
1. SvaraSanna Preifelt 1 mars, 2015 at 21:11
  
  Beror helt på vilket typsnitt du vill använda. De listar vilka tjocklekar typsnitten finns i.

Annorlunda typsnitt med Google Web Fonts

39 comments

Lämna ett svar Avbryt svar