Custom Fonts in Custom Theme

Mal von den Tipfehler in der URL abgesehen, liegt Deine Fontdatei vermutlich nicht direkt im DocumentRoot der Seite. So verlangt es aber die von Dir angegebene URL.

Ich denke auch, es liegt an der URL.

Ich gehe so vor:
Ich hole mir die Schriften für den Server hier:
https://google-webfonts-helper.herokuapp.com/fonts

Da wird auch jeweils ein Code angegeben für die CSS Datei, den füge ich dort ein, also z.B.
/* roboto-300 - latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: url('../fonts/roboto-v19-latin-300.eot'); /* IE9 Compat Modes */
src: local('Roboto Light'), local('Roboto-Light'),
url('../fonts/roboto-v19-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/roboto-v19-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/roboto-v19-latin-300.woff') format('woff'), /* Modern Browsers */
url('../fonts/roboto-v19-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/roboto-v19-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}

Jetzt musst Du nur noch Pfad anpassen.
Ich lege die Schriften auch ins Theme in eine datei fonts und darunter Unterordner, falls versch. Schriften.
Das sieht dann z.B. so aus:
url('/themes/custom/barrio_custom/fonts/montserrat/montserrat-v12-latin-200.eot?#iefix') format('embedded-opentype'),
Oder Du verwendest eben einen relativen Pfad von Deiner CSS Datei aus betrachtet.

Wie Du ein Custom CSS zu Deinem Theme einrichtest, ist ja dann noch mal ein anderes Thema, für das es viele Dokus gibt.
Das scheint bei Dir auch zu klappen, wenn Du die Anweisung im Entwickler-Tool siehst.

Hallo Werner
Vielen Dank für den Hinweis. Ich werde den Pfad anpassen. Muss es der volle Pfad vom vom DocRoot sein oder relativ zum Stylesheet?
Beste Grüße

Hallo montviso,
ebenfalls vielen Dank für das ausführliche Howto. Ich frage mich nur, ob und falls ja wozu man mit dieser Methode den Eintrag auf in der llibraries.yml braucht?
Viele Grüße

Du brauchst ja den Eintrag in der llibraries.yml um mal grundsätzlich individuelles CSS sauber einbinden zu können.
Hat mit dem Schrift CSS nicht unbedingt was zu tun.
Wenn Du sowieso schon individuelle CSS Struktur geschaffen hast, kannst Du es natürlich auch da rein schreiben.
Hauptsache es ist so eingebunden, dass es überall zur Verfügung steht, wo Du die spezielle Font verwenden willst.

Wegen Pfad angaben: Das kommt auch etwas auf Deine jeweilige Struktur an.
In meinem Beispiel ist es mit voller Pfadangabe gemacht, aber grundsätzlich muss es auch mit relativen Angaben gehen, wenn Du mal raus gefummelt hast, wie genau. ;-)

Nochmal vielen Dank, hab's jetzt kapiert :-)

Ein Problem mit lokalen Fonts habe ich noch.

Doch zunächst besten Dank an Regina Oswald für die Angaben zum Einbinden eines lokalen Zeichensatzes in einem Custom Theme. Grundsätzlich hat es funktioniert, es gibt aber wohl noch ein Problem mit den Zugriffsrechten in meiner Konfiguration.

Die Situation in meinem Projekt ist folgende: Zur Darstellung von Tabellenüberschriften muss ich Symbole anzeigen, die als Zeichensatz im ttf-Format vorliegt. Nach der Installation wie sie oben beschrieben ist wird auf meinem Entwicklungsrechner alles korrekt angezeigt. Greife ich im lokalen Netz auf die Seiten zu, werden die Zeichen nicht im installierten Zeichensatz, sondern im „standard“-Zeichensatz angezeigt. D.h. für mich, dass der Zugriff auf den installierten Zeichensatz verweigert wird und er durch den Standard ersetzt wird.

Ich bin zunächst davon ausgehenden, dass das Problem existiert, das ich auf der lokalen Umgebung nur selbstsignierte Zertifikate zur Verfügung habe, deren Sicherheit im lokalem Netz von den Browsern nicht anerkannt wird. Meine Hoffnung war, dass sich das Problem löst, wenn ich erst eine Staging-Umgebung mit echte Zertifikaten eingerichtet habe. An dem Punkt bin ich nun, aber leider hat sich das Verhalten nicht geändert.
Sitze ich vor der Maschine, auf der die Staging-Umgebung eingerichtet ist wird der lokal installierte Zeichensatz angezeigt, schaue im vom Internet auf die Seite wird der Zeichensatz nicht angezeigt :-(

Kann mir jemand verraten, wo ich konfigurieren kann, dass der Webserver (Apache2) zugriff auf den Zeichensatz erhält?

Beste Grüße, Volker

Wenn Du per FTP auf die Fonts zugreifst und mit Rechtsklick auf diese ttf-Datei klickst und Eigenschaften anschaust, welche Rechte sind da eingestellt?

Und wenn Du mit Browser auf die Seite schaust, dann kannst Du ja in den Entwickler-Einstellungen (F12) auf den Reiter Netzwerk klicken, dann die Seite (auf der diese Schrift eingebunden ist) noch mal laden. Dann gibt es eine Spalte Status und dort kannst Du auch mal schauen, welcher Status für diese Datei angegeben wird.
Sicher, dass der Pfad auf die Datei immer richtig ist? Also wird kein Zugriff oder Nicht gefunden angezeigt?

Bei dem Versuch mit dem Zugriff über den Browser habe ich festgestellt, dass das Verhalten ist bei unterschiedlichen Browsen unterschiedlich unterschiedlich ist.

Benutze ich den FireFox funktioniert auch der Zugriff auf die lokal installierte Schrift und mit den Entwickler-Einstellungen wird im Reiter Netzwerk der Zugriff auf die Schrift mit Status 200 angezeigt.
Benutze ich Chrome, dann wird in der Entwickler-Einstellung gar kein Versuch des Zugriffs auf die Schrift angezeigt (Browser Cache natürlich vorher gelöscht). Ich erkenn keinerlei Versuch die Schrift überhaupt zu laden.

Beste Grüße, Volker

Kann man sich das anschauen?

Live, oder soll ich ein paar Screenshots machen?

Live wäre besser.

Ich habe gesehen, dass Benutzer über das Profil kontaktiert werden können. Ich schreibe Dir dort, wird aber eher morgen, da ich heute unterwegs bin.

Besten Dank schon mal, Volker

Kaum macht man es richtig, funktioniert es :-)

Die Schrift lag mir nur als ttf-Datei vor, nachdem ich die anderen Formate erzeugt hatte und einen zusätzlichen Fehler in der Syntax behoben habe funktioniert es jetzt auch mit dem Safari und Chrome. Auch in der DEV-Umgebung mit selbstsignierten Zertifikaten.

Hier meine nun funktionierende Konfiguration:

Super!
Ich habe es ja nicht zu hoffen gewagt. ;-)