Schriften im Internet – Cufón

Schriften im Internet

Schriften unter Internetseiten ist seit langem ein beliebtes Thema. Grafiker wollen logischerweise völlige Freiheiten, der Programmierer eine solide Lösung die keine Probleme verursacht. Oft interessiert es den Leser nicht in welcher Schrift etwas dargestellt wird, solange der Inhalt lesbar ist. Bei kleinen Seiten mit wenig Inhalt spielen Schriften jedoch schnell eine grössere Rolle.

Wie kann man sowas umsetzen:

font

Eigene Schriften im Internet

Mit EOT, sIFR und anderen Ansätzen gibt es schon länger Lösungen. Unschöne Darstellungen wenn die Seite noch nicht gelanden ist, fehlende Unterstützung von Seiten der Browser haben jedoch die meisten Lösungen eher unbrauchbar gemacht.

Mit Cufón gibt’s jedoch eine neue Lösung die sehr vielversprechend aussieht!

  • Keine Plugins erforderlich
  • Unterstützung von zahlreichen Browsern
  • Einfach einzusetzen
  • Schnell

Die Schriften werden im JavaScript Format abgespeichert. Damit man allerdings ein JavaScript File verwenden kann, muss es zuerst erstellt werden. Dazu kann ein simples Webinterface verwendet werden:

http://cufon.shoqolate.com/generate/

Im Hintergrund werden einige Aktionen ausgeführt. Die Linux Applikation FontForge wird verwendet um eine SVG Schrift zu erstellen. Aus der SVG Datei werden VML Pfade generiert und daraus wird ein JSON String erstellt. Klingt umständlich, ist es auch, aber glücklicherweise müssen wir uns um fast nichts kümmern!

Wir wählen als unsere Schrift aus und erhalten eine JavaScript Datei als Download wenn wir das Formular abschicken.

JavaScript Schrift einbinden

Wir benötigen als erstes das Cufon Script. Komprimiert oder auch unkomprimiert.

Als Ausgangslage haben wir eine simple HTML Datei:

1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
</head>
<body>
<h1>Etiam vel odio</h1>
Proin tristique elit eget nisl. Donec dictum mauris a sem. Pellentesque at arcu. Mauris cursus erat at magna adipiscing commodo. Integer ornare. Sed sollicitudin, est imperdiet hendrerit bibendum, erat turpis venenatis mauris, non ullamcorper quam arcu sit amet lacus. Nullam ut eros. Vivamus luctus urna rhoncus sem. Duis vel nibh.
<h2>Praesent lobortis</h2>
Mauris ornare tincidunt arcu. Mauris pretium. Vestibulum ac metus in erat condimentum accumsan. Aenean dignissim consectetur risus. Maecenas purus. Duis eget mauris. Duis venenatis. Fusce tortor nunc, adipiscing id, gravida vel, ullamcorper ac, metus. Pellentesque suscipit. Suspendisse mollis augue eu mauris. Nulla facilisi. 
 
</body>
</html>

Wir wollen nun, dass H1 und H2 in unserer neu erstellten JavaScript Schrift dargestellt werden. Dazu kopieren wir die beiden JavaScripts in dasselbe Verzeichnis und ergänzen unsere HTML Datei so, dass wir folgendes Ergebnis erhalten:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
	<script src="cufon-yui.js" type="text/javascript"></script>
	<script src="Remo_Laubacher_400.font.js" type="text/javascript"></script>
	<script type="text/javascript">
		Cufon.replace('h1')('h2');
	</script>
</head>
<body>
<h1>Etiam vel odio</h1>
Proin tristique elit eget nisl. Donec dictum mauris a sem. Pellentesque at arcu. Mauris cursus erat at magna adipiscing commodo. Integer ornare. Sed sollicitudin, est imperdiet hendrerit bibendum, erat turpis venenatis mauris, non ullamcorper quam arcu sit amet lacus. Nullam ut eros. Vivamus luctus urna rhoncus sem. Duis vel nibh.
<h2>Praesent lobortis</h2>
Mauris ornare tincidunt arcu. Mauris pretium. Vestibulum ac metus in erat condimentum accumsan. Aenean dignissim consectetur risus. Maecenas purus. Duis eget mauris. Duis venenatis. Fusce tortor nunc, adipiscing id, gravida vel, ullamcorper ac, metus. Pellentesque suscipit. Suspendisse mollis augue eu mauris. Nulla facilisi. 
 
<script type="text/javascript">Cufon.now();</script>
</body>
</html>

Im Kopf die beiden JavaScripts einbinden, mit Cufon.replace die HTML Tags ersetzen und am Ende, vor dem Tag Cufon.now() aufrufen um ein Darstellungsprobleme von Internet-Explorer zu beheben – fertig!

Sämtliche Files zum Download. Viel Spass!




2 Comments

Hi Remo,

Heres my problem with cufon in concrete 5. Its a clean install of 5.3.2 in the root directory of the domain.

I am using cufon script inside header.php and side_main_side.php files (because the header.php script wasnt affecting this page). The cufon_yui.js and respective font.js files are in the root/js folder .

Cufon.replace(‘h1’, { fontFamily: ‘Century Gothic’ });
Cufon.replace(‘h2’, { fontFamily: ‘Century Gothic’ });
Cufon.replace(‘h3’, { fontFamily: ‘Calibri’ });
Cufon.replace(‘p’, { fontFamily: ‘Calibri’ });

The site has to be bilingual so under the root page (index.php), at
the top level is “en” and “jp”, then under “en” comes all the english
pages.
When the url is http://www.espmasia.com/index.php?cID=56 > all the
fonts are displaying correctly on IE7, Safari and Firefox on Windows,
and on the Mac OS.
The text equivalent (canonical) url, which is http://www.espmasia.com/index.php/en
, is not displaying the fonts.
Some other pages are:
http://www.espmasia.com/index.php?cID=44 which is
http://www.espmasia.com/index.php/en/what-we-do/services
cID=65 is en/what-we-do/capabilities etc
When I am in edit mode on the pages, they are all displaying as they
should but when I exit mode it reverts to default fonts on all the
canonical url’s.

I need the site to land on http://www.espmasia.com/index.php/en/. but I want it to display without the index.php. I tried enabling pretty url’s and created the htaccess file but it didnt work so I disabled it again and shelved it for later. How can I resolve this? Thanks always for your time!

This is very easy to fix. Have you ever heard of Firebug? No? Install it right away, it makes JavaScript development a lot easier.

It tells you for example that cufon isn’t definied (something which even the standard error console tells you). the reason for this is quite simple, you’re using a relative path to include cufon and of course, the webserver doesn’t serve it under index.php/en/js/cufon… add a slash at the beginning and everything works fine!

Don’t give up that quickly! Such errors are very easy to find if you just check your code step by step.. Excluding possible mistakes and stuff like that.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *