CSS Google Fonts


Innehållsförteckning

    Visa innehållsförteckning


Google Fonts

Om du inte vill använda något av standardteckensnitten i HTML kan du använda Google Fonts.

Google Fonts är gratis att använda och har mer än 1 000 teckensnitt att välja mellan.


Hur man använder Google Fonts

Lägg bara till en speciell stilmallslänk i <head>-sektionen och hänvisa sedan till typsnittet i CSS.

Exempel

Här vill vi använda ett teckensnitt som heter "Sofia" från Google Fonts:

 <head>
<link rel="stylesheet" 
  href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
  
  font-family: "Sofia", sans-serif;
}
</style>
</head>

Resultat :

Sofia Font

Lorem ipsum dolor sit amet.

123456790

Prova själv →

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
  font-family: "Sofia", sans-serif;
}
</style>
</head>
<body>

<h1>Sofia Font</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>123456790</p>

</body>
</html>


Exempel

Här vill vi använda ett typsnitt som heter "Trirong" från Google Fonts:

 <head>
<link rel="stylesheet" 
  href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body {
  
  font-family: "Trirong", serif;
}
</style>
</head>

Resultat :

Trirong Font

Lorem ipsum dolor sit amet.

123456790

Prova själv →

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body {
  font-family: "Trirong", serif;
}
</style>
</head>
<body>

<h1>Trirong Font</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>123456790</p>

</body>
</html>


Exempel

Här vill vi använda ett teckensnitt som heter "Audiowide" från Google Fonts:

 <head>
<link rel="stylesheet" 
  href="https://fonts.googleapis.com/css?family=Audiowide">
<style>
body {
  
  font-family: "Audiowide", sans-serif;
}
</style>
</head>

Resultat :

Audiowide Font

Lorem ipsum dolor sit amet.

123456790

Prova själv →

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">
<style>
body {
  font-family: "Audiowide", sans-serif;
}
</style>
</head>
<body>

<h1>Audiowide Font</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>123456790</p>

</body>
</html>


Obs! När du anger ett teckensnitt i CSS, lista alltid på minst ett reservteckensnitt (för att undvika oväntade beteenden). Så även här bör du lägga till en generisk teckensnittsfamilj (som serif eller sans-serif) till slutet av listan.

För en lista över alla tillgängliga Google Fonts, besök vår How To - Google Fonts Tutorial.


Använd flera Google-teckensnitt

För att använda flera Google-teckensnitt, separera bara teckensnittsnamnen med ett rör tecken (|), så här:

Exempel

Begär flera teckensnitt:

 <head>
<link rel="stylesheet" 
  href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong">
<style>
  h1.a {font-family: "Audiowide", sans-serif;}
h1.b {font-family: "Sofia", 
  sans-serif;}
h1.c {font-family: "Trirong", serif;}
</style>
</head>

Resultat :

Audiowide Font

Sofia Font

Trirong Font

Prova själv →

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong">
<style>
h1.a {
  font-family: "Audiowide", sans-serif;
}

h1.b {
  font-family: "Sofia", sans-serif;
}

h1.c {
  font-family: "Trirong", serif;
}
</style>
</head>
<body>

<h1 class="a">Audiowide Font</h1>

<h1 class="b">Sofia Font</h1>

<h1 class="c">Trirong Font</h1>

</body>
</html>


Obs! Att begära flera teckensnitt kan göra dina webbsidor långsammare! Så var försiktig med det.



Styling Google Fonts

Naturligtvis kan du styla Google Fonts som du vill, med CSS!

Exempel

Stil "Sofia"-teckensnittet:

 <head>
<link rel="stylesheet" 
  href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
  
  font-family: "Sofia", sans-serif;
  font-size: 30px;
  
  text-shadow: 3px 3px 3px #ababab;
}
</style>
</head>

Resultat :

Sofia Font

Lorem ipsum dolor sit amet.

123456790

Prova själv →

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
  font-family: "Sofia", sans-serif;
  font-size: 30px;
  text-shadow: 3px 3px 3px #ababab;
}
</style>
</head>
<body>

<h1>Sofia Font</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>123456790</p>

</body>
</html>



Aktivera teckensnittseffekter

Google har också aktiverat olika teckensnittseffekter som du kan använda.

Lägg först till effect=effectname till Googles API, lägg sedan till ett specialklassnamn till elementet som ska använda specialen effekt. Klassnamnet börjar alltid med font-effect- och slutar med effektnamn.

Exempel

Lägg till brandeffekten i typsnittet "Sofia":

 <head>
<link rel="stylesheet" 
  href="https://fonts.googleapis.com/css?family=Sofia&effect=fire">
<style>
body {
  
  font-family: "Sofia", sans-serif;
  font-size: 30px;
}
</style>
</head>
  <body>
<h1 class="font-effect-fire">Sofia on 
  Fire</h1>
</body>

Resultat :

Sofia on Fire

Prova själv →

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=fire">
<style>
body {
  font-family: "Sofia", sans-serif;
  font-size: 30px;
}
</style>
</head>
<body>

<h1 class="font-effect-fire">Sofia on Fire</h1>
<p class="font-effect-fire">Lorem ipsum dolor sit amet.</p>
<p class="font-effect-fire">123456790</p>

</body>
</html>


För att begära flera teckensnittseffekter, separera bara effektnamnen med ett rörtecken (|), så här:

Exempel

Lägg till flera effekter i typsnittet "Sofia":

 <head>
<link rel="stylesheet" 
  href="https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple">
<style>
body {
  
  font-family: "Sofia", sans-serif;
  font-size: 30px;
}
</style>
</head>
  <body>
<h1 class="font-effect-neon">Neon Effect</h1>
<h1 class="font-effect-outline">Outline 
  Effect</h1>
<h1 class="font-effect-emboss">Emboss 
  Effect</h1>
<h1 class="font-effect-shadow-multiple">Multiple 
  Shadow Effect</h1>
</body>

Resultat :

Neon Effect

Outline Effect

Emboss Effect

Multiple Shadow Effect

Prova själv →

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple">
<style>
body {
  font-family: "Sofia", sans-serif;
  font-size: 30px;
}
</style>
</head>
<body>

<h1 class="font-effect-neon">Neon Effect</h1>
<h1 class="font-effect-outline">Outline Effect</h1>
<h1 class="font-effect-emboss">Emboss Effect</h1>
<h1 class="font-effect-shadow-multiple">Multiple Shadow Effect</h1>

</body>
</html>