Fonts herunterladen und in Website einbauen? Wie?

[Mondgesang]

Ich habe einen hübschen Font gefunden https://fontmeme.com/fonts/modern-sans-font/ welchen ich gerne in meiner Website verwenden würde. Die Lizenz ist free for commercial use und erhältlich ist dieser Font als herunterladbare Datei ModernSans-Light.otf.

Wie kriege ich dies nun in meine Website?

Muss ich diese Datei einfach nehmen und irgendwo in meinem Host-Webspace ablegen und dann in CSS darauf verlinken? Oder reicht es dann in CSS lediglich

font-family: ModernSans-Light;

und schon sucht er im Host Webspace ob da was entsprechendes liegt?

 

[SaxnPaule]

Nein reicht nicht. Du musst die Quelle angeben.

Beispiele findest du nach 1 Sekunde googeln.

 

[Physikbuddha]

Konvertier die Schriftart vorher noch in WOFF2, findest passende Converter dafür online. WOFF2 ist deutlich kleiner, spart Bandbreite deiner Besucher und reduziert die initiale Ladezeit.

 

[netzgestaltung]

Für sowas würde ich die Schriftart auf Fontsquirrel suchen oder dort den Converter nutzen. WOFF2 reicht ( https://caniuse.com/?search=woff2 ) heutzutage eigentlich für alle Browser. Für ältere Browser waren früher noch WOFF(IE) und SVG(Safari) nötig

 

[Marco01_809]

Finde die Lizenzsituation bei der Font extrem unklar und würde schon deshalb Abstand nehmen oder zumindest mal den Autor kontaktieren und um Klarstellung bitten. Bei Fonts gibt es echt noch fiese Copyright-Fallen.

Auf anderen Seiten findet man die Font auch vom gleichen Autor (Fortress Tech), aber nirgendwo ist eindeutig eine Lizenz angegeben. Hier wurde die Lizenz mit "public domain / GPL / OFL" angegeben, aber hier sagt der Autor "Non-profit use only.", was GPL eindeutig widerspricht. Gleichzeitig steht da aber auch "Free for Commercial Use". Eine richtige Lizenz ist bei keinem Download dabei.

Auch fontmeme.com weist darauf hin dass die Angabe "Free" nur eine grobe Einordnung ist und raten dazu die Font nicht zu verwenden wenn keine richtige Lizenz dabei ist.

Zum technischen: Um eine selber bereitgestellte Font verwenden zu können machst du eine @font-face Deklaration in deinem CSS wie hier beschrieben: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face.