Besuche fonts.google.com und such dir eine Schrift aus, die zu deinem Projekt passt (z. B. Cinzel für Antike/Klassik, Lora für Eleganz, Raleway für Modern).
Klicke auf die Schrift → „Get font" → „Get embed code". Kopiere den <link>-Tag
und füge ihn in den <head> aller deiner HTML-Seiten ein (direkt vor deinem
eigenen Stylesheet-Link):
<!-- Beispiel für die Schrift "Cinzel" --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Cinzel&display=swap" rel="stylesheet">
Dann in style.css:
h1, h2 {
font-family: 'Cinzel', Arial, Helvetica, sans-serif;
}
Font Awesome stellt Tausende von Icons als Schriftzeichen bereit. Binde das CDN ein:
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
Dann Icons im HTML verwenden:
<i class="fa-solid fa-fire"></i> Feuer <i class="fa-solid fa-earth-europe"></i> Erde <i class="fa-solid fa-wind"></i> Luft <i class="fa-solid fa-droplet"></i> Wasser
Ersetze in der Navigation auf index.html die Emoji durch Font-Awesome-Icons.
Füge ein Favicon (kleines Icon im Browser-Tab) hinzu. Du kannst ein Emoji als Favicon verwenden (moderner Browser-Trick):
<link rel="icon" href="data:image/svg+xml,
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>
<text y='.9em' font-size='90'>🌊</text></svg>">
Oder lade eine .ico-Datei hoch und binde sie ein:
<link rel="icon" type="image/x-icon" href="favicon.ico">