Suche Menü

Cufòn Web-Fonts in Webseiten einbinden

Dank Cufón ist die Einbindung von Schriften in eine Webseite recht einfach.

Leider ist man bei der Gestaltung von Webseiten auf die Schriftarten begrenzt, die auf dem jeweiligen Benutzersystem installiert sind.

Das lässt einem natürlich wenig gestalterische und kreative Freiheit, natürlich gibt es einige Möglichkeiten dies weitestgehend zu umgehen, eine davon möchte ich hier aufzeigen.

Cufón ist eine kostenlose und einfache Möglichkeit jegliche Schriftart für seine Webseite zu nutzen.
Gute Fonts gibt es im Internet genug und dank Cufón ist die Integration recht einfach.

Auf https://github.com/sorccu/cufon/wiki/Usage gibt es eine gute Anleitung, allerdings ist diese in englischer Sprache, ich mache es etwas kürzer.

1. Schritt: cufon-yui.js  runterladen (rechte Maustaste und Ziel speichern unter) und auf den eigenen Webserver laden der Einfachheit halber in das Verzeichnis wo Eure index.php liegt, dort erstellt Ihr einen Ordner z.b. js

2. Schritt: Im Internet eine Schrift suchen. Das geht mit kostenlosen und kommerziellen Schriften gleichermaßen. Folgende Formate funktionieren: TTF, OTF und PFB.

3. Schritt:  Zum Generator gehen und die eben runtergeladene Schrift anhand der durchsuchen Buttons auf eurem Rechner auswählen. Dann die “EULAs” anklicken und ganz unten die Therms besätigen (siehe Grafiken).

cufon Web Fontscufon web fonts einbinden

4. Schritt: Nach dem Klick auf “lets do this” könnt Ihr die Datei mit eurer ausgewählten Schrift runterladen. Diese ladet Ihr ebenfalls auf euren Webserver, ins gleiche Verzeichnis bzw. Ordner wo auch die cufon-yui.js liegt.

5. Schritt: Jetzt muss noch der Code in den head der index.php eurer Webseite (nicht vergessen den richtigen Pfad anzugeben).  Und die Tags definieren, für die Cufón die Schrift ersetzen soll.

 <script type="text/javascript" src="/js/cufon-yui.js">
 </script> <script type="text/javascript" src="/js/MankSans-      Medium_500.font.js"></script>
 <script type="text/javascript"> Cufon.replace('h1') ('h2') ('h3') ('h4');    </script>

Damit auch noch der Internet Explorer zufrieden gestellt ist, noch dieses Stückchen Code hinzufügen.

<script type="text/javascript"> Cufon.now(); </script>

Vorsicht bei kommerziellen Schriftarten, hierfür wird eine entsprechende Lizens benötigt, man kann solch eine Schrift nicht ohne weiteres nutzen. Hierfür stehen aber etliche freie Fonts zur Verfügung, die auf diversen Webseiten zu finden sind.

Hier gibt es tolle free fonts

Ich hoffe der Artikel ist hilfreich