Blindenschrift in Webseite einbinden.

**Michael1972** · 26.02.2017, 20:07

Hallo in das Forum,

ich mache gerade eine Seite, auf der es um Blindennotenschrift geht und schaffe es leider gerade nicht, per CSS einen Braille-Webfont einzubinden. Um das Aussehen der Noten zu zeigen, habe ich mir von http://webfonts.ffonts.net/Braille.font einen freien Blindenschrift-Font heruntergeladen, dessen Dateien in den Fonts-Ordner meines Webspaces hochgeladen und diesen wie folgt in die custom.css meines ursprünglichen rocksolid-Themes eingebunden:

Code:

  @font-face {
    font-family: "Braille’;
    src:url(‚../fonts/Braille.ttf.woff") format("woff"),
        url(‚../fonts/Braille.ttf.svg#Braille") format("svg"),
        url(‚../fonts/Braille.ttf.eot"),
        url(‚../fonts/Braille.ttf.eot?#iefix") format("embedded-opentype"); 
    font-weight: normal;
    font-style: normal;
}

Anschließend habe ich im Backend ein Text-Inhaltselement erstellt und diesem die Klasse "Blindenschrifttext" zugewiesen. Schließlich habe ich unten in meine custom.css noch folgenden Code geschrieben:

Code:

 .Blindenschrift {
Font-family: ‚braille‘;
 }

. Leider alles ohne sichtbares Ergebnis auf der Seite. Da ich ein CSS-Neuling bin, weiß ich gerade nicht, wo ich auf die Fehlersuche gehen soll und wäre für Tipps sehr dankbar.

Herzlichen Gruß.

**Spooky** · 26.02.2017, 23:30

Die Art der Anführungszeichen ist, zumindest in deinem Post, falsch und durcheinander. Steht das tatsächlich so in deinem CSS?

**Michael1972** · 27.02.2017, 10:54

Hallo Spooky,
danke bis hierher. Ich habe den Code direkt aus meiner css-Datei in den post kopiert. Hier aber noch mal eine korrigierte Fassung:

Code:

 @font-face {
    font-family: "Braille“;
    src:url("../fonts/Braille.ttf.woff") format("woff"),
        url("../fonts/Braille.ttf.svg#Braille") format("svg"),
        url("../fonts/Braille.ttf.eot"),
        url("../fonts/Braille.ttf.eot?#iefix") format("embedded-opentype"); 
    font-weight: normal;
    font-style: normal;
}

.Blindenschrift  p{
Font-family: "braille" !important;
 }

Das waren tatsächlich ein paar unterschiedliche Anführungszeichen drinnen. Hat mir meine Sprachausgabe nicht ordentlich vorgelesen. Stimmt es jetzt?

**Spooky** · 27.02.2017, 11:13

Nein, hier ist noch ein falsches:

Code:

font-family: "Braille“;

Außerdem heißt es font-family, nicht Font-family:

Code:

.Blindenschrift p {
    Font-family: "braille" !important;
}

Außerdem musst du dort "Braille" und nicht "braille" schreiben. Und Klassennamen sollten auch eher mit Kleinbuchstaben beginnen, aber da geht es dann nur um Konventionen

.

**Michael1972** · 27.02.2017, 13:59

Hallo, ich habe den Code jetzt wie folgt korrigiert:

Code:

 [CODE @font-face {
font-family: "Braille";
    src:url("../fonts/Braille.ttf.woff") format("woff"),
        url("../fonts/Braille.ttf.svg#Braille") format("svg"),
        url("../fonts/Braille.ttf.eot"),
        url("../fonts/Braille.ttf.eot?#iefix") format("embedded-opentype");
    font-weight: normal;
    font-style: normal; 
 }
.blindenschrift p {
font-family: "Braille" !important; }

Leider immer noch kein Ergebnis. Wo könnte ich noch nachschauen und gibt es für CSS einen Debugger, damit ich in Zukunft Syntax-Fheler vermeiden kann? Herzlichen Dank noch mal.

**dazzle89** · 27.02.2017, 14:04

Entweder ist deine custom.css nicht (richtig) eingebunden oder der Pfad zu deinen font-Dateien ist falsch.

**Michael1972** · 27.02.2017, 21:37

Hallo, ich habe jetzt mal Test-halber die font-Dateien direkt ins css-Verzeichnis kopiert, somit entfällt ja wahrscheinlich die Pfadangabe. Außerdem habe ich mal eine Regel in der custom.css verändert, um zu sehen, ob sich die Änderung optisch auswirkt. Das ist der Fall, also müsste sie ja richtig eingebunden sein. Nur leider lässt sich der Braille-font nach wie vor nicht einbinden, bzw. es gibt keine sichtbare Änderung auf der Seite.

Vielen Dank bis hierher und ratlose Grüße.

**Spooky** · 27.02.2017, 22:06

Poste einfach mal einen Link zur Seite, dann braucht man nicht weiter rum raten

**Michael1972** · 28.02.2017, 14:47

http://mrorgel.alkaid.uberspace.de/i...verstehen.html. Hier ist es der Text unter der Überschrift Ebene 4, (Achtelnoten), der durch die Einbindung des Webfonts in Blindenschriftpunkten am Bildschirm dargestellt werden sollte.

**Spooky** · 28.02.2017, 14:50

Du musst deine custom.css als UTF-8 ohne BOM abspeichern. Derzeit hast du es anscheinend mit BOM abgespeichert.

**dazzle89** · 28.02.2017, 14:55

Du meinst das "d e f g h i j "? Wo weist du dem Text die Schriftart bitte zu?

Guck mit dem Entwicklertool deines Browsers, dann siehst du, dass dieser Text Verdana zugewiesen bekommt. Es gibt keine CSS-Anweisung für die Blindenschriftart.