Schriftarten dynamisch in Homepage einbinden

Cufon-01.jpg

Ein wunderbares, kleines Javascript-Tool, um automatisch z. B. alle h1-Überschriften einer HTML-Seite in grafische, auf einem eigenen Font basierende, Grafiken umzuwandeln. Wenn man es nicht zu übertrieben einsetzt, ganz ideal.
Der Vorteil ist außerdem, dass der Text in den h1-Tags bleibt und somit für Suchmaschinen lesbar bleibt.

Anleitung

1. Download des Cufon-Tools

2. Upload einer TTF-Datei auf die Cufon-Homepage, generieren des Fonts und Download desselben

3. Quellcode einfügen:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<script src="cufon-yui.js" type="text/javascript"></script>
		<script src="Vegur_300.font.js" type="text/javascript"></script>
		<script type="text/javascript">
			Cufon.replace('h1');
		</script>
	</head>
	<body>
		<h1>This text will be shown in Vegur.</h1>
	</body>
</html>

4. Für den Internet Explorer optimieren – dazu direkt vor dem abschließendem Body-Tag folgende Zeile einfügen:

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

Quellen

Homepage mit der genauen Beschreibung, Download und Font-Erstellungs-Tool: http://cufon.shoqolate.com/generate/

Demo-Homepage: http://www.ehrlich-werben.com/

1 Stern2 Sterne3 Sterne4 Sterne5 Sterne

Loading…
Avatar von manuel

AUTOR

manuel