Frage Webfont zwar auf Safari aber auf Chrome nicht richtig angezeigt?

[ichbineinberliner]

Einen schönen Guten Tag wünsche ich,

ich habe selbst eine Icon-Font erstellt. Wenn ich diese Font in meinem CSS einbinde (per Font-Face) habe ich zwei Probleme:

1. Zwischen zwei Icons kommt eine Lücke (die es aber gar nicht gibt). Ich habe die Font auch als TTF für den Rechner erstellt und wenn ich sie in InDesign nutze, gibt es so wie eingestellt keine Lücken. Ich weiß nicht, warum dort auf einmal welche sind?​

2. Bei Safari wird mir das Icon richtig angezeigt (bis auf die Lücke, die zeigt jeder Browser), auf allen anderen Browsern wird es mir falsch angezeigt. Ein Beispiel von RE1 siehst Du im Anhang. Safari richtig, Chrome falsch.​

​

Zum Verständnis: RE1 ist ein Icon, RE17 besteht aus RE1 und 7, daher befindet sich dort eine Lücke.

Wenn ich die Font aber ein einen WebFont-Viewer lade, dann sieht sie in jedem Browser richtig aus. Also keine Lücke und keine verzerrte Ansicht.

Woran kann es liegen? Ich weiß nicht mehr weiter...

Einbindung per Font-Face:

@font-face {
   font-family: "FONT_NAME";
   font-style: normal;
   font-weight: 400;
   src: url("PFAD_ZUR_FONT.woff2") format('woff2'),
        url("PFAD_ZUR_FONT.woff") format('woff'),
        url("PFAD_ZUR_FONT.ttf") format('truetype');
}

.ic-RE17::before {
    font-family: "FONT";
    content: "RE17";
    color: #ec0016;
    font-size: 32px;
    vertical-align: top;
    font-style: normal;
}

<i class="ic-RE17"></i>

Hast Du eine Idee? Vielen Dank im Voraus! :)

 

[basti1012]

So kann ich keinen Fehler finden.
Du könntest am Anfang der Css mal das eingeben.

*{
margin:0;
padding:0;
}

Vielleicht hilft das schon