Startseite Skripte für das Wintersemester 2018/19 Webdesign Interaction, Webfonts, Webtypografie Web Font Dienste: Google Fonts


Web Font Dienste: Google Fonts

Google bietet einen kostenlosen Service an, um Webfonts in der eigenen Website einzubinden.

Die Fonts werden dabei direkt von den Google-Servern in Eure Website geladen!

Online-Demo

Demo – schaut Euch den Source-Code an!

Code zum Einbinden auf der eigenen Website

HTML

<head>
    <!-- „400italic,700italic,700,400“ geben an, welche Schriftschnitte mitgeliefert werden -->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,700,400' rel='stylesheet' type='text/css'>

    <!-- Euer normales Stylesheet NACH dem Google-Stylesheet! -->
    <link rel="stylesheet" href="c/style.css" />
</head>

CSS

/* 
    im Font-Stack den gewünschten Webfont an erster Stelle einfügen,
    danach Standard-System-Fonts als Fallback! 
*/
body {
   font-family: 'Open Sans', Helvetica, Arial,sans-serif;
}