Fieterich: Schrift mit @font-face einbinden

SELF-Forum

Schrift mit @font-face einbinden

Fieterich
– Informationen zu den Bewertungsregeln

Hallo,

ich würde gerne die Schriftart ändern, indem ich sie mit @font-face einbinde. Bei dem Browser handelt es sich um Firefox. Leider bekomme ich das nicht hin, egal wie ich es probiere. Die Schriftart habe ich heruntergeladen und befindet sich auf demselben Laufwerk.

@font-face { font-family: 'roboto'; src: url('roboto-regular.ttf') format('truetype'); }

Ich habe die TTF-Datei im selben Ordner wie die HTML-Datei abgelegt, um eventuelle Probleme mit der Adressierung zu vermeiden. Aber auch das funktioniert nicht.

Kann jemand helfen?

Gruß

Fieterich

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Schrift mit @font-face einbinden

    Gunnar Bittersmann Homepage des Autors
    +1 Informationen zu den Bewertungsregeln

    @@Fieterich

    @font-face { font-family: 'roboto'; src: url('roboto-regular.ttf') format('truetype'); }

    Ich habe die TTF-Datei im selben Ordner wie die HTML-Datei abgelegt, um eventuelle Probleme mit der Adressierung zu vermeiden.

    Wenn du die Date aus dem Stylesheet referenziert, gilt der relative Pfad von der CSS-Datei aus gesehen, nicht von der HTML-Datei.

    Was du nicht machen solltest: Das TrueType-Format für Webfonts verwenden. Dafür ist WOFF/WOFF2 da; das ist besser komprimiert und wird von allen gängigen Browsern unterstützt.

    LLAP 🖖

    --
    “I love to go to JS conferences to speak about how to avoid using JavaScript. Please learn CSS & HTML to reduce your JS code bloat.” —Estelle Weyl
    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln

    1. Schrift mit @font-face einbinden

      TS Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Hallo und guten Morgen,

      @font-face { font-family: 'roboto'; src: url('roboto-regular.ttf') format('truetype'); }

      Ich habe die TTF-Datei im selben Ordner wie die HTML-Datei abgelegt, um eventuelle Probleme mit der Adressierung zu vermeiden.

      Wenn du die Date aus dem Stylesheet referenziert, gilt der relative Pfad von der CSS-Datei aus gesehen, nicht von der HTML-Datei.

      Ich persönlich bevorzuge immer eine absolute Pfadangabe zur Domain-Root, also z. B. "/fonts/suetterlin.ttf". Und bitte keine vollstänige URL benutzen. Dann kann man dem Webauftritt so schlecht umziehen... Die Fonts müssen übrigens auch von derselben Domain geholt werden, wie ihre HTML-Seite, in der sie benutzt werden. Sonst weigern sich die meisten Browser.

      Grüße
      TS

      --
      es wachse der Freifunk
      http://freifunk-oberharz.de
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Schrift mit @font-face einbinden

        Mitleser (Versionen)
        – Informationen zu den Bewertungsregeln

        Ich persönlich bevorzuge immer eine absolute Pfadangabe zur Domain-Root, also z. B. "/fonts/suetterlin.ttf". ...

        Bei Referenzierungen im HTML: ja. Im CSS? Kann man auch anders sehen. Wenn sich css und fonts in einer gemeinsamen Ordnerstruktur befinden, hat die relative Adressierung ebenfalls Vorteile, wenn Du aus organistorischen Gründen den Ordner umziehen willst. Soll vorkommen.

        Die Fonts müssen übrigens auch von derselben Domain geholt werden, wie ihre HTML-Seite, in der sie benutzt werden. Sonst weigern sich die meisten Browser.

        Ahhh! Deshalb ist die Google Fonts API so beliebt!

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln