"Nature Theme" / Contao 4.13 / Schriftart einbinden

**claudiacarolina** · 11.05.2023, 15:05

Hallo zusammen

Ich bin mit "Nature Theme" am Aufbau einer neuen Webseite. Auf der neuen Webseite möchte ich die gleiche Schrift verwenden wie auf dieser Seite: https://www.oikos.ch/

Ich habe herausgefunden, dass es sich um die Schrift "Montserrat" handelt. Und habe sie bei Google Fonts auch gefunden und mal auf meinen Computer runter geladen.

In der Anleitung von "Nature Theme" habe ich für das Auswechseln einer Schrift folgende Angaben: schrift-einbinden.JPG

Nun weiss ich nicht so recht, was ich wo genau einsetzen muss. Folgendes habe ich mir überlegt:

font-family: "Montserrat"; -> denke mal das stimmt so?

Dann "font-style" und "font-weight" ist mir klar.

Dann aber kommt
src: mit diesen 3 Zeilen url-Angaben. Und da weiss ich jetzt nicht recht was ich genau machen muss:

Ich muss also die Schrift auf den Server laden. Oder? Das kann ich, habe mir ja die Google Font runtergeladen. Aber es sind ja viele verschiedene Möglichkeiten "Monserrat-Regular.ttf", "Montserrat-Black.ttf", etc.,
etc. Da wähle ich einfach 1 Möglichkeit aus? Zum Beispiel die Regular? Geht das in diesem Sinne oder liege ich da völlig falsch?
dann (siehe Bild oben) sind es ja font.woff / font.tff / font.svg ....
Und ich habe ja nur font.ttf. Kann ich es auch nur damit machen?

Was ist der richtige Weg? Befinde ich mich bereits auf der richtigen Spur? oder geht es ganz anders?

Danke vielmals für eure Hilfe, Claudia

**dazzle89** · 11.05.2023, 15:33

Also ich persönlich nutze immer diesen Service, wenn es um Google Fonts geht:

https://gwfh.mranftl.com/fonts/montserrat?subsets=latin

Einfach nach der Schriftart suchen, gewünschte Stile auswählen und als ZIP runterladen, der benötigte CSS-Code wird direkt angezeigt und du musst nur noch die Pfade in den src-Zeilen anpassen, sodass sie zu deinen Font-Dateien führen.

Und nun zur Frage..

Zuerst würde ich die ganzen @font-Face Regeln einfügen (wie der Link es für dich generiert), diese enthalten jeweils Zeile wie für font-family, also z.B. font-family: 'Montserrat';. Diese Zeile weist du den gewünschten Elementen zu, wie z.B. einfach nur dem body.

Code:

body {
   font-family: 'Montserrat';
}

Über die font-weight entscheidest du, welcher der Stile verwendet wird.

Was für Datei-Formate genau du brauchst, hängt davon ab, welche Browser du unterstützen willst. Bei der verlinkten Seite kannst du zwischen "Best Support" und "Modern Browsers" auswählen, alle notwendigen Dateiformate landen dann in deinem ZIP.

**claudiacarolina** · 11.05.2023, 17:41

Zitat von dazzle89

Also ich persönlich nutze immer diesen Service, wenn es um Google Fonts geht:

https://gwfh.mranftl.com/fonts/montserrat?subsets=latin

Danke Dir, es hat geklappt! Cooler Link :-) , den merk ich mir - da war ich zuvor am falschen Ort... Ich habe einfach alles genommen, was mir mit "Best Support" geliefert wurde.

Nun habe ich noch 1 Frage:

Code:

$family-primary: 'Montserrat', 'Roboto', sans-serif;
$family-heading: 'Montserrat', 'Roboto Slab', sans-serif;

Im "Nature Theme" ist $family-primary und $family-heading vorgesehen. Standardmässig war da zuvor 'Robot' und 'Robot Slab'. Also 2 verschiedene Schriftarten.

Von "Monserrat" habe ich mir 'Regular' und noch eine dickere '700' runtergeladen.

Ist es möglich, dass ich die dickere '700' in $family-heading hinzufüge? Falls das geht, dann stellt sich die Frage wie - denn da fügt man ja einfach nur 'Monserrat' ein? Oder macht das gar keinen Sinn, definiere ich das einfach über die Überschriften h1, h2 etc. ?

Danke vielmals und beste Grüsse, Claudia.

**dazzle89** · 12.05.2023, 07:11

Ich weiß nicht ob ich die Frage richtig verstehe und kenne das Theme nicht.

Wenn die Schriftarten alle richtig eingebunden sind per @font-face, würde ich mal gucken, ob du die Schriftbreiten nicht einfach direkt in den Elementen festlegen kannst mit font-weight. Also wenn du z.B. einen fetten Absatz haben möchtest:

Code: