Und schon wieder Probleme mit gekauften Webfonts :-(

International German
1

Moin,
ich habe mir bei fontshop.com eine Schriftenfamilie bestehend aus 6 Schriftschnitten gekauft. Lade ich das Webfontkit, werden die Schriften in den Formaten ttf - eot - woff und woff2 geladen. Die Bezeichnungen der jeweiligen Schriftschnitte sehen sehr kryptisch aus. Der Schriftname und der Schriftschnitt sind nicht mehr zu erkennen. Aber das scheint zum Schutz der Schrftschnitte von Fontshop zu sein und wahrscheinlich, damit FS die Pageviews, die man lizensiert gekauft hat, besser nachverfolgen kann.
Zu den heruntergeladenen Schriften gibt es außerdem ein Demo CSS und ein Demo html File. Hier wird beschrieben, dass man CSS Code (der wird schon vorgegeben) nur per Copy Paste in den Head-Bereich der Website einfügen soll.
Ist das in RW überhaupt möglich? Wenn ja, womit?
Wenn nein, kann ich dann das entsprechende html-File in (z.B. BBEdit) öffnen und den CSS Code in der Headbereich hineinkopieren, abspeichern und das html-file wieder zurück auf den Server spielen? Was passiert dann aber bei der nächsten Änderung, die ich in RW an der Seite mache? Wird dann das file wieder überschrieben und mein CSS-Code verschwindet wieder?
Dieser Webfont-Mist nervt echt gewaltig! FontShop ist ja nun nicht gerade eine kleine Typo-Bude sondern ein angesehenes Schriftenhaus, Wie kann das alles nur so kompliziert sein? Ich habe mir auch schon sämtliche Tutorials vom Font Pro Stack angesehen, werde aber nicht wirklich schlauer daraus.

Bin vollkommen frustriert uns extrem genervt! >:-(
Vielleicht mag mir ja einer von euch helfen?

Gruß,
Jan

2

Hi Jan,
Dieser Stack nimmt dir die Konfiguration ab: https://instacks.com/customfontstack/

Grüße Jannis

3

Hallo Jannis, ich kann ja verstehen, dass du deine Stacks verkaufen möchtest, vielleicht funktioniert das ja auch, aber …
Ich habe nun mal schon Font Pro gekauft und hier kann ich die Schriften - so heißt es zumindest genauso einbinden wie in deinem Stack.

Das Problem ist allerdings, wie bereits beschrieben, dass das Webfontkit die Schriften (in meinem Falle ist es die Supernett Condensed in Light, Regular, Bold und den dazugehörenden Italic-Schnitten) einzeln in kryptische Zeichenketten umwandelt. Deshalb kann ich nicht sagen, “nimm den einen Schriftschnitt und setz automatisch ein .woff oder ein .ttf oder ein .eot oder ein .woff2 dahinter”.
Also muss ich mich für einen Dateityp entscheiden und das ist das .woff File. Vielleicht muss ich ja auch ein anderes nehmen, aber wer um Himmels Willen sagt mir, welches ich nehmen soll??? Es ist echt zum Junge-Hunde-Kriegen!

Ansonsten ist das Font Pro Stack genauso aufgebaut wie dein Customfontstack. Also muss der Fehler irgendwo anders liegen.

Gruß,
Jan

4

Ohne irgen eine live Seite ist es unmöglich, weitere Hilfestellungen zu geben. Vielleicht sind die Dateien korrupt?

5

Hi Jannis,

es geht um diese Seite hier: http://www.woodthings.de

Gruß,
Jan

6

Ich verstehe immer noch nicht dein Problem. FontPro scheint auf Deiner Seite zu funktionieren. Globalen CSS Code kannst Du in RW folgendermaßen einfügen: https://rapidweavercommunity.com/tutorials/series/new-features-in-rapidweaver-7/episode/site-wide-code-1

7

Und da ich nicht sehe, wie die einzelnen Dateien von Webfontkit heißen…

8

Guck mal hier, das sind Screenshots der Browser Safari, Chrome und Firefox. Und das hier ist z.B. die Bezeichnung des Supernett Bold Schriftschnittes: “ba35a7a1-7e88-4e55-8ebd-54833f2bcf70.woff”

Gruß,
Jan

9

Safari zeigt es richtig an. Die Typo “Was sind Woodthings?” ist die Signpainter House.

10

Schick mir doch mal die generierten Fonts-Dateien (und nicht nur das Woff Format) als PM.

11

Aloha @Jan69,

also zu allererst, nur eins der Formate zu verwenden ist eine eher schlechte Idee, denn die Formate werden von verschiedenen Browsern auch nur unterschiedlich gut unterstützt. (Die alten IE-Versionen z.B. brauchen EOT, die aktuellen Browser bedient man am besten mit WOFF2, etc.)

Bitte versuche mal folgendes:

  1. Gehe in Settings -> Code -> CSS

  2. Füge folgenden Code ein:

    @font-face {
    font-family: ‘Font’;
    src: url(‘font.eot’); /* IE9 Kompatibilitätsmodus /
    src: url(‘font.eot?#iefix’) format(‘embedded-opentype’), /     Für IE 6-8 /
    url(‘font.woff2’) format(‘woff2’), /     Top-Aktuelle Browser /
    url(‘font.woff’) format(‘woff’), /     Browser, die einige Versionen zurück liegen /
    url(‘font.ttf’) format(‘truetype’), /     Safari, Android, iOS /
    url(‘font.svg#svgFontName’) format(‘svg’); /     altes iOS */
    }

Für ‘Font’ gibst du einen sinnvollen Namen ein, in url(‘XXX’) den Link zur Fontfile (in den Resources z.B.) Sollte eines der Formate (z.B. SVG) nicht vorhanden sein, lösche im Code den entsprechenden Teil. Für jeden Schnitt (Bold, Italic, etc.) muss das erneut gemacht werden. Danach kannst du die Font auf jeder Seite unter dem von dir vergebenen Namen aufrufen.

Hoffe das hilft weiter.

Happy weaving,
~N

12

super, vielen Dank für deine ausführliche Beschreibung. Da werde ich mich mal dran machen.

Gruß,
Jan

13

achso, muss ich den CSS Code auf jeder meiner Seiten einsetzen, oder reicht das in der index-Seite?

14

Im side wide code vom Projekt am besten.

15

und wo finde ich die side wide Maske, in der ich das eingeben kann?

(ich habe jetzt, so wie es aussieht, das Typoproblem gelöst. Das scheint eine Domain/Subdomain-Einstellungssache gewesen zu sein. Kannst ja mal checken. Bei mir läuft alles - allerdings mit dem Font Pro Stack :wink: Die Typo ist jetzt allerdings ein etwas andere, als die, die du gestern gesehen hast.)

Gruß,
Jan

16

https://rapidweavercommunity.com/tutorials/series/new-features-in-rapidweaver-7/episode/site-wide-code-1

17

Bei gekauften Fonts muss man diesbezüglich (also welche Domain etc.) besonders vorsichtig sein, da vor allem die aktuelleren Formate meist einen XML-Bestandteil haben, worin Lizenzangelenheiten recht klar und strikt geregelt sind.