Skip to content
  • Home
  • Recent
  • Tags
  • 0 Unread 0
  • Categories
  • Unreplied
  • Popular
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. CSS und "@fontface"

NEWS

  • Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄
    BluefoxB
    Bluefox
    10
    1
    138

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    24
    1
    1.4k

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    9.4k

CSS und "@fontface"

Scheduled Pinned Locked Moved Visualisierung
10 Posts 2 Posters 747 Views 3 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • T Offline
    T Offline
    Thomas b
    wrote on last edited by
    #1

    Hallo,

    ich möchte in einem Projekt gern eine andere Schriftart in der Visu verwenden, scheitere aber bereits am Grundsätzlichen (siehe Bild mit allen probierten Varianten). Die *.ttf liegt im selben Verzeichnis wie die visu.css.

    FontFace.JPG

    Es kommt immer die Meldung "@font-face declaration doesn't follow the fontspring bulletproof syntax".
    Spiele ich mit einer x-beliebigen .html-Datei in Visual Studio Code herum, klappt alles ganz wunderbar ....
    Was mache ich falsch und wo muß ich anfangen, den Fehler zu suchen?

    Danke & Gruß
    Thomas

    OliverIOO 1 Reply Last reply
    0
    • T Thomas b

      Hallo,

      ich möchte in einem Projekt gern eine andere Schriftart in der Visu verwenden, scheitere aber bereits am Grundsätzlichen (siehe Bild mit allen probierten Varianten). Die *.ttf liegt im selben Verzeichnis wie die visu.css.

      FontFace.JPG

      Es kommt immer die Meldung "@font-face declaration doesn't follow the fontspring bulletproof syntax".
      Spiele ich mit einer x-beliebigen .html-Datei in Visual Studio Code herum, klappt alles ganz wunderbar ....
      Was mache ich falsch und wo muß ich anfangen, den Fehler zu suchen?

      Danke & Gruß
      Thomas

      OliverIOO Offline
      OliverIOO Offline
      OliverIO
      wrote on last edited by
      #2

      @thomas-b sagte in CSS und "@fontface":

      @font-face declaration doesn't follow the fontspring bulletproof syntax

      https://stackoverflow.com/questions/68093231/font-face-declaration-doesnt-follow-the-fontspring-bulletproof-syntax-error

      lädt es den die dateien nicht? wenn es lädt kannst du die meldung ignorieren.
      siehe post

      Meine Adapter und Widgets
      TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
      Links im Profil

      1 Reply Last reply
      0
      • T Offline
        T Offline
        Thomas b
        wrote on last edited by
        #3

        Nee ... da will partout nichts laden, egal wie ich mit Gänsefüßchen und Hochkommata herumspiele

        OliverIOO 1 Reply Last reply
        0
        • T Thomas b

          Nee ... da will partout nichts laden, egal wie ich mit Gänsefüßchen und Hochkommata herumspiele

          OliverIOO Offline
          OliverIOO Offline
          OliverIO
          wrote on last edited by OliverIO
          #4

          @thomas-b

          und was ist der http status code im network tab der developer tools
          die kannst du im browser mit f12 öffnen und dann nochmal F5 zum Seite neu laden drücken

          de19f64c-1501-4553-a56e-13d7a82378ce-image.png

          in die konsole kannst auch mal schauen

          Meine Adapter und Widgets
          TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
          Links im Profil

          1 Reply Last reply
          0
          • T Offline
            T Offline
            Thomas b
            wrote on last edited by
            #5

            Ach herrjeh .... wie komme ich denn da hin?

            OliverIOO 1 Reply Last reply
            0
            • T Thomas b

              Ach herrjeh .... wie komme ich denn da hin?

              OliverIOO Offline
              OliverIOO Offline
              OliverIO
              wrote on last edited by
              #6

              @thomas-b
              dann lese meinen post nochmal genau durch

              Meine Adapter und Widgets
              TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
              Links im Profil

              T 1 Reply Last reply
              0
              • OliverIOO OliverIO

                @thomas-b
                dann lese meinen post nochmal genau durch

                T Offline
                T Offline
                Thomas b
                wrote on last edited by
                #7

                @OliverIO
                ich glaube, ich hab's ..... bin aber noch nicht ganz sicher
                Melde mich wieder

                1 Reply Last reply
                0
                • T Offline
                  T Offline
                  Thomas b
                  wrote on last edited by
                  #8

                  Okayyyyyyyyyyy .........
                  Wenn ich es im CSS-Reiter zB. global wie u.a. deklariere und in den Widgets die font-family dann mit "TEST1", "TEST2" oder "TEST3" festlege, dann klappt es. Die Warnigs sind jedoch immer noch da.

                  @font-face {
                      font-family: "TEST1";
                      src: url('../0_userdata.0/Schriftarten/isocpeur.ttf')  format("truetype");
                  }
                  
                  @font-face {
                    font-family: 'TEST2';
                    src: url('../0_userdata.0/Schriftarten/DIN_Light.TTF') format('truetype');
                  }
                  
                  @font-face {
                    font-family: 'TEST3';
                    src: url('../0_userdata.0/Schriftarten/DIN_NeuZeitGrotesk_01.ttf') format('truetype');
                  }
                  
                  
                  OliverIOO 1 Reply Last reply
                  0
                  • T Thomas b

                    Okayyyyyyyyyyy .........
                    Wenn ich es im CSS-Reiter zB. global wie u.a. deklariere und in den Widgets die font-family dann mit "TEST1", "TEST2" oder "TEST3" festlege, dann klappt es. Die Warnigs sind jedoch immer noch da.

                    @font-face {
                        font-family: "TEST1";
                        src: url('../0_userdata.0/Schriftarten/isocpeur.ttf')  format("truetype");
                    }
                    
                    @font-face {
                      font-family: 'TEST2';
                      src: url('../0_userdata.0/Schriftarten/DIN_Light.TTF') format('truetype');
                    }
                    
                    @font-face {
                      font-family: 'TEST3';
                      src: url('../0_userdata.0/Schriftarten/DIN_NeuZeitGrotesk_01.ttf') format('truetype');
                    }
                    
                    
                    OliverIOO Offline
                    OliverIOO Offline
                    OliverIO
                    wrote on last edited by
                    #9

                    @thomas-b

                    hm, das genaue lesen ist nicht so deine stärke.
                    hast du den inhalt des verlinkten posts gelesen?

                    ich kopiere dir mal den relevanten text hier rein

                    I don't know if any other linters than CSS Lint check for this but this is a reference to the ?#iefix string used to work around an old Internet Explorer bug with parsing font URLs, which Fontspring calls the bulletproof @font-face syntax.
                    
                    If you're not supporting old versions of IE, you can safely ignore this warning, and I would strongly urge you to disable CSS Lint and use something like stylelint instead. CSS Lint has not been updated in years, and the bulletproof syntax is a product of its time, so is no longer needed today.
                    
                    If you are supporting old IE, or can't disable CSS Lint and want to make this warning go away:
                    

                    in einfachen worten. im editor hängt ein syntax prüfer, der eine sehr alte regel überprüft.
                    da wir alle keinen alten internet Explorer mehr unterstützen wollen, kannst du das ignorieren

                    falls du einfach dafür sorgen willst, das die warnung, sollte es durch ergänzung der url mit
                    ?#iefix behoben sein oder du nimmst den entsprechenden woff-font
                    da du im ersten post nur einen screenshot gemacht hast, konnte ich es selbst nicht prüfen.

                    das laden sollte durch dieser syntaxprüfung nicht gehindert werden.
                    meine erste vermutung war und deine korrektur scheint darauf hinzudeuten, das die font datei 1.) nicht in den webserver mit iob upload all hochgeladen war oder
                    2) im falschen pfad lag.

                    Meine Adapter und Widgets
                    TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
                    Links im Profil

                    1 Reply Last reply
                    0
                    • T Offline
                      T Offline
                      Thomas b
                      wrote on last edited by
                      #10

                      Ich denke schon, dass ich des Lesens mächtig bin.

                      Der Fehler entsprach vielmehr deiner ersten Vermutung:
                      Die Fonts lagen im Verzeichnis "/vis-2.0/main" weil ich dort auch die Datei "vis-user.css" sah. Nach Verschieben in das Verzeichnis "0_userdata......" und Anpassung der url mit entsprechender Pfadangabe wurden die Fonts dann geladen.
                      Hierzu mußte ich aber auch erstmal verstehen, dass man das alles nur mit dem internen Dateimanager machen kann.
                      Nachdem es dann geklappt hat, störten mich die Warnungen nicht mehr. Was ein "woff-font" ist, weiß ich allerdings immer noch nicht. Ich habe nur ttf-Fonts.

                      Dennoch herzlichen Dank für deine Hilfe. Der Schubser war richtig - suchen muß man immer selbst.

                      1 Reply Last reply
                      0
                      Reply
                      • Reply as topic
                      Log in to reply
                      • Oldest to Newest
                      • Newest to Oldest
                      • Most Votes


                      Support us

                      ioBroker
                      Community Adapters
                      Donate

                      859

                      Online

                      32.5k

                      Users

                      81.7k

                      Topics

                      1.3m

                      Posts
                      Community
                      Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                      ioBroker Community 2014-2025
                      logo
                      • Login

                      • Don't have an account? Register

                      • Login or register to search.
                      • First post
                        Last post
                      0
                      • Home
                      • Recent
                      • Tags
                      • Unread 0
                      • Categories
                      • Unreplied
                      • Popular
                      • GitHub
                      • Docu
                      • Hilfe