Jump to content
Registriere dich bei Typografie.info und schalte sofort alle Mitgliederfunktionen (einschließlich des Download-Portals) frei …

Webfont für Eigennutzung erzeugen/bereitstellen?

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 zu diesem Kommentar

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«. 

  • Gefällt 3
Link zu diesem Kommentar
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 zu diesem Kommentar
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 zu diesem Kommentar
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 zu diesem Kommentar
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 zu diesem Kommentar
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 zu diesem Kommentar
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 zu diesem Kommentar
Þ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 zu diesem Kommentar

Erstelle ein Benutzerkonto oder melde dich an, um zu kommentieren

Du musst ein Benutzerkonto haben, um einen Kommentar verfassen zu können

Benutzerkonto erstellen

Neues Benutzerkonto für unsere Community erstellen. Es ist einfach!

Neues Benutzerkonto erstellen

Einloggen

Du hast bereits ein Benutzerkonto? Melde dich hier an.

Jetzt anmelden

Unsere Partner

FDI Type Foundry besuchen
Entdecke hunderte Font-Sonderangebote.
Hier beginnt deine kreative Reise.
Mit über 130.000 Fonts der größte Schriften-Shop im Internet.
Ständig interessante neue Typo-Inhalte auf Instagram. Abonniere @typography.guru.
×
×
  • Neu erstellen...

🍪 Hinweis:

Wir benutzen funktionale Cookies.