Verwenden einer ttf-Datei in css

Question

Nach meinem Wissen, um eine benutzerdefinierte Schrift zu verwenden, die lokal in diesem Fall gespeichert ist, würden Sie etwas ähnliches verwenden.

@font-face { 
    font-family: 'theFontFamily'; 
    src local('the font'), 
     local('the-font'), 
     url(path/to/the-font); 
} 

.fontClass { 
    font-family: 'theFontFamily', extra_settings; 
} 

Also mit dieser font, lokal, würden Sie dies erwarten zu arbeiten?

Wie wenn ich es versuche, ändert der Code die Schriftart, nur nicht auf die gewünschte Schriftart. Es sieht aus wie das.

Während, wenn ich den Import Link, <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">, nur mit dem folgenden Code funktioniert.

.logo-container { 
    font-family: 'Pacifico', cursive; 
} 

Das sieht so aus.

ich gemacht habe wahrscheinlich einen einfachen Fehler, und ich würde es begrüßen, wenn jemand in der Lage sein würde, mich dies bei der Festsetzung zu unterstützen.

Answer 1

Stellen Sie sicher, dass Sie die Quell-URL ordnungsgemäß verknüpfen. Versuchen

@font-face { 

    font-family: 'myPacifico' ; 
    src: url('/resources/fonts/Placifico.ttf') format('truetype'); 

} 

dass genug Grund ist, dann zu verwenden ... .Logo-Container {

 font-family: 'myPacifico', san-serif;  } 

San-serif in diesem Fall ist ein Rückfall. In diesem Fall ist ive mit der regulären ttf-Datei verknüpft. Für Fett- und andere Stile müßten Sie mit einem anderen @ font-face mit einem anderen Namen verlinken.

Answer 2

Vielleicht wird dies (tricky sicher zu sagen, ohne 100% testen zu können) arbeiten:

@font-face { 
    font-family: 'Pacifico'; 
    src: url('Pacifico-Regular.eot'); 
    src: url('Pacifico-Regular.eot?#iefix') 
     url('Pacifico-Regular.woff2') format('woff2'), 
     url('Pacifico-Regular.woff') format('woff'), 
     url('Pacifico-Regular.ttf') format('truetype'), 
     url('Pacifico-Regular.svg#svgFontName') format('svg'); 
} 

nur um lokal die Truetype-Schriftart verwenden:

@font-face { 
    font-family: 'Pacifico'; 
    src: url('Pacifico-Regular.ttf'); 
} 

Beachten sollten Sie Sie haben mehr als nur die TrueType-Schriftart für die höchste Browserkompatibilität, aber zum Testen mit nur TTF können Sie alle Zeilen löschen, die nicht auf die TTF-Version verweisen.