@fonts einbinden fehlerhaft

[Jules30]

Hallo alle zusammen,

ich brauche mal wieder euren guten Ideen :-)

Ich möchte gerne eine gekaufte Schrift in meine Homepage einbinden. Allerdings klappt das nicht so richtig... Bisheriges Vorgehen:

1. Schriften im fonts Ordner hochgeladen
2. CSS (der Schrift) mit entsprechenden Links versehen
3. CSS (der Schrift) im Saitenlayout eingebunden (und die Schrift bei Google Fonts eingetragen)

Habe ich einen Schritt übersehen? Es will einfach nicht klappen...

VG Julia

[Spooky]

Wozu hast du die Schrift bei Google Fonts eingetragen?

Poste einen Link zur Seite, um zu sehen was schief läuft.

[Jules30]

Das war meine letzte Idee die ich noch hatte - macht sichlich keinen Sinn aber ich wollte es nicht unprobiert lassen...

Hier der Link:
http://aufbau.naturheilkunde-osteopathie-merseburg.de

h2 sollte die Schrift Jaz Handwriting werden...

[Spooky]

Die Font URLs solltest du nicht absolut setzen.

Ansonsten kann ich momentan nicht feststellen, warum es nicht geht.

[Jules30]

Das hatte ich dann auch aus meiner Verzweiflung heraus getestet... Vorher hatte ich es so stehen:

src: url('../fonts/NAME DER DATEI');
Ist das so richtig?


Tsja... ich verstehe es auch nicht.. sollte ja eigentlich nicht so schwer sein...

[Spooky]

src: url('../fonts/NAME DER DATEI');
Ist das so richtig?

Wenn der Ordner "font" sich im selben Ordner befindet, wie der Ordner, in dem sich die Datei mit dieser CSS Anweisung befindet, dann ja.

Tsja... ich verstehe es auch nicht.. sollte ja eigentlich nicht so schwer sein...

Gab es beim/nach dem Kauf irgendwelche Anweisungen, wie die Schrift auf der Website zu integrieren ist?

[Jules30]

Dies waren die Anweisung von Fontspring:

file:///D:/Videos/Kunden/Mareike/Schriften/My_Fontspring_Fonts(1)/Reference/How_to_use_webfonts.html


Das einzige was ich in der CSS von Fonntspring geändert habe, war den Namen der Font-Family... Hab ich etwas gekürzt... Aber anschließend so übernommen.

[mlweb]

file:///D:/Videos/Kunden/Mareike/Schriften/My_Fontspring_Fonts(1)/Reference/How_to_use_webfonts.html

Ich glaube nicht, dass jemand die Anleitung auf der Festplatte Deines Rechners lesen kann.
Hast Du mal versucht mit dem Originalnamen zu arbeiten.
Je nach dem was Du wo geändert hast, kann ich mir hier hausgemachten Ärger vorstellen.

[mlweb]

Zunächst solltest Du die Google-Fonts Einbindung wieder rausnehmen.
Außerdem habe ich mal bei einer meiner Seiten geschaut. Ich verwende da keine absoluten sondern relative Pfade.

[Jules30]

Ich glaube nicht, dass jemand die Anleitung auf der Festplatte Deines Rechners lesen kann.
Hast Du mal versucht mit dem Originalnamen zu arbeiten.
Je nach dem was Du wo geändert hast, kann ich mir hier hausgemachten Ärger vorstellen.

Mein Fehler...Hier die Anleitung:


Installing Webfonts

Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.
1. Upload your webfonts

You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.
2. Include the webfont stylesheet

A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the Fontspring blog post about it. The code for it is as follows:

@font-face{
font-family: 'MyWebFont';
src: url('WebFont.eot');
src: url('WebFont.eot?#iefix') format('embedded-opentype'),
url('WebFont.woff') format('woff'),
url('WebFont.ttf') format('truetype'),
url('WebFont.svg#webfont') format('svg');
}

We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:
<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
3. Modify your own stylesheet

To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:
p { font-family: 'MyWebFont', Arial, sans-serif; }
4. Test

Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.

[Jules30]

Zunächst solltest Du die Google-Fonts Einbindung wieder rausnehmen.
Außerdem habe ich mal bei einer meiner Seiten geschaut. Ich verwende da keine absoluten sondern relative Pfade.

GoogleFont ist raus, die Änderung habe ich durch die Originaldatei ersetzt... Pfad muss ich noch relativ machen...

Aber ansonsten bleibt das Problem immer noch...

[mlweb]

Bei Dir hat sich ein Fehler eingeschlichen. Da gibt es mehrfach src: zuviel nach dem ersten Komma

Mit dem Code für @font-face sollte es funktionieren

@font-face {
    font-family: 'jaz_handwriting_proregular';
    src: url("http://aufbau.naturheilkunde-osteopathie-merseburg.de/files/580-mirabelle/fonts/Jaz_Handwriting_Pro-webfont.eot");
    src: url("http://aufbau.naturheilkunde-osteopathie-merseburg.de/files/580-mirabelle/fonts/Jaz_Handwriting_Pro-webfont.eot?#iefix") format('embedded-opentype'),
     url("http://aufbau.naturheilkunde-osteopathie-merseburg.de/files/580-mirabelle/fonts/Jaz_Handwriting_Pro-webfont.woff2") format('woff2'),
    url("http://aufbau.naturheilkunde-osteopathie-merseburg.de/files/580-mirabelle/fonts/Jaz_Handwriting_Pro-webfont.woff") format('woff'),
     url("http://aufbau.naturheilkunde-osteopathie-merseburg.de/files/580-mirabelle/fonts/Jaz_Handwriting_Pro-webfont.ttf") format('truetype'),
     url("http://aufbau.naturheilkunde-osteopathie-merseburg.de/files/580-mirabelle/fonts/Jaz_Handwriting_Pro-webfont.svg#jaz_handwriting_proregular") format('svg');
    font-weight: normal;
    font-style: normal;

}

[Jules30]

Der Teufel steckt wie immer im Detail - es lag wirklich daran... Tausend Dank!!!!