Fonts in Windows Firefox / Google Chrome

[FLU]

Hey zusammen

Ich habe ein Prob...ich versuche einen GoogleFont in einem neuen Projekt zu integrieren (hatte ich bisher nie Probleme mit). Nun habe ich den Font "Montserrat" per link eingebunden und verwendet. Auf Windows in Firefox und Chrome sieht der Font nun wie im Bild im Anhang aus (...scheisse & verpixelt).

Was ich bereits als Lösung versucht habe:
-> Den Font in allen Formaten heruntergeladen und via Font-Face eingebunden:

@font-face {
    font-family: 'Montserrat-Regular';
    src: url('/static/css/Montserrat-Regular.eot');
    src: url('/static/css/Montserrat-Regular.eot?#iefix') format('embedded-opentype'),
        url('/static/css/Montserrat-Regular.svg#Montserrat-Regular') format('svg'),
        url('/static/css/Montserrat-Regular.woff') format('woff'),       
        url('/static/css/Montserrat-Regular.ttf') format('truetype');
}

-> Diverse Hacks mittels:

html{
    height: 100%;
    /*-webkit-font-smoothing:antialiased;
    text-shadow: 0 0 1px rgba(0,0,0,0.3);
    -webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px
    */
    -webkit-text-stroke: 0.3px;
}

Leider bringe ich es unter Firefox nicht besser hin...Durch das ich den SVG-Font an oberster Stelle nehmen, siehts wenigstens im Windows GChrome einigermassen aus...FF interpretiert das jedoch nicht.

Danke Euch für alle Tipps

 

[zilVerGFX]

Hast du vielleicht einen Link damit man sich das Problem mal live anschauen kann?

 

[FLU]

scheint auch auf der google fonts seite das problem zu haben....

 

[Raen Andaleio]

Das Problem ist, dass diese Google Fonts WOFF (World Open Font Format) sind. Die werden nicht überall gleich gerendert. Auf dem Rechner meiner Kollegin im Firefox sehen die Montserrat-Buchstaben halbwegs ok aus. Auf meinem Rechner, ebenfalls in Firefox, sehen sie aus als wären sie nicht vernünftig entgratet.
Während Standard-Fonts überall ziemlich gleich aussehen, scheint die Optik von einigen WOFF (das beinhaltet alle Google Fonts) abhängig vom Browser und Computer/Bildschirm zu sein.
Ich empfehle für Webseiten Webfonts (oder web safe Fonts) zu verwenden. Diese sind in die Browser eingebaut. Für Sondersachen würde ich Bildgraphiken verwenden.
Hier findest du die grundlegendsten sicheren Fonts: http://www.w3schools.com/cssref/css_websafe_fonts.asp
Sie sehen, abhängig von Browser und Betriebssystem teilweise zwar etwas unterschiedlich aus, liefern aber ein sauberes Schriftbild.

~Raen