Früher gab es oft Probleme mit der Browserkompatibilität beim Einbinden externer Schriftarten. Oft funktionierte dies nur mit erheblichem Aufwand und wenigen Browsern.

Mittlerweile sind die Lösungen jedoch sehr ausgereift, so dass nun jeder Webmaster ohne Probleme beliebige nicht-System-Schriftarten verwenden kann.

Update: Dieser überarbeitete Bericht enthält nun auch Informationen über die korrekte Anzeige auf iPad oder iPhone.

Im Folgenden möchte ich kurz die einfachste Vorgehensweise beschreiben.

Ausgangspunkt ist die Schriftart in einem der folgenden Formate:

• TrueType (.ttf) – Schriftart für Windows-PCs
• EOT (.eot) – Schriftart für Internet Explorer
• SVG (.svg) – Schriftart für iPhone / iPad
• WOFF (.woff) – Spezielle Web-only Schriftart (unterstützt u.a. von Firefox)

Um die Kompatibilität für die gängigsten Browser (IE, Firefox, Chrome, Safari) sicherzustellen, werden alle diese Schriftformate benötigt. Liegt die Schrift nur in einem dieser Formate (oder im OTF-Format) vor, so muss sie zuerst in konvertiert werden. Dies geht sehr einfach mit http://www.fontsquirrel.com/fontface/generator.

Der Generator liefert auch gleich eine passend konfigurierte CSS-Datei mit.

Nun müssen lediglich noch alle Schrift-Dateien in den CSS-Ordner auf dem Server hochgeladen werden und per CSS in die Seite eingebunden. Dies geschieht folgendermaßen:

@font-face {
	font-family: 'BEEZO_FONT';
	src: url('css/[Dateiname].eot');
	src: local('☺'), url('css/[Dateiname].woff') format('woff'), url('css/[Dateiname].ttf') format('truetype'), url('css/[Dateiname].svg#webfont1eYVxKc8') format('svg');
}

Die Schrift kann nun in jeder CSS-Klasse beliebig eingesetzt werden.

div {
	font-family: BEEZO_FONT;
}

Diese Anleitung funktioniert für die Anzeige von eigenen Schriftarten auf den gängigen Browsern, auch auf iPhone und iPad. Ich hoffe, diese Lösungen hilft vielen, die anfangs skeptisch waren, weiter.

Wenn dieser Artikel für Sie hilfreich war, würde ich mich über eine Verlinkung oder einen Kommentar sehr freuen.

Quelle: http://www.fontsquirrel.com/fontface/generator

Als Ihr Partner für individuelle Internetlösungen bieten wir Ihnen selbstverständlich dieses Feature zur Anpassung Ihrer Website an die Corporate Identity an. Sprechen Sie uns einfach an – wir helfen Ihnen gerne!

BEEZO_FONT

Leider kommt es in Verbindung mit dem FCKeditor (http://drupal.org/project/fckeditor) zu Problemen beim Einfügen der Popups in den Seitentext.

Am einfachsten ist daher folgender Workaround:

1. Die entsprechende Seite, die bearbeitet werden soll, auswählen.
2. Den herkömmlichen Textinhalt eingeben und formatieren, anschließend im Editor auf “Zum einfachen Text-Editor umschalten” klicken.
3. In dem neu öffnenden Fenster für das Popup Inhalte eintragen und Einstellungen vornehmen (Typ = Text).
4. Wenn der Text fertig ist, in diesem kleinen Fenster noch einmal auf “Zum einfachen Text-Editor umschalten” klicken.
5. Anschließend kann das Popup über klick auf “Insert” eingefügt werden.
6. Jetzt noch die Seite speichern und die Popups werden wie gewünscht angezeigt.

Die Lösung ist zwar etwas umständlich, aber momentan arbeiten die beiden Module Popup und FCKeditor noch nicht so gut zusammen. Wenn es bessere Lösungen für das Problem gibt, freue ich mich über Hilfe.

Diese Anweisungen beziehen sich auf Popup V.6.x-3.1 und FCKeditor V.6.x-2.1

Trotzdem möchte ich hier kurz auf mögliche Fehlerquellen und Lösungen eingehen:

Plugin Kompatibilität prüfen

Zu Beginn des Updates meldet WordPress die Kompatibilität der einzelnen Plugins. Hier muss unbedingt geprüft werden, ob alle Plugins, die weiterhin genutzt werden sollen, auch mit WordPress 3.0 kompatibel sind.

Datenbank-Sicherung

Immer ein Datenbank-Backup durchführen. Dies kann entweder mit Hilfe von PhpMyAdmin oder dem WP-Plugin “WP-DB-Backup” erfolgen.

Weiße Seite / Fehler 500

In manchen Fällen kann es nach klicken auf “Aktualisieren” zu einer weißen Seite kommen. Bei einer Browseraktualisierung wird anschließend immer eine Wartungsmodus-Meldung angezeigt (auch auf der Hauptseite). Wenn dies auftritt, einfach einige Minuten warten, im Hintergrund wird das Update trotzdem ausgeführt. Anschließend funktioniert die Haupt-URL wieder einwandfrei, im Adminitsrationsbereich wird noch angezeigt, dass das Update noch nicht fertig gestellt wurde. Dafür einfach auf dem Server im Hauptverzeichnis die automatisch angelegt .maintenance Datei löschen. Anschließend ist auch die Fehlermeldung verschwunden.

Das Update auf WordPress 3.0 wird aufgrund der vielen neuen und vereinfachten Features empfohlen. Es ist aber nicht sicherheitsrelevant.

Wenn Sie Unterstützung benötigen, setzen Sie sich einfach mit Beezo in Verbindung. Wir freuen uns, Ihnen weiterhelfen zu können. Gerne bieten wir auf die Pflege und regelmäßige Updates für Ihren WordPress-Blog an.

• Administration – Bietet ein kleines aber übersichtliches Adminmenü. Dies erleichtert die Arbeit, da schnell zwischen öffentlicher Ansicht und Administrationstools gewechselt werden kann.
• CCK – Dieses große Modul liefert viele Funktionen. Wir setzen es hauptsächlich dazu ein, neue Felder zu definieren. Dabei ist vor allem die Bild-Feld Funktion nützlich. Damit kann man einfach Bilder hochladen, die an einer im Template definierten Stelle positioniert sind.
• Nodewords – Zum einfachen Definieren von individuellen Meta-Tags für jede einzelne Seite
• FCKeditor – Bietet einen WYSIWYG Editor für alle Textboxen im Adminbereich. Ideal, wenn Texte von Personen eingebunden werden, die kein HTML-Profi sind.
• IMCE – Ein kleines, praktisches Tool, dass den Bilder-Upload unterstützt.
• Pathauto – Vergibt anhand des Titel automatisch ein Alias für permanente und suchmaschinenoptimierte Seitenpfade.
• Webform – Zum Erstellen von Kontaktformularen und mehr.
• Google Analytics – Zur einfachen Einbindung der Google Analytics Statistiken.
• XMLsitemap – Erstellt automatisch eine XML-Sitemap und übermittelt sie bei Aktualisierung automatisch an Google, Yahoo, Ask.com und viele mehr.
• Popup – Sehr praktisches Modul zur Erstellung von Popups. Es gibt umfassende Einstellungsmöglichkeiten (Hover / Click; Inhalt; Position des Popups, Titel und vieles mehr).

Bei Fragen zu den einzelnen Modulen könnt ihr mich jederzeit kontaktieren.

• Content, Werbetexte und Seiteninhalte
• Aufbau von Drupal-Kapazitäten
• Hosting und Domainverwaltung
• SEO / Suchmaschinenoptimierung

Bei Interesse an diesen Leistungen, sprechen Sie uns gerne jederzeit an!

Außerdem wurden in diesem Zuge die umfangreichen Kooperationen erweitert, um Ihnen auch in Zukunft die gewohnte Qualität und Flexibilität bieten zu können.

Das Slidepress-Plugin für WordPress (http://slidepress.net) lässt sich individuell an jede Seite anpassen und funktioniert benutzerfreundlich als WordPress-Plugin.

Verwalten lässt es sich am besten mit dem dazugehörigen SlideShowPro Director (Link). Hiermit lassen sich Alben erzeugen, Videos einbinden und vieles mehr.

Es sind mehrere Slidepress-Instanzen unter WordPress möglich. Die Optik des Plugins kann für jede Slidepress-Instanz einzeln angepasst werden.

Die beiden Tools sind für folgenden Preis erhältlich:
Wordpress-Plugin: Slidepress – kostenlos (SlideShowPro Standalone erforderlich!)
SlideShowPro Standalone – USD 29.00
SlideShowPro Director – USD 39.00

Natürlich sind kostenlose Testversionen verfügbar.

Ein Arbeitsbeispiel mit mehreren Einsatzmöglichkeiten (Intro, kleines Sidebar-Video, Work [Arbeitsbeispiele in Album-Form]) sind auf unserer Referenzseite Gobasil.com zu finden.

Als Ihr Partner für individuelle Internetlösungen bieten wir Ihnen selbstverständlich den Einbau, die Anpassung und das Training mit diesen beiden Plugins an. Sprechen Sie uns einfach an – wir helfen Ihnen gerne!

Das Plugin für WordPress bekommt ihr hier: Mehr zu Collapsing Archives

Anpassen kann man dabei:

• Design / Aussehen
• Funktion

Design

Das Design wird mit Hilfe von CSS formatiert. So lässt sich jedes beliebige Aussehen des Plugins umsetzen.

Die Datei collapsing-archives/collapsArchStyles.php beinhaltet dabei die CSS-Daten. Hier können alle Werte angepasst werden.

Tipp: Um herauszufinden, welche Klassen und IDs ihr ansprechen müsst, benutzt doch das Addon Firebug für Firefox (…mehr zu Firebug).

Funktion

Die Funktion wird am Besten dort angepasst, wo das Plugin auch eingefügt wird (z.B. in die Sidebar).

Eingefügt wird das Plugin mit Hilfe des folgenden Codes:

if( function_exists(‘collapsArch’) ) {
collapsArch($defaults);
} else {
wp_get_archives();
}

Meine Anpassungen der Funktionsweise sieht folgendermaßen aus:

$defaults=array(
‘noTitle’ => ”,
‘inExcludeCat’ => ‘exclude’,
‘inExcludeCats’ => ”,
‘inExcludeYear’ => ‘exclude’,
‘inExcludeYears’ => ”,
‘sort’ => ‘DESC’,
‘showPages’ => false,
‘linkToArch’ => false,
‘showYearCount’ => false,
‘expand’ => ’4′,
‘customExpand’ => ”,
‘customCollapse’ => ”,
‘expandCurrentYear’ => true,
‘expandMonths’ => false,
‘expandYears’ => true,
‘expandCurrentMonth’ => false,
‘showMonthCount’ => false,
‘showPostTitle’ => false,
‘showPostDate’ => false,
‘postDateFormat’ => ‘m/d’,
‘animate’ => true,
‘postTitleLength’ => ”,
‘debug’ => ’0′,
);

Der default-Code der Plugin-Funktion sieht dabei so aus:

$defaults=array(
‘title’ => __(‘Archives’, ‘collapsArch’),
‘noTitle’ => ”,
‘inExcludeCat’ => ‘exclude’,
‘inExcludeCats’ => ”,
‘inExcludeYear’ => ‘exclude’,
‘inExcludeYears’ => ”,
‘showPages’ => false,
‘sort’ => ‘DESC’,
‘linkToArch’ => true,
‘showYearCount’ => true,
‘expandCurrentYear’ => true,
‘expandMonths’ => true,
‘expandYears’ => true,
‘expandCurrentMonth’ => true,
‘showMonthCount’ => true,
‘showPostTitle’ => true,
‘expand’ => ’0′,
‘showPostDate’ => false,
‘debug’ => ’0′,
‘postDateFormat’ => ‘m/d’,
‘animate’ => 0,
‘postTitleLength’ => ”);

Als Ihr Partner für individuelle Internetlösungen bieten wir Ihnen selbstverständlich die individuelle Anpassung Ihres WordPress-Blogs an. Sprechen Sie uns einfach an – wir helfen Ihnen gerne!

Haben Sie gute Erfahrungen mit uns gemacht?

Wie freuen uns sehr über einen positiven Kommentar auf diesen Plattformen.

Qype: Beezo bei Qype

Google: Beezo bei Google Maps