Webfonts anwenden

1. Wie kann ich auf die neuen Webfont-Daten zugreifen, wenn eine Schrift, die ich auf meiner Website verwende, um neue Zeichen erweitert oder auf sonstige Weise aktualisiert wird?

2. Enthalten die erweiterten lateinischen Schriften alle Zeichen des lateinischen Standardalphabets?

3. Sind für die Schriftdaten Hints vorgesehen?

4. Muss die gleiche Font-Datei für jeden Seitenzugriff innerhalb einer Besucher-Session erneut heruntergeladen werden?

5. Werden meine Schriften je nach Browser und Betriebssystem der Besucher anders dargestellt?

6. Sind die Schriftdaten geschützt?

7. Ich bin Anfänger und habe noch keine Erfahrung mit Webfonts. Wo erhalte ich Unterstützung für die ersten Schritte?

8. Wie werden bei dem „Pay as you go“-Lizenzmodell die Seitenzugriffe berechnet?

9. Wird durch die Nutzung von Webfonts das Datenvolumen meiner Website erhöht?

10. Wie nutze ich meine Webfonts auf einer SSL-verschlüsselten Seite?

11. Wie kann ich meine Webfonts selbst hosten?

12. Wie nutze ich Linotype.com Webfonts mit Magento?

13. Wie nutze ich Linotype.com Webfonts mit Joomla!?

14. Wie verwende ich Linotype.com Web Fonts mit Shopify?

15. Wie nutze ich Linotype.com Webfonts mit WordPress?

16. Wie nutze ich die Webfonts von Linotype.com mit Squarespace?


1. Wie kann ich auf die neuen Webfont-Daten zugreifen, wenn eine Schrift, die ich auf meiner Website verwende, um neue Zeichen erweitert oder auf sonstige Weise aktualisiert wird?
Die Fonts können Sie über Ihr Konto einfach neu herunterladen. Das Paket enthält grundsätzlich die aktuellste Version des Fonts.


2. Enthalten die erweiterten lateinischen Schriften alle Zeichen des lateinischen Standardalphabets?
Ja. Unsere erweiterten Webfonts enthalten den kompletten lateinischen Standardzeichensatz (Latin-1) sowie zusätzliche Schriftzeichen.


3. Sind für die Schriftdaten Hints vorgesehen?
Alle unsere Webfonts werden von den Entwicklerteams und der Qualitätssicherung von Monotype geprüft. Die Qualität des Renderings hängt von der Kombination aus Betriebssystem und Webbrowser ab, die der Besucher verwendet. Wir nutzen Schriftoptimierungs-Tools und Hinting-Strategien, um in jeder Punktgröße sowie in allen Kombinationen von Betriebssystemen und Webbrowsern stets die bestmöglichen Ergebnisse zu erzielen. Viele unserer Webfonts sind spezifisch auf die Bildschirmausgabe abgestimmt. Monotype engagiert sich konstant für Innovation und neue Methoden, mit denen die Rendering-Qualität am Bildschirm maximiert und gleichzeitig die Dateigröße minimiert werden kann. Nach jeder Optimierung der Qualität und Dateigröße werden die entsprechenden Webfont-Daten automatisch aktualisiert, sodass die Darstellung auf Ihrer Website jederzeit auf dem neuesten Stand ist.


4. Muss die gleiche Font-Datei für jeden Seitenzugriff innerhalb einer Besucher-Session erneut heruntergeladen werden?
Nein, unter der Voraussetzung von Standardeinstellungen im Browser wird jede Font-Datei ein Mal pro Session heruntergeladen. Nur wenn der Benutzer im Browser eingestellt hat, dass keine Daten im Cache gespeichert werden dürfen, muss die Font-Datei bei jedem Seitenzugriff erneut heruntergeladen werden.


5. Werden meine Schriften je nach Browser und Betriebssystem der Besucher anders dargestellt?
Je nach den verschiedenen Rendering-Methoden der einzelnen Browser können die Schriften von Browser zu Browser mit leichten Abweichungen dargestellt werden.


6. Sind die Schriftdaten geschützt?
Sie als Nutzer tragen die Verantwortung dafür, dass die Font-Software in Konformität mit der Endnutzerlizenzvereinbarung verwendet wird. Auf jeden Fall sind die Font-Daten auf verschiedene Weise gegen Fälschung und Diebstahl geschützt. Die Namen der Font-Dateien sind verborgen. Sofern möglich, werden die Schriften in den Formaten EOT oder WOFF bereitgestellt. Nachdem die Besucher die Website verlassen haben, werden die Schriften aus den Cache-Speichern ihrer Browser entfernt.


7. Ich bin Anfänger und habe noch keine Erfahrung mit Webfonts. Wo erhalte ich Unterstützung für die ersten Schritte?
Für die Beantwortung weiterer und detaillierterer Fragen besuchen Sie bitte auch unseren FAQ-Bereich zum Thema Webfonts. Weitere Informationen rund um das Thema Webfonts finden Sie desweiteren in unserem Font Technology-Beitrag Webfonts von Linotype.com.


8. Wie werden die Seitenzugriffe berechnet?
Jedes Mal, wenn eine Seite, die Webfonts enthält, angezeigt wird, wird ein Seitenzugriff (Pageview) registriert. Um zu gewährleisten, dass die Daten so vollständig wie möglich bereitgestellt werden, aktualisieren wir die Pageview-Informationen täglich.


9. Wird durch die Nutzung von Webfonts das Datenvolumen meiner Website erhöht?
Um auf dem Rechner eines Besuchers dargestellt werden zu können, muss ein Webfont heruntergeladen werden, ebenso wie Bilder oder andere Elemente Ihrer Website. Die Font-Dateien sind allerdings relativ klein. Unsere lateinischen Schriften haben im Durchschnitt eine Größe von 40 bis 50 kB. Je nach Benutzereinstellung speichern Browser die Webfonts möglicherweise auch im Cache. Dies bewirkt, dass die Datei für die Anzeige der Webfonts auf mehreren Seiten nur ein Mal heruntergeladen wird, wenn der Besucher die erste Seite öffnet.


10. Wie nutze ich meine Webfonts auf einer SSL-verschlüsselten Seite?
Um Webfonts auf einer geschützten Seite nutzen zu können, müssen Sie sie über https auch auf Ihrem Server freigeben.


11. Wie kann ich meine Webfonts selbst hosten?
Laden Sie Ihre Webfonts aus der Sektion „Frühere Bestellungen" Ihres Kontos herunter. Das heruntergeladene Paket enthält folgende Dateien und Verzeichnisse:

Fonts/ – Dieses Verzeichnis enthält alle Fonts Ihres Projekts in den Formaten EOT, TTF und WOFF
demo.htm – Dies ist eine HTML-Musterdatei für Ihre Schriften mit der Trackingdefinition @import page-view
demo.css – Dies ist eine CSS-Musterdatei zur Ergänzung der Datei demo.html. Sie kann verwendet werden, um das STYLE-Tag mit den @font-face-Regeln durch ein LINK-Tag zu ersetzen
demo-async.htm – Dies ist eine HTML-Musterdatei für Ihre Schriften mit asynchronem JavaScript Pageview-Tracking
demo-async.css – Dies ist eine CSS-Musterdatei zur Ergänzung der Datei demo-async.html. Sie kann verwendet werden, um das STYLE-Tag mit den @font-face-Regeln durch ein LINK-Tag zu ersetzen

Bei beiden Pageview-Trackingmethoden werden Anfragen an eine leere CSS-Datei in unserem CDN gesendet, wenn im Browser eines Besuchers eine Seite geladen wird. Der Unterschied besteht lediglich in der Ausführung der Anfrage. Lesen Sie bitte die in den HTML-Musterdateien enthaltenen Informationen. Um unsere Webfonts auf Ihren eigenen Servern zu hosten, müssen Sie angemessene Sicherheitsmaßnahmen ergreifen, um sie vor unbefugter Nutzung zu schützen. Die umfasst in der Regel folgendes:

Verbergen Sie die Namen der Font-Dateien (sofern bereitgestellt, ordnen die CSS-Musterdateien alle Schriften den richtigen Dateien zu)
Treffen Sie Vorkehrungen, die verhindern, dass Besucher die Webfont-Dateien herunterladen können, indem sie die URL der Datei in ihren Browser eingeben (oder mit Hilfe eines einfachen wget-Befehls)
Treffen Sie Vorkehrungen, die verhindern, dass andere Websites Hot-Links zu den auf Ihren Servern gehosteten Font-Dateien aufbauen können

Wählen Sie anschließend die gewünschte Pageview-Trackingmethode (CSS @import oder Asynchrones JavaScript) und laden Sie die entsprechenden Dateien sowie die Fonts auf Ihren Server hoch. Bitte beachten Sie, dass die Pfade in den CSS @font-face-Regeln angepasst werden müssen, wenn Sie das Font-Verzeichnis an einen anderen als den in der HTML- bzw. CSS-Datei angegebenen hochladen möchten.

Nehmen Sie schließlich alle Anpassungen Ihrer Serverkonfiguration vor, die notwendig sind, um die gehosteten Font-Dateien korrekt an Ihre Website zu übermitteln. Hierfür müssen häufig in den folgenden zwei Bereichen Ihrer Serverkonfiguration Einstellungen vorgenommen werden:

Regeln für das Cross-Origin Resource Sharing

Je nach Setup müssen Sie für Ihren Server einen gültigen "access-control-allow-origin" Header konfigurieren, damit die Webfonts von bestimmten Browsern korrekt dargestellt werden. Weitere Informationen finden Sie unter folgenden Links:
Mozilla Developer Network
W3C Cross-Origin Resource Sharing
Configuring MIME Types

In einigen (in der Regel IIS-basierten) Umgebungen sind für einige oder alle Webfonts keine MIME-Typen vorkonfiguriert und müssen manuell hinzugefügt werden. Wir empfehlen, alle Webfont-Formate mit dem MIME-Typ „application/octet-stream“ bereitzustellen, um die Kompatibilität mit allen möglichen Browsern zu gewährleisten.


12. Wie nutze ich Linotype.com Webfonts mit Magento?
Die nachstehende Anleitung, bezogen auf Magento 1.9, enthält die grundlegenden Schritte zur Einbindung der Linotype.com Webfonts in Ihre mit Magento erstellte Website.

1.Extrahieren Sie aus dem ZIP-Archiv des Webfont-Pakets die Datei demo.css und das Verzeichnis Fonts
2.Im Installationsverzeichnis von Magento finden Sie die CSS-Datei für ihr Theme
3.Laden Sie die Inhalte des Pakets in dieses Verzeichnis hoch
4. Melden Sie sich im Admin-Panel von Magento an
5. Wählen Sie im Menü System die Option Konfiguration
6. Wählen Sie im Seitenmenü unter Allgemein die Option Design
7. Klicken Sie auf den Bereich HTML Head
8. Fügen Sie in die Textbox neben Verschiedene Scripts einen LINK-Tag zur Datei demo.css ein
9. Klicken Sie auf die Schaltfläche Konfig. speichern

Achtung: Je nach verwendetem Theme kann der in den Schritten 2 und 8 genannte Pfad zum Extrahieren abweichen. Alternativ können Sie der Datei demo.css einen aussagekräftigeren Namen geben, z. B. fonts.css. Achten Sie in diesem Fall jedoch darauf, diesen Namen auch in Schritt 8 zu übernehmen.


13. Wie nutze ich Linotype.com Webfonts mit Joomla!?
So binden Sie ein Fonts.com-Projekt in Ihre mit Joomla! erstellte Website ein:

1.Extrahieren Sie aus dem ZIP-Archiv des Webfont-Pakets die Datei demo.css und das Verzeichnis Fonts
2.Im Installationsverzeichnis von Joomla! finden Sie im Unterverzeichnis „css“ Ihr aktuell verwendetes Template (z.B. templates//css)
3.Laden Sie die Inhalte des Pakets in dieses Verzeichnis hoch
4. Melden Sie sich im Control Panel von Joomla! an
5. Klicken Sie auf Template Manager
6. Klicken Sie in der Seitenleiste auf Templates
7. Klicken Sie das Template an, das Sie aktuell verwenden
8. Klicken Sie in der Seitenleiste auf index.php
9. Scrollen Sie zu dem Bereich mit den Stylesheets und fügen Sie Folgendes als neue Zeile ein:
$doc->addStyleSheet($this->baseurl . '/templates/' . $this- >template . '/css/demo.css');
10. Klicken Sie auf die Schaltfläche Speichern

Alternativ können Sie der Datei demo.css einen aussagekräftigeren Namen geben, z. B. fonts.css. Achten Sie in diesem Fall jedoch darauf, diesen Namen auch in Schritt 9 zu übernehmen. Die optimale Datei / der optimale Ort zum Hinzufügen der Zeile in Schritt 9 kann je nach Template variieren.


14. Wie verwende ich Linotype.com Web Fonts mit Shopify?
Die folgenden Anweisungen zeigen Schritt für Schritt, wie Sie Linotype.com Web Fonts in Ihre Shopify-Website integrieren können:

1.Entpacken Sie die Datei demo.css und den Fonts Folder aus dem Web Font Kit ZIP File
2.Öffnen Sie die Datei demo.css in einem Texteditor
3.Löschen Sie „Fonts/######/“ aus allen url() Blocks („######“ ist eine kurze Ziffernreihe gefolgt von ‚/‘)
Beispiel: url("Fonts/884210/43e026a9-aa90-4d6a-85a9-6735ad285c96.eot?#iefix")
… wird zu …
url("43e026a9-aa90-4d6a-85a9-6735ad285c96.eot?#iefix")
4. Melden Sie sich auf Ihrem Shopify-Konto an
5. Klicken Sie in der linken Menüleiste auf Online Store
6. Klicken Sie im linken Untermenü auf Themes
7. Klicken Sie rechts oben auf Customize Theme
8. Klicken Sie links oben auf der Seite auf Theme options und danach auf Edit HTML/CSS
9. Klicken Sie im Folder Assets auf Add a new asset
10. Wählen Sie mit dem Browse-Button eine der Web Font Dateien aus den in Schritt 1 entpackten Unterordnern des Font Folders aus
11. Wiederholen Sie die Schritte 9–10 bis alle Web Font Dateien aus den Unterordnern des Font Folders hochgeladen sind
12. Klicken Sie erneut auf Add a new asset
13. Laden Sie die in den Schritten 1–4 entpackte und angepasste Datei demo.css hoch
14. Klicken Sie im Folder Layout auf theme.liquid
15. Fügen Sie an irgendeiner Stelle zwischen den Tags <head> und </head> dieser Datei folgende Code-Zeile ein: {{ "demo.css" | asset_url | stylesheet_tag }}
16. Klicken Sie rechts oben auf die Schaltfläche Save
Sie können die Datei demo.css beliebig umbenennen (z.B. fonts.css). Achten Sie in diesem Fall jedoch darauf, dass der neue Name auch in der Referenzierung in Schritt 15 enthalten ist.


15. Wie nutze ich Linotype.com Webfonts mit WordPress?
Hinweis: Wenn Sie Ihre WordPress-Website auf WordPress.com hosten, ist es aufgrund dort geltender Einschränkungen leider nicht möglich, Linotype.com Webfonts zu nutzen. Die nachstehende Anleitung, bezogen auf WordPress 4.2, enthält die grundlegenden Schritte zur Einbindung der Linotype.com Webfonts in Ihre mit WordPress erstellte Website.

1.Extrahieren Sie aus dem ZIP-Archiv des Webfont-Pakets die Datei demo.css und das Verzeichnis Fonts
2.Finden Sie in Ihrem WordPress-Installationsverzeichnis den css-Ordner für Ihr derzeit verwendetes Thema
Beispiel: wp-content/themes/twentyfifteen/css/
3. Laden Sie die Datei demo.css und das Verzeichnis Fonts aus Schritt 1 in diesen Ordner hoch
4. Melden Sie sich in Ihrem WordPress Dashboard als Admin an
5. Klicken Sie im Bereich Design auf die Option Editor
6. Wählen Sie aus der Dateiliste in der rechten Spalte „Header (header.php)“
7. Fügen Sie zwischen den Tags <head> und </head> folgende neue Zeile ein:
<link rel="stylesheet" href="<?php echo esc_url( get_template_directory_uri() ); ?>/css/demo.css">
8. Klicken Sie auf Datei aktualisieren.
Alternativ können Sie der Datei demo.css einen aussagekräftigeren Namen geben, z. B. fonts.css. Achten Sie in diesem Fall jedoch darauf, diesen Namen auch in Schritt 7 zu übernehmen.


16. Wie nutze ich die Webfonts von Linotype.com mit Squarespace?
Webfonts von Linotype.com können auf Websites, die mit Squarespace erstellt wurden, über die Developer Platform von Squarespace eingebunden werden, die derzeit in den Tarifplänen Business und Commerce zur Verfügung steht. Die nachstehende Anleitung beschreibt Schritt für Schritt, wie Sie Linotype.com Webfonts in Ihre mit Squarespace erstellte Website einbinden können.

Voraussetzungen
Website-Ansicht im Entwicklermodus
Text-Editor (Notepad unter Windows, TextEdit unter Mac)
FTP-Client mit SFTP-Unterstützung

So geht’s
1.Öffnen Sie die Startansicht Ihres Squarespace-Kontos
2.Wählen Sie dort Settings, dann Advanced und schließlich Developer Mode
3.Aktivieren Sie den Developer Mode, sofern er noch nicht aktiv ist
4. Im Bereich Connectivity Details finden Sie die SFTP Login-Informationen (URL, Port, Benutzername)
5. Stellen Sie mit diesen Daten die Verbindung zum SFTP-Server her
6. Laden Sie aus Ihrem Webfont-Paket von Linotype.com die Datei demo.css und den gesamten Ordner Fonts in das Verzeichnis assets auf dem SFTP-Server hoch (erstellen Sie dieses Verzeichnis, falls es noch nicht existiert)
7. Laden Sie die Datei site.region vom SFTP-Server herunter
8. Öffnen Sie site.region in Ihrem Text-Editor (achten Sie darauf, dass der Editor auf Plaintext und nicht auf Richtext eingestellt ist)
9. Suchen Sie nach der Zeile mit dem Eintrag {squarespace-headers}
10. Fügen Sie unter dieser Zeile eine neue Zeile und dort folgenden HTML-Tag ein: <link rel="stylesheet" href="/assets/demo.css>
11. Speichern Sie die Datei und laden Sie sie wieder auf den SFTP-Server hoch. Wahlweise können Sie der Datei demo.css einen aussagekräftigeren Namen geben, z. B. fonts.css. Achten Sie in diesem Fall jedoch darauf, diesen Namen auch in Schritt 10 zu übernehmen.