Verwendung von WebFonts

Um nicht immer dieselben Standardschriften (Arial, Verdana, Courier etc) zu verwenden, wird auf sog. Webfonts zurückgegriffen. Hier wird deren Verwendung am Beispiel der Google Webfonts vorgestellt.

Mehr dazu unter https://fonts.google.com/.

Google Fonts werden per <link> im <head> eingebunden und dann per font-family zugewiesen:

<!-- 1. Schriften im <head> laden (mehrere mit & kombinierbar) -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Pacifico&family=Domine:wght@500&family=Roboto:wght@300&display=swap" rel="stylesheet">
/* 2. Schriften per font-family einsetzen */
body  { font-family: 'Roboto', sans-serif;  font-weight: 300; }
h2    { font-family: 'Pacifico', cursive; }
h3    { font-family: 'Domine', serif;     font-weight: 500; }

/* Fallback nach dem Komma greift, wenn Google Fonts nicht laden */

Eine Überschrift

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

.. noch eine Überschrift ..

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.