Schrift einbinden

**enzian** · 30.05.2011, 16:03

Hallo

Ich habe gesehen,d ass es Erweiterungen in Contao gibt, mit denen man bestimmte Fonts einbinden kann.

Aber: Kann man in Contao auch eine Schrift, die man auf fontsquirrel.com fürs Web erstellt hat, einbinden?

Ich schaffe es die Fonts zu hinterlegen und das Stylesheet einzubauen, aber wie kann ich im Head das nötige JS aufrufen?

Danke für jeden Tipp.

Gruss
Enzian

**Flex** · 30.05.2011, 16:12

Die Erweiterung WebFontLoader unterstytzt FontSquirrel.

**enzian** · 31.05.2011, 10:21

Dabei kann man aber nur die Fonts einbinden, die Fontsquirrel selber anbietet, ich habe einen Desktopfont konvertiert auf Fontsquirrel und mchte den nun ins Web einbauen.

Danke
Marianne

**Flex** · 31.05.2011, 14:41

Und in welchem Format liegt die Schriftart vor?

Denn wfl kann ja auch "Schriftdateien (.eot, .woff, .ttf, .svg, lokal und extern)" einbinden.

***lucina*** · 31.05.2011, 15:30

Nutze den auf fonsquirrel.com vorhandenen Konverter (http://www.fontsquirrel.com/fontface/generator), generiere Dein Fontset, lade die dabei generierten Schriften in Deine Contao-Installation hoch, versehe Dein CSS mit den ebenfalls generierten CSS-Regeln (ggf. Pfade anpassen).

Ganz einfach & in 15 Minuten erledigt.

Du solltest allerdings sicherstellen dass Du über die entsprechende Lizenz für die eingesetzten Schriften verfügst, sonst kann das recht teuer werden.

Carolina.

**enzian** · 06.06.2011, 13:50

Danke vielmals. Hat funktioniert, aber die Schrift wird nicht üebrall gleich gut angezeigt, deshalb doch wieder Verdana ...

Gruss
Marianne

**Flex** · 06.06.2011, 16:18

Zur Einbindung der Fonts muss JavaScript aktiviert sein. Bei Verdana solltest du z. B. bedenken, dass die meisten Linux User nicht diese Font haben und auf eine alternative Font zurückfallen...

Eventuell wäre Google WebFonts eine Alternative?

***lucina*** · 06.06.2011, 16:33

Zitat von Flex

Zur Einbindung der Fonts muss JavaScript aktiviert sein.

Wie kommst Du darauf? @fontface ist CSS, nicht JS.

**Flex** · 06.06.2011, 16:51

Ja, das war mir schon klar, ich hatte es assoziert, weil NoScript es ebenfalls blockiert und ich vermutet hatte, dass es Browserintern durch die JS Engine verarbeitet wird.

Aber NoScript blockiert FontFace aus Sicherheitsgründen, nicht weil es mit der JS Engine verbunden wird.

**xkoy** · 10.06.2011, 12:14

Jetzt muss ich auch mal eine Frage in den Raum werfen, wozu überhaupt den Webfontloader nutzen? habe den jetzt laufen, aber wozu?

Wie Lucina beschreiben hat, hab ich auch auf Fontsquirel font generator benutzt, fertigen css bekommt man. Fontface rein und ende.

Das selbe mit typekit, 2 Zeilen in den Head und fertig.

Versteh nich wozu der WFL sein soll. Vielleicht kann mir das jemand erläutern

***xchs*** · 10.06.2011, 12:38

Zitat von xkoy

Versteh nich wozu der WFL sein soll. Vielleicht kann mir das jemand erläutern

Nun ja:

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

Wozu braucht man die Erweiterung "googleanalytics"? Den Tracking-Code kann man schließlich auch manuell einbinden.

Man kann vieles (bzw. wahrscheinlich sogar alles) auch manuell irgendwo einbinden, wenn man denn weiß, was man tut. Demzufolge (und nach dieser Logik) würden sich wohl ein Großteil der Erweiterungen im ER erübrigen...

Alles eine Frage von Komfort, Handhabbarkeit und UX.

***lucina*** · 10.06.2011, 13:40

Ich steh ja eigentlich nicht so auf Installationen, die mit Extensions vollgepackt sind - den WFL hab ich jetzt auch mal ausprobiert, und der ist sicher eine Erleichterung für viele.

Ob man das braucht oder nicht sei dahingestellt. Wirklich lecker finde ich die Option, ein Fontset bei Fontsquirrel auszuwählen und dann nach Eintrag der ID fertig zu sein. Nix runterladen, nix entpacken, nix CSS importieren ... das ist schon eindrucksvoll.

**Messa** · 10.06.2011, 13:46

@lucina

du hast oben wegen teuren Strafen bei Lizensverletzung was geschrieben.
Hattest du schon einmal so einen Fall?
Wer kontrolliert das? Dann müssten viele Grafiker Strafen zaheln

lg Matthias

**tblumrich** · 10.06.2011, 13:47

Das muss ich auch sagen... für die Google Webfonts, die eben auch dort gehostet werden, muss man die Erweiterung nicht unbedingt haben. Aber für Fontsquirrel und Co. ist das echt eine Erleichterung.

Gruß
Thomas

***lucina*** · 10.06.2011, 14:02

Zitat von Messa

@lucina
du hast oben wegen teuren Strafen bei Lizensverletzung was geschrieben.
Hattest du schon einmal so einen Fall?
Wer kontrolliert das? Dann müssten viele Grafiker Strafen zaheln

Ich kann Dir da leider keine Beratung geben - aber ich denke, dass jedem, der auch nur bis drei zählen kann, durchaus klar sein kann, dass es etwas anderes ist, eine Schrift gemäß der Lizenz des Herstellers in einer Bilddatei zu verwenden oder sie auf den Server zu packen und damit zum Download anzubieten.

Ein paar Infos dazu findest Du bei den Herstellern, und einen ganz netten Artikel, warum Schriften überhaupt Geld kosten, findest Du unter http://www.typografie.info/2/content...en-Geld-kosten.

Nein, ich hatte das noch nicht. Ich arbeite nicht für welche, bei denen ich um eine Schrift feilschen muss ... ;-) Für Unternehmen ist das in aller Regel auch kein Problem.

**christian** · 10.06.2011, 15:45

Zitat von xkoy

Versteh nich wozu der WFL sein soll. Vielleicht kann mir das jemand erläutern

Klar: Du kannst nicht nur Schriften verschiedener Anbieter in 1 Konfiguration packen und laden ("Sammlung"), sondern auch die ganzen Möglichkeiten des Google Webfontloaders nutzen. Z.B. Übergänge.

Grüße,

Christian

***lucina*** · 10.06.2011, 15:50

... und die Sammlungen sind richtig fein. Kunde nölt? Andere Schrift? Klick.

Carolina.

(fein gemacht @ linker Niederrhein)

**christian** · 11.06.2011, 12:40

Zitat von lucina

.fein gemacht @ linker Niederrhein)

Danke Caro!
Zum Glück steckt Pelle seinen Kopf auch gerne mal in in einen ganzen Eimer voll Theorie

**tobihessen** · 09.07.2011, 11:05

Eine Frage dazu.

Ich habe WLF installiert und eine Schrift meines Kunden aus der eigenen Dateiverwaltung eingebunden. Wie kann ich diese jetzt im CSS einbinden??

**Flex** · 09.07.2011, 11:38

Wenn man die Schrift über WFL eingebunden hat, ist sie danach wie andere Schriften einfach über die CSS Direktive font-family anzusprechen.

**tobihessen** · 09.07.2011, 12:05

Und die Bezeichnung ist die, die man bei "Name der Schrift" gewählt hat, ja?
Danke schon mal

**Flex** · 09.07.2011, 12:06

Vermute ich mal ganz stark. Hab den WFL noch nicht aktiv benutzt.

**tobihessen** · 09.07.2011, 19:52

Hm funktioniert so leider nicht ... kann mir jemand helfen?

**Flex** · 09.07.2011, 19:54

Mein Fehler. Der Name der Schrift wird dadurch gesetzt, das ist nur ein interner Name. Du musst den offiziellen Namen der Schrift verwenden!

**Philo** · 09.04.2013, 13:32

Der Webfontloader funkt aber nicht bei einem Contao 3.0

Wie genau funktioniert das mit dem "händisch einfügen"?

**Philo** · 09.04.2013, 14:10

habs schon gelöst

einfach

Code:

1	@font-face {
2	    font-family: 'CalligraphyFLFRegular';
3	    src: url('CalligraphyFLF.eot');
4	    src: local('CalligraphyFLF Regular'), local('CalligraphyFLF'), url('CalligraphyFLF.ttf') format('truetype');
5	}

alsStylesheet einfügen.
Weshalb braucht man eine Erweiterung, wenn es wirklich so einfach geht?

Das kann sogar ich und ich bin blutiger Anfänger

**ben_cms** · 06.02.2017, 13:25

Zitat von Philo

habs schon gelöst

einfach

Code:

1	@font-face {
2	    font-family: 'CalligraphyFLFRegular';
3	    src: url('CalligraphyFLF.eot');
4	    src: local('CalligraphyFLF Regular'), local('CalligraphyFLF'), url('CalligraphyFLF.ttf') format('truetype');
5	}

alsStylesheet einfügen.
Weshalb braucht man eine Erweiterung, wenn es wirklich so einfach geht?

Das kann sogar ich und ich bin blutiger Anfänger

Öhm also ich bin scheinbar zu blöd dafür^^ Im welchen Unterordner muss ich denn die Schrift auf dem Server hochladen?

**Samson1964** · 06.02.2017, 13:30

Philo hat das sicher im Ordner mit der CSS-Datei gemacht. Sonst wäre der Pfad ein anderer.

Gesendet von meinem L52 mit Tapatalk

**ben_cms** · 06.02.2017, 14:44

Zitat von Samson1964

Philo hat das sicher im Ordner mit der CSS-Datei gemacht. Sonst wäre der Pfad ein anderer.

Funktioniert bei mir einfach nicht. Ich habe die Fonts in den CSS-Ordner auf den Server und habe folgenden Code:

@font-face {
font-family:lissenregular;
src: url('lissen_regular-webfont.woff2') format('woff2'), url('lissen_regular-webfont.woff') format('woff');
src: local('lissen_regular-webfont.ttf'), local('lissen_regular-webfont.ttf'), url(lissen_regular-webfont.ttf') format('truetype');
}

**Andreas** · 06.02.2017, 18:33

Zeige bitte mal deinen Pfad zu deinem CSS-Ordner, zB "files/css/". Wie bindest du diese Datei ins FE ein?

**ben_cms** · 22.02.2017, 22:46

Zitat von Andreas

Zeige bitte mal deinen Pfad zu deinem CSS-Ordner, zB "files/css/". Wie bindest du diese Datei ins FE ein?

Oh hatte die Frage schon aus dem Fokus verloren. Ich habe die Fonts unter "assets/css" gespeichert.

Irgendwie wohl nicht richtig.

**Andreas** · 22.02.2017, 23:43

Du hast die Frage noch nicht beantwortet. In welchem Ordner liegt deine CSS-Datei und wie bindest du sie in dein FE ein? Oder benutzt du dieses Stylesheet-Modul im BE um dein CSS zu erstellen? Dann hast du postfaktisch keine CSS-Dateien, weil sich Contao um alles kümmert (diese Einbindung und Erstellung von CSS ist nicht empfohlen).

Und ja, da bist du falsch. Das ist ein Core-Ordner, da "darfst" du nicht dran gehen. Deine Dateien, welche fürs FE gedacht sind (css, js, jpg, png, pdf...), gehören nach files/. Templates und eigene PHP-Skripte gehören nach templates/. files/ ist öffentlich, templates/ ist geschützt.

Wenn du die "Stylemaschine" von Contao benutzt, dann musst du den Pfad immer ausgehend vom ROOT zwingend mit doppelten Anführungszeichen angeben:

HTML-Code:

background-image: url("files/images/my-img.png");

Wenn du eine eigene CSS-Datei einbindest, dann kannst du den Pfad ganz normal angeben, ausgehend von deiner CSS-Datei.

Code:

/files/css/styles.css
/files/images/my-img.png

HTML-Code:

background-image: url(../images/my-img.png);

In dem Beispiel ist die CSS in files/css/. Um nach files/images/ zu gelangen musst du also erstmal aus css/ raus "../" dann bist du in files/ und kannst nach images/ rein.

**ben_cms** · 26.02.2017, 17:05

Zitat von Andreas

Du hast die Frage noch nicht beantwortet. In welchem Ordner liegt deine CSS-Datei und wie bindest du sie in dein FE ein? Oder benutzt du dieses Stylesheet-Modul im BE um dein CSS zu erstellen? Dann hast du postfaktisch keine CSS-Dateien, weil sich Contao um alles kümmert (diese Einbindung und Erstellung von CSS ist nicht empfohlen).

Ich habe keine CSS-Datei angelegt gehabt! Ich hatte den Code "@font-face" im CSS übers Backend drin. Nun habe ich unter "files" ein "css" ordner angelgt. Dort habe ich die
Schriften "lissen_regular-webfont.woff & lissen_regular-webfont.woff2" reingepackt und eine CSS-Datei ("fonts.css) mit dem @font-face-Code und diese Datei über das Seitenlayout eingebunden. Problem bleibt aber weiter bestehen.

Keine Ahnung warum ich das nicht verstehe :/

**Andreas** · 27.02.2017, 10:58

Wenn die Schriftdateien direkt auf gleicher Ebene mit den CSS-Dateien liegen, dann muss dein Pfad so aussehen:

Code:

url(myfont.eot)
oder 
url('myfont.eot')

Ansonsten müsstest du mal einen Link zu der Seite zeigen.

**ben_cms** · 28.02.2017, 16:49

Link zur Seite: http://test.doktorgrafix.de

Hat irgendjemand anderes noch ein Tipp oder weiß um Rat?

**Andreas** · 28.02.2017, 17:53

So wie es aussieht wird die Schriftart geladen und kann auch benutzt werden.

In der momentanen assets/css/11a2171c3ef3.css sind Fehler drin, z.B.

PHP-Code:


#container h1 {

  font: 20px/1em Lissen; /* Schriftart Lissen gibt es nicht, nur lissenregular */

  letter-spacing: 1px;

  !important /* falsch */

}

Habe aber sonst nicht weiter geprüft, nur zufällig gesehen.

Du hast noch eine files/css/contao.css die eingebunden werden soll aber nicht vorhanden ist.

Im Layout solltest du alles Javascript deaktivieren und nur das einbinden, was du auch benötigst.

**ben_cms** · 28.02.2017, 23:35

Zitat von Andreas

So wie es aussieht wird die Schriftart geladen und kann auch benutzt werden.

In der momentanen assets/css/11a2171c3ef3.css sind Fehler drin, z.B.

PHP-Code:


#container h1 {

  font: 20px/1em Lissen; /* Schriftart Lissen gibt es nicht, nur lissenregular */

  letter-spacing: 1px;

  !important /* falsch */

}

Habe aber sonst nicht weiter geprüft, nur zufällig gesehen.

Du hast noch eine files/css/contao.css die eingebunden werden soll aber nicht vorhanden ist.

Im Layout solltest du alles Javascript deaktivieren und nur das einbinden, was du auch benötigst.

So jetzt! Endlich hat es geklappt! Danke für den hilfreichen hinweis.
Woher die "contao.css" kommt kann ich grade nicht ausmachen.

Das hat mir sehr geholfen! Danke!

Kann ich mich dafür irgendwie revangieren?

**Andreas** · 01.03.2017, 17:27

Musst du nicht, aber du kannst gerne mal auf meine Wunschliste von Amazone schauen

**Willi Wild** · 02.12.2017, 14:46

Ich habe ebenfalls Probleme mit eingebetten Fonts per @font-face. Meine Fonts liegen im Verzeichnis "/files/themes/my_theme/fonts/". Ich bette also die Schrift über CSS ein:

Code:

font-family: 'robotoSlab-regular';
src: local('RobotoSlab-Regular.tff'), url(/files/themes/my_theme/fonts/RobotoSlab-Regular.tff) format('truetype');

Leider wird die Schrift nicht dargestellt. Wenn ich im FirefoxDeveloperEdition auf den div klicke, dann wird die Schrift nicht gelistet. Wie kann ich checken, welche Schriften für den Browser geladen sind? Was mache ich falsch?

**Stefko** · 02.12.2017, 17:29

Zitat von Willi Wild

Leider wird die Schrift nicht dargestellt. Wenn ich im FirefoxDeveloperEdition auf den div klicke, dann wird die Schrift nicht gelistet. Wie kann ich checken, welche Schriften für den Browser geladen sind? Was mache ich falsch?

Was für eine Contao Version? Ist der Ordner freigegeben!

Gesendet von iPhone mit Tapatalk