Webfont für Eigennutzung erzeugen/bereitstellen?

[Stötzner]

Eine neue Webpräsenz für eine kleine Firma ist in Arbeit, auf der Basis eines Wordpress-Templates.

Ich möchte gerne für Überschriften einen selbstgebauten Font implementieren (der noch nirgendwo sonst veröffentlicht ist).

 

Generierung –> Hosting –> CSS-Einbettung

– was könnte ein praktikabler Weg dafür sein?

 

Danke für Eure Tips.

[catfonts]

Generierung beim Eichhörnchen:

http://www.fontsquirrel.com/tools/webfont-generator.

 

Auf die Website hochladen, in den Fonts-Ordner zum Template, und dann die CSS bearbeiten

[Hans Schumacher]

Fürs lokale auf der Festplatte generieren, wenn Mac, FontPrep: https://github.com/briangonzalez/fontprep

[Ralf Herrmann]

Generierung beim Eichhörnchen:

http://www.fontsquirrel.com/tools/webfont-generator.

 

Auf die Website hochladen, in den Fonts-Ordner zum Template, und dann die CSS bearbeiten

 

Hat für die gewünschte Anwendung auch die nette Funktion WebOnly, die den Font so modifiziert, dass man ihn nicht einfach als Desktop-Font installieren kann, wenn man ihn von der Seite »klaut«. 

[austerlitz]

Hat für die gewünschte Anwendung auch die nette Funktion WebOnly, die den Font so modifiziert, dass man ihn nicht einfach als Desktop-Font installieren kann, wenn man ihn von der Seite »klaut«. 

 

Das verschafft einem aber immer nur relative Sicherheit. Wenn ein Font im Internet eingebettet ist, dann lässt er sich immer herunterladen (das ist ja der Sinn der Sache). Jedenfalls mit den derzeitigen Technologien. Je nach Methode ist es ein bisschen schwieriger.

[Stötzner]

…

 

Auf die Website hochladen, in den Fonts-Ordner zum Template, und dann die CSS bearbeiten

 

Klingt einfacher als es ist. Es handelt sich um ein Wordpress-Theme und dort scheint es nicht vorgesehen zu sein, daß man eigene Fonts reinlädt.

Habe die Eichhörnchen-Dateien darum auf einen anderen Server gepackt und die Zeilen in der @font-face-Regel in diesem Sinne ergänzt:

src: url('http://www.einserver.de/cms/upload/_fonts/bergamo_weit_1.0-webfont.eot');

 

Jetzt müßte man nur noch wissen, wo im CSS das ganze hin muß (dort sind standardmäßig nur Google-Fonts vorgesehen)…

[Kathrinvdm]

So weit ich mich damit bis jetzt auskenne, bedeutet das, dass man tiefer in die Programmierung des Wordpress-Templates eingreifen muss. Und diese Änderung sollte man im Child-Theme des Templates vornehmen, damit die Modifikation beim nächsten Update des Themes nicht überschrieben wird. 

[catfonts]

Ich kenne dein Template natürlich nicht, bei Lars war es jedenfalls so schwer nicht, die auf dem Server liegende Fontdatei Gandhi Sans überall auf der Site zu nutzen.

 

Allerdigs hab ich mich da gehörig im Backoffice von Wordpress durch die CSS gewühlt (Auch um überall in Design versteckte 1 Pixel-Trennlinien zu löschen, die ein fach doof aussahen).

 

Das ist bei Wordpress wohl alles irgendwie in der Datenbank versteckt, das es mit download der CSS-Datei, editieren, hochladen nicht zu gehen scheint.

[Sebastian Nagel]

Dieser Code sollte alle Fontformate und Browser so gut es geht erwischen (wobei .ttf natürlich zu hinterfragen ist):

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* old Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

es sollte auch das hier in der Praxis ausreichen wenn man nicht mit Alt-Browsern konfrontiert ist:

@font-face {
  font-family: 'MyWebFont';
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
}

Dieser Codeblock gehört in Wordpress ganz an den Anfang in die style.css-Datei des Themes das aktiv ist (bzw. des Child-Themes, das sich über das Haupttheme legt)*. Das ist per FTP im Ordner /wp-content/themes/[theme-name]/ zu finden.

Weiter unten in der CSS-Datei muss die jeweilige Schrift an den gewünschten Stellen dann natürlich noch genannt werden damit sie nicht nur eingebunden sondern auch verwendet wird.

Die Schriftnamen müssen entsprechend angepasst sein, und die Font-Dateien im gezeigten Beispiel im gleichen Ordner liegen wie die CSS-Datei, damit sie gefunden werden.

 

Auch Wordpress bietet übers Backend einen Code-Editor, mit dem das ganze auch ohne FTP und Editor bearbeitet werden kann. Auch hier muss aber sichergestellt sein dass man an der richtigen Datei arbeitet und nicht an einem Theme das gar nicht aktiv ist.

 

Manche Themes bieten die Möglichkeit, mittels Userinterface Schriften einzubinden, aber wie bemerkt meist nur Google-Fonts, keine handgestrickten Dinge. Das ist in diesem Fall also nicht nützlich und schlimmstenfalls sogar hinderlich, wenn diese Einstellungen über die selbst eingebundenen Sachen drüberspielen.

 

 

*Catfonts: wenn das nicht geklappt hat, könnte es sein dass euer Theme noch spezielle Gestaltungsmöglichkeiten im Wordpress-Backend anbietet, die über das style.css drüberregeln – oder du hast die falsche css-Datei erwischt, oder du hast ein Caching-Plugin und den Cache nicht geleert.

[Ralf Herrmann]

Habe die Eichhörnchen-Dateien darum auf einen anderen Server gepackt und die Zeilen in der @font-face-Regel in diesem Sinne ergänzt:

 

Das ist schlecht, da Browser gegebenenfalls die Same-Origin-Rule anwenden und den Webfont dann ignorieren.

[catfonts]

Das würde ja auch die ganzen Schutzmaßnahmen, warum ja spezielle Webfonts überhaupt erfunden wurden ad absurdum führen:

 

Ich suche mir ne professionell gemachte Website, bei der der Betreiber eine tolle Schrift für viel Geld lizensiert hat, suche mir die URL der Schrift heraus und bau die einfach in meine Website ein. Legal - illegal - scheißegal ...

 

Das darf natürlich nicht funktionieren.

[Þorsten]

(wobei .ttf natürlich zu hinterfragen ist)

Meinst du weil die TTF-Fonts einfacher geklaut werden können – oder einen anderen, technischen Aspekt?

 

Das ist schlecht, da Browser gegebenenfalls die Same-Origin-Rule anwenden und den Webfont dann ignorieren.

Dann halt per

<link href="http://meinwebfontserver.aa/fonts-fuer-wordpress-theme-xy.css" type="text/css" rel="stylesheet" />

Diese Zeile kann auch von Drittserververn eingebunden werden, die dann die Webfonts von meinwebfontserver.aa laden.

[Gast Schnitzel]

Es gibt für Wordpress auch Custom-CSS-Plugins, damit man nicht im Original-CSS rumfingern muss und evtl. Änderungen bei einem Update verloren gehen ...