Webprojekte: Arbeiten mit Web-Fonts
Supriya Bisht avatar
Verfasst von Supriya Bisht
Vor über einer Woche aktualisiert

Was ist ein Webprojekt?

Bei Webprojekten handelt es sich um ein Werkzeug, mit dem Sie Ihre Bibliothek organisieren können: Mithilfe von Webprojekten können Sie auf das Web-Font-Format Ihrer Fonts zugreifen und die Fonts an einem Ort gruppieren. Sie bieten zudem ausgefeilte Subsetting- und Font-Hosting-Workflows für den Fall, dass Sie Ihre Fonts live in Ihre Webanwendungen einbinden möchten. Diese Workflows umfassen auch Funktionen, mit denen Sie die Verwendung im Blick behalten und Berichte erstellen können.


Wie erstelle ich ein Webprojekt?

Um ein Webprojekt zu erstellen, klicken Sie zunächst auf die Schaltfläche Neu erstellen in der Seitenleiste.

Create_new_web_project.png

Wählen Sie dann im Dialog Neu erstellen die Option Webprojekt aus.

Select_web_project.png

Geben Sie hier einen Namen für Ihr Webprojekt ein. Zusätzlich können Sie auch eine durch Kommas getrennte Liste der Domains angeben, auf denen Sie Ihre Fonts voraussichtlich bereitstellen werden. Diese Angabe ist zwar optional, wird von uns jedoch empfohlen.

Naming_your_web_project.png

Klicken Sie abschließend auf die Schaltfläche Erstellen.

Create_web_project.png

Ihr neues Webprojekt wird dann in der Seitenleiste angezeigt. Klicken Sie darauf, um es im Hauptfenster anzuzeigen. Dort können Sie dann Fonts zu Ihrem neuen Webprojekt hinzufügen.

View_your_web_project.png

Was steckt hinter dem CDN-Service von Monotype?

Der von Monotype angebotene Hosting-Service für Web-Fonts ist für Fonts aus unserem CDN gedacht und gewährleistet eine schnelle Font-Bereitstellung – und zwar unabhängig davon, wo sich die Ihre Besucher gerade befinden.


Wie kann ich mit dem CDN-Service von Monotype Web-Fonts hosten?

Um Ihre Web-Fonts über den von Monotype bereitgestellten Service zu hosten, klicken Sie bitte zunächst einmal auf Ihr Webprojekt, um es im Hauptfenster auf der rechten Seite zu öffnen. Klicken Sie anschließend oben über der Font-Liste auf die Schaltfläche Code einbetten.

Using_Monotype_s_CDN_service.png

Im Dialog Webprojekt-Einbettungscodes können Sie auswählen, ob Ihre Fonts mit Javascript auch für Ihre Webanwendung berücksichtigt werden sollen.

Embedding_fonts.png

Kopieren Sie den angezeigten CSS-Code, indem Sie auf die Schaltfläche Copy klicken. Fügen Sie den kopierten Code anschließend im Abschnitt <head> Ihrer Webseite ein. Das Script wird verwendet, um das Webprojekt bei Ausführung aus dem CDN herunterzuladen und die Verwendung zu tracken.

Wählen Sie anschließend im Abschnitt CSS im Font-Stil des Dialogs Einbett-Codes für Webprojekte einen Font-Stil aus dem Dropdown-Menü aus, um den Code für den Stil der Font-Familie zur Verwendung in den CSS Ihrer Website zu generieren. Klicken Sie auf die Schaltfläche „Copy“, um diesen Stil zu kopieren.

Font_style_CSS.png

Wiederholen Sie den oben beschriebenen Schritt für alle Stile, die Sie in Ihren CSS verwenden möchten.


Wie hoste ich Web-Fonts auf meinen eigenen Servern?

Sie können Web-Fonts selbst hosten, indem Sie die Self-Hosting Kits (SHKs) herunterladen.


Wie lade ich Self-Hosting Kits (SHKs) herunter?

Klicken Sie auf die Schaltfläche Download Kit oben über der Font-Liste in Ihrem Webprojekt.

Download_self-hosting_kits.png

Extrahieren Sie dann das heruntergeladene Zip-Archiv. Laden Sie anschließend die im Ordner Fonts enthaltenen Fonts auf Ihre Server. Der Ordner Fonts enthält Versionen WOFF- (.woff) und WOFF2-Varianten (.woff2) für jeden Stil in Ihrem Webprojekt.

Ebenfalls im heruntergeladenen Self-Hosting Kit enthalten ist Folgendes:

1. Demo: Implementierung von Web-Fonts.

Dateien: demo.thm, demo.css

Öffnen Sie die Seite „demo.htm“, um die Anleitung für die Implementierung Ihrer Web-Fonts zu sehen. Dort finden Sie auch Code, der erforderlich ist, um Ihre Fonts in Ihren Webanwendungen bereitzustellen.

2. Demo: Implementierung von Web-Fonts – asynchron.

Dateien: demo-async.htm, demo-async.css

Öffnen Sie die Seite demo-async.htm, um zu erfahren, wie Sie Ihre Web-Fonts asynchron implementieren und bereitstellen können. Insbesondere erhalten Sie hier mehr Informationen dazu, wie Sie dafür sorgen können, dass das Script Ihre Fonts im Hintergrund lädt, während die anderen Elemente Ihrer Webseite geladen werden.

3. Font-Liste als XML.

Datei: fontlist.xml

Eine Liste aller Fonts im Webprojekt mit Font-Informationen wie Familienname, Stärke usw. im XML-Format.

4. Code zum Tracken der Verwendung.

Datei: mtiFontTrackingCode.js

Diese Datei verfolgt die Verwendung von Web-Fonts und sendet die Tracking-Informationen zur Berichterstattung an Monotype Fonts. Diese Datei sollte an dem Ort gespeichert werden, an den Sie auch Ihre Fonts hochladen.


Wie verwende ich die Tracking- und Monitoring-Funktionen des Webprojekts?

Die Berichterstattung zur Verwendung des Web-Fonts erfolgt bei Webprojekten mittels der Anzahl der Seitenaufrufe bzw. der Aufrufe digitaler Anzeigen.


Als Unternehmensadministrator können Sie die Verwendung von Fonts ganz einfach nachvollziehen, indem Sie in der Hauptansicht auf die Schaltfläche Reports unter dem Namen eines Webprojekts oder einer digitalen Anzeige klicken, wie unten zu sehen:

Web_projects_reports.png

Bitte beachten Sie, dass sich die Anzahl der Seitenaufrufe/Aufrufe von digitalen Anzeigen als Anzahl der Aufrufe für das gesamte Webprojekt bzw. die digitale Anzeige als Ganzes versteht.


Wenn Ihr Webprojekt also zehn Fonts enthält und auf einer Webseite verwendet wird, die einmal aufgerufen wird, wird im Bericht 1 Page-views angezeigt und nicht 10.


Wenn die Anzahl der Aufrufe die vereinbarte Anzahl an Aufrufen übersteigt, wird Monotype den Hosting-Service nicht deaktivieren oder Ihnen die Differenz in Rechnung stellen. Es kann allerdings sein, dass Monotype Sie kontaktiert, wenn die tatsächlichen Aufrufe deutlich über der vereinbarten Anzahl liegen.


Wie kann ich Teilsätze für Fonts erstellen (Subsetting)?

Um Teilsätze für Fonts in Ihren Webprojekten zu erstellen, klicken Sie auf das jeweilige Webprojekt und dort dann auf die Schaltfläche Fonts subsetten oben rechts.

How_to_subset_fonts.png

Wählen Sie anschließend im Dialogfeld Fonts subsetten auf der linken Seite den bzw. die Stil(e) aus, für den bzw. die Sie Teilsätze erstellen möchten. Dadurch werden Ihnen auf der rechten Seite, wie unten veranschaulicht, Optionen für die Teilsatzerstellung angezeigt:

Subsetting_fonts_menu.png

Standardmäßig ist die Option Allgemeine Zeichen ausgewählt. Bei dieser Einstellungen sind die am häufigsten verwendeten Zeichensätze enthalten, die in den meisten Fällen ausreichen sollten.

Common_characters.png

Über die Option Sprachen auswählen können Sie genau die Sprachen angeben, die unterstützt werden müssen, damit die für diese Sprachen benötigten Zeichensätze enthalten sind.

Choosing_languages.png

Über die Option Wählen Sie bestimmte Zeichen aus können Sie konkrete Glyphen aus einem Zeichensatz auswählen, die in Ihrem Font enthalten sein sollen.

Choose_specific_characters.png

Über die Option Geben Sie bestimmte Zeichen ein können Sie eingeben, welche Zeichen in der Font-Datei enthalten sein sollen. Alle anderen Zeichen werden nicht berücksichtigt.

Enter_specific_characters.png

Wählen Sie die Option OpenType-Features einbeziehen aus, um OpenType-Funktionen wie alternative Zeichen, Ligaturen und mehr zu berücksichtigen. Sie können beobachten, wie sich die Dateigröße der zu erstellenden Datei je nach den von Ihnen gewählten Optionen für die Teilsatzerstellung ändert.

Open_type_features.png

Wenn Sie die gewünschten Einstellungen ausgewählt haben, klicken Sie auf die Schaltfläche Save.

Save.png

Bei Schriftarten für die Sprachen Chinesisch, Japanisch und Koreanisch (CJK) ist wichtig, dass heuristische Teilsätze verwendet werden. Bei Monotype Fonts ist das automatisch der Fall, wenn Sie die Option Allgemeine Zeichen verwenden.


Den Zugang zu einem Webprojekt sperren.

1. Um einem Benutzer den Zugriff auf ein freigegebenes Webprojekt zu entziehen, öffnen Sie den Freigabedialog und suchen Sie nach dem Benutzer oder dem Team und bewegen Sie den Cursor über das Häkchen-Symbol neben dem Namen des Benutzers.

Revoke access_03

2. Dadurch wird das Häkchen-Symbol in eine kreuzförmige Schaltfläche Zugriff entfernen umgeschaltet. Klicken Sie darauf, um den Zugriff zu widerrufen.

Revoke access_04

Hat dies Ihre Frage beantwortet?