Jump to content

Webfont für Eigennutzung erzeugen/bereitstellen?


Stötzner

Empfohlene Beiträge

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.

Link zum Beitrag
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«. 

Link zum Beitrag
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.

Link zum Beitrag
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)…

Link zum Beitrag
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. 

Link zum Beitrag
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.

Link zum Beitrag
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.

Link zum Beitrag
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.

Link zum Beitrag
Þ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.

Link zum Beitrag
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 ...

Link zum Beitrag

Diskutiere mit …

Du kannst jetzt schreiben und dich später registrieren. Wenn du bereits einen Account hast, melde dich an, um von deinem Account aus zu schreiben.
Hinweis: Dein Beitrag muss von einem Moderator zunächst freigeschaltet werden.

Gast
Auf dieses Thema antworten ...

×   Du hast formatierten Text eingefügt.   Restore formatting

  Only 75 emoji are allowed.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

<p>Graublau Slab – Die Erweiterung zum Bestseller Graublau Sans</p>
<p>Graublau Slab – Die Erweiterung zum Bestseller Graublau Sans</p>
<p>Graublau Slab – Die Erweiterung zum Bestseller Graublau Sans</p>
<p>Graublau Slab – Die Erweiterung zum Bestseller Graublau Sans</p>
<p>Graublau Slab – Die Erweiterung zum Bestseller Graublau Sans</p>
<p>Graublau Slab – Die Erweiterung zum Bestseller Graublau Sans</p>
×
×
  • Neu erstellen...

Hinweis

Wie die meisten Websites, legt auch Typografie.info Cookies im Browser ab, um die Bedienung der Seite zu verbessern. Sie können die Cookie-Einstellungen des Browsers anpassen. Anderenfalls akzeptieren Sie bitte die Speicherung von Cookies. Weitere Details in der Datenschutzerklärung