[wfl] Neu: Der Webfontloader

[christian]

Da das Thema auch gerade im Blog besprochen wurde, haben wir (twobox.com und de la Haye) gerade unsere neue Extension "wfl" veröffentlicht.

Mit dem Webfontloader können bequem und einfach Schriften verschiedener Anbieter genutzt werden:

• Google Webfonts
• Fontsquirrel @Fontface Kits
• Typekit
• Monotype (fonts.com)
• CSS-Dateien mit fertigen @font-face-Angaben (lokal und extern)
• Schriftdateien (.eot, .woff, .ttf, .svg, lokal und extern)
• Fertig gelieferte Code-Schnipsel

Die Schriften können meist den Google WebFont Loader nutzen, mit dem erweiterte CSS-Konfigurationen abhängig vom Ladestand etc. möglich sind. Es sind aber auch weitere Einbindungsmöglichkeiten pro Seitenlayout vorgesehen:

• Google WebFont Loader plus CSS
• Google WebFont Loader plus CSS im noscript-Tag (validiert leider nicht, da das w3c den noscript-Tag im Header nicht vorsieht)
• Nur CSS
• Nur Google WebFont Loader (hier stehen allerdings nur mit Javascript Fonts zur Verfügung)

Die Fontsquirrel @Fontface-Kits werden automatisch in die Contao-Dateiverwaltung geladen und stehen dann dort als lokale Dateien zur Verfügung.

Wichtig: Die Lizenzbedingungen der einzelnen Fonts sollten beachtet werden. Insbesondere gibt es Anbieter, die vorschreiben, dass ein Hotlinking der Schriftdateien unterbunden werden muss.

Eine Doku ist in Arbeit, da manche Funktionen sicherlich erläuterungsbedürftig sind. Wenn Ihr aber die Hinweistexte an den Eingabefeldern beachtet, müsste es auch so gehen.

Die jetzt veröffentlichte Version ist eine Beta-Version. Nutzt sie bitte und gebt uns ein Feedback, was wir noch "ausbügeln" sollten, damit möglichst bald eine stabile Version zur Verfügung steht. Wobei auch die Betaversion schon recht stabil läuft

Grüße,

Christian & Markus

[dave.matter]

Ist ja genial!
Werde ich diese Woche auf jeden Fall ausprobieren & testen..

Vielen Dank!

[tblumrich]

Hi.

Hört sich genial an. Google funktioniert auch bestens.
Bei Fontsquirrel hab ich meine Probleme...
Wenn ich die URL des Font Kits eingebe und speichere, gibts da drunter im Feld (Im Kit vorhandene Schriften) immer ein "ERROR 404 - not found".

Woran könnte das liegen? Irgendein Feature was der Server können muss oder so?
Unter GetKit werden dort Links in folgender Form ausgegeben (wahlloses Beispiel):
http://www.fontsquirrel.com/fontface...artoonist-Hand

Link funktioniert und es wird normal runtergeladen beim normalen klick.

Gruß
Thomas

[christian]

Hallo Thomas,

wird denn in der Dateiverwaltung der Pfad /fontsquirrel/SF-Cartoonist-Hand angelegt und mit Dateien befüllt?

Grüße,

Christian

[tblumrich]

Hallo Christian,

Nein leider nicht, es wird nur der rootordner fontsquirrel (755) direkt in tl_files angelegt. Inhalt ist leer.

Gruß
Thomas

PS: Die Kitdatei ist ja ein ZIP Archiv. Kann es sein das es Probleme beim Entpacken auf dem Server gibt?

[christian]

Hallo Thomas,

es wird im Laufe des Abends schon die nächste Version geben, da noch ein paar kleinere Sachen aufgefallen sind. Ggf. hat es sich dann auch schon erledigt.

Grüße,

Christian

[tblumrich]

Hi.

Super. Dann warte ich erstmal ab... Danke dir.

Gruß
Thomas

[xtcPlanet]

Das is GANZ GROßE Klasse, was Ihr da gemacht habt !!! GANZ GROßES LOB !!!

So macht Contao RIESEN Spaß !!!

Danke an alle, die bei dieser wertvollen Erweiterung mitgewirkt haben )

Weiter so... vielen Dank

xtcPlanet

[christian]

So, die neue Version ist im Repository. Bitte nach dem Update die angelegten Schrift-Definitionen nochmal neu speichern (besonders die für Fontsquirrel).

Und danke für die Blumen

@Thomas
Kannst Du bitte mal testen, ob Dein Problem noch existiert?

Grüße,

Christian

[tblumrich]

Hi Christian,

Eben getestet. Leider bleibt das Problem bestehen...
ERROR 404 - not found

Hast du eventuell mal Lust ins Backend zu gucken ob ich da alles richtig mache (wobei man ja eigentlich nicht viel falsch machen kann)?

Gruß
Thomas

[christian]

Nach ein paar Bugfixes und kleineren Änderungen habe ich eben die erste stabile Version veröffentlicht.

Es gibt auch ein ausführliches Handbuch zum Webfontloader.

@Thomas:
Es scheint, als ob Dein Server den PHP-Befehl ini_set(...) nicht erlaubt, den ich aber brauche, um bei Fontsquirrel die Kits abrufen zu können.

Grüße,

Christian

[tblumrich]

Fein, fein.

@Christian
Wie bekomme ich das raus... ? Ist leider kein eigener Server. Direkt komme ich an die php.ini nicht ran - ich kann nur ein paar wenige Parameter verändern. Müsste ich beim Hoster nachfragen oder steht sowas in der phpinfo oder so?

Seltsam ist ja nur, das es parallel auf einem anderen Server und einer anderen Contao Installation ebenfalls nicht geht.

Gruß
Thomas

[christian]

Wie man das - ausser durch testen - rausbekommt, kann ich Dir leider nicht sagen.

Seltsam ist ja nur, das es parallel auf einem anderen Server und einer anderen Contao Installation ebenfalls nicht geht.

Stimmt. Und wenn es zu oft vorkäme, wäre das schon blöd. Der Knackpunkt ist, dass Fontsquirrel bei der Anforderung des Downloads prüft, ob/was es für ein anfragender User-Agent/Browser ist und ggf. den Download verweigert (wie bei Dir). Also sorgt das Script dafür, dass der Server sagt "ich bin ein Mozilla-Browser".

Mal sehen, vielleicht gibt es ja noch eine andere Lösung.

Grüße,

Christian

[tblumrich]

Hi.

Ich hab mal beim Hoster nachgefragt. Es ist tatsächlich so, der Befehl ist nicht erlaubt aus Sicherheitsgründen. Begründung war das Risiko eines Serverhacks darüber... und ist wohl so auch schon versucht worden.

Schade... da bleibt wohl für mich weiterhin die manuelle Einbindung.

Gruß
Thomas

[christian]

Schade... da bleibt wohl für mich weiterhin die manuelle Einbindung.

Warte damit mal noch nen Tag. Ich habe dank dem Kollegen lindesbs eine Lösung, die nicht gesehen hatte. Es erledigt sich.

Grüße,

Christian

[christian]

@Thomas
Die neue Version ist online. Mal sehen, ob sie Dein Problem löst.

Grüße,

Christian

[tblumrich]

Geil. Funktioniert jetzt 1A bei mir.
Vielen Dank für die Hilfe und die Anpassung.

Gruß
Thomas

[christian]

Prima! Dann viel Spaß damit.

[molly]

Für dieses tolle Modul, die Arbeit und das gut verständliche Handbuch, auch für Noobs wie mich

[christian]

Danke Molly!

[Wichteldesign]

Danke! Sehr schöne Erweiterung, gewohnt guter Support und bedienbarkeit.

[Fulano]

Danke für diese Erweiterung.

[compufreak]

VIELEN DANK! Für diese Extension! Ich finds hammergeil!
Wirklich!
Es ist zwar schon einigermaßen selbsterklärend, doch an manchen Stellen viel es mir schwer. Was ich an der Doku noch vermisse sind zwei Dinge:

1. Dass man die Schriften noch in das Seitenlayout einbinden muss (wobei das ja oft bei solchen Dingen der Fall ist... aber die Anfänger brauchen den Tipp denke ich).

2. Wie man die Schrift nun wirklich einbindet. Also unter welchem Namen und so (Auch eher für die Anfänger...).

Vielen Dank nochmal!

lg,
Till

[tobihessen]

Hallo, wie bindet man denn die Schrift wirklich ein? Was muss ich im CSS angeben? Nur den Schriftnamen?

[lindesbs]

Schau die Post #11 an

[olibo]

Hallo Christian, danke für diese tolle Extension. Allerdings fällt mir beim Test auf, dass die Schrift unter XP im IE nicht angezeigt wird. Ich habe einen Webfont per "eigene CSS-Datei" eingebunden. Die CSS Datei sowie die entspr. Schriftdateien liegen genau so in meiner Dateiverwaltung, wie ich Sie vom Hersteller bekommen habe. Syntax wie folgt:

@font-face {
font-family: 'StMarieWebThin';
src: url('stmarie-thin_web-webfont.eot');
src: url('stmarie-thin_web-webfont.woff') format('woff'), url('stmarie-thin_web-webfont.svg#webfontHNmhr3jr') format('svg');
font-weight: normal;
font-style: normal;
}

Sind Probleme im IE bei der Anzeige der Webfonts bekannt?
Die Schreibweise in der CSS-Konfiguration meiner h1, h2 usw.entspricht genau der Schreibweise bei "font-family", hab's auch schon probiert mit Anführungszeichen: StMarieWebThin,'StMarieWebThin'. Bringt aber nichts.

Jemand ne Idee? Danke!!

Die Schrift ist übrigens ein frei verfügbarer Freefont unter CC License

[olibo]

Hallo Kollegen,

ich habe nun dank des folgenden Artikels eine Lösung gefunden:
http://www.bloggerschmidt.de/blog/it...zu-nutzen.html

Für alle, die vielleicht das gleiche Problem haben und auf diesen Thread stoßen, hier die Lösung, die bei meinem Beispiel die Schrift auch am IE zum Laufen bringt:

Die neue Syntax meiner @font-face css lautet wie folgt:
@font-face {
font-family: 'StMarieWebSCThin';
src: url('stmarie-thin_web_sc-webfont.eot#') format('eot'),
url('stmarie-thin_web_sc-webfont.woff') format('woff'),
url('stmarie-thin_web_sc-webfont.svg#webfonti6QgH8L5') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'StMarieWebThin';
src: url('stmarie-thin_web-webfont.eot#') format('eot'),
url('stmarie-thin_web-webfont.woff') format('woff'), url('stmarie-thin_web-webfont.svg#webfontHNmhr3jr') format('svg');
font-weight: normal;
font-style: normal;
}

Danke noch mal für die tolle Extension!

[Flex]

Unter 2.10 muss noch zwischen HTML5 und XHTML Strict Einbindung unterschieden werden, denn momentan validiert es nicht unter XHTML Strict, da es kein Selfclosing Tag ist.

[RainerG]

Wie wird eigentlich der Text angezeigt, wenn die Schriften (warum auch immer) nicht zur Verfügung (weil der entsprechende Dienst down ist z. B.) stehen oder JS nicht eingeschaltet ist?

[Macabelle]

Es gibt auch ein ausführliches Handbuch zum Webfontloader.

Vielen vielen Dank!

[Flex]

Wie wird eigentlich der Text angezeigt, wenn die Schriften (warum auch immer) nicht zur Verfügung (weil der entsprechende Dienst down ist z. B.) stehen oder JS nicht eingeschaltet ist?

Mit der hoffentlich definierten Fallback Schrift.

Ansonsten braucht man kein JS aktiviert haben damit die Schrift angezeigt wird, es wird ja über CSS eingebunden...

[planepix]

Hi Christian,

gestern den wfl Version 1.1.0 stable, Built 4 in Contao 2.10.2 geladen.

Beim Validieren fehlt noch ein abschliessender Slash:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT Sans" type="text/css">

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT Sans" type="text/css" />

Bei der Version des wfl für 2.9.x ist der abschliessende Slash vorhanden.

[jojojohann]

Hi,
erstmal danke für das super modul.
Im Grunde läuft es bei mir super. Ich habe mal eine Schrift von fontsquirrel.com eingebunden.

Firefox und Safari läuft, Opera (9.64) läd aber die Schrift nicht. Weis jemand woran das liegen könnte?

[tblumrich]

Hi Christian,

gestern den wfl Version 1.1.0 stable, Built 4 in Contao 2.10.2 geladen.

Beim Validieren fehlt noch ein abschliessender Slash:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT Sans" type="text/css">

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT Sans" type="text/css" />

Bei der Version des wfl für 2.9.x ist der abschliessende Slash vorhanden.

Ich würde das Anliegen an dieser Stelle nochmal bekräftigen wollen. Läßt sich das nicht so einfach beheben für 2.10.*? Funktioniert ja alles, aber wenn man eben auf Validität optimiert, stört so ein Eintrag doch irgendwie.

Danke.

Gruß
Thomas

[christian]

Hallo zusammen,

ich habe eben eine neue Version hochgeladen, die das Problem beseitigt.

Grüße,

Christian

[planepix]

Danke dir Christian.
Und jetzt schöne Feiertage :-)

[christian]

Dir auch! Gönn Dir eine schöne Havanna und einen Single Malt dazu ;-)

Grüße,

Christian

[Babelfisch]

Habe gerade das letzte Update installiert und jetzt das Problem, dass im CSS immer nur der letzte Font in der Liste eingebunden wird. Es gibt also immer nur einen @font-face Abschnitt mit dem letzten Font. Setze ich diesen Font auf nicht-veröffentlicht, wird der Font davor eingebunden.

Gruß

[Babelfisch]

Ich habe mir mal den Quellcode angeschaut und den Fehler in der wfl.php entdeckt. In der Methode getConfigs($wfl) werden für OWNFILES und CUSTOMFILES immer die Daten der Fontfamilie überschrieben und so wird nur der letzte Wert behalten. Statt diesem Code:

case 'OWNFILES':
  $return['ownfiles'][$objWfl->family] =  array( 

… muss es so aussehen:

case 'OWNFILES':
  $return['ownfiles'][$objWfl->family][] =  array( 

Entsprechend muss es in der Methode getFontFaceCSS() auch anderes ausgelesen werden:

foreach($this->arrConfigs['ownfiles'] as $k=>$a)
{
    foreach($a as $v)
    {
        $return .= '@font-face {
    font-family: \''.$k.'\';
    src: url(\''.$v['eot'].'\');
    src: url(\''.$v['eot'].'?#iefix\') format(\'embedded-opentype\'),
    url(\''.$v['woff'].'\') format(\'woff\'),
    url(\''.$v['ttf'].'\') format(\'truetype\'),
    url(\''.$v['svg'].'\') format(\'svg\');
    font-weight: '.$v['weight'].';
    font-style: '.$v['style'].';
}
';
    }
} 

Damit klappt es jetzt bei mir.

Gruß

[Babelfisch]

Die foreach-Schleife in getFontFaceCSS() habe ich jetzt noch mal überarbeitet, sodass nur noch die Fonts eingebunden werden, die auch wirklich gesetzt sind. Bisher wurden ja immer leere URLs für bspw. ttf oder svg eingebunden, auch wenn dafür gar keine Fonts vorhanden sind.

foreach($this->arrConfigs['ownfiles'] as $k=>$a)
{
    foreach($a as $v)
    {
        $return .= "@font-face {\n";
        $return .= "\tfont-family: '".$k."';\n";

        if (!empty($v['eot']))
        {
            $return .= "\tsrc: url('".$v['eot']."');\n";
        }
        if (!empty($v['eot']) || !empty($v['woff']) || !empty($v['ttf']) || !empty($v['svg']))
        {
            $return .= "\tsrc:";
            $delim = ' ';

            if (!empty($v['eot']))
            {
                $return .= $delim."url('".$v['eot']."?#iefix') format('embedded-opentype')";
                $delim = ",\n\t";
            }
            if (!empty($v['woff']))
            {
                $return .= $delim."url('".$v['woff']."') format('woff')";
                $delim = ",\n\t";
            }
            if (!empty($v['ttf']))
            {
                $return .= $delim."url('".$v['ttf']."') format('truetype')";
                $delim = ",\n\t";
            }
            if (!empty($v['svg']))
            {
                $return .= $delim."url('".$v['svg']."') format('svg')";
            }
            $return .= ";\n";
        }

        $return .= "\tfont-weight: ".$v['weight'].";\n";
        $return .= "\tfont-style: ".$v['style'].";\n";
        $return .= "}\n";
    }
} 

Damit stehen jetzt im Stylesheet nur noch die notwendigen Einträge drin.

Gruß