2016-05-26 10 views
1

Ich habe Helvetica Neue Fonts von einem Designer geerbt, und ich muss sie auf der Website verwenden. A screenshot of what fonts I got. (I kümmern sich nur um regelmäßige und fett.)CSS - Verknüpfung mit benutzerdefinierten Schriftarten - Regular funktioniert, Fett ist nicht

  1. Meine normale Schrift ist zu arbeiten, aber mein strong ist es nicht! Warum? Here is what it looks like in the site.

  2. Kann ich diese Definitionen für fett und normal in einer Zeile kombinieren?

PS. Ich benutze Bootstrap, wenn das ein Unterschied macht.

CSS

@font-face { 
    font-family: 'Helvetica Neue'; 
    src: url('../fonts/helvetica-neue/regular.woff'); 
} 
@font-face { 
    font-family: 'Helvetica Neue Bold'; 
    src: url('../fonts/helvetica-neue/bold.woff'); 
    font-weight: bold; 
    } 

.and-then-something-like { 
font-family: 'Helvetica Neue', Helvetica, "Open Sans", sans-serif; 
} 
+2

Versuchen Sie Folgendes: Wenn Sie das 'font-weight' als' bold' auf der font-face-Deklaration definieren, müssen Sie den gleichen 'font-family' Namen wie den regulären verwenden. Du deklarierst die Schriftart als HelveticaNeue nicht NeueBold – DaniP

+0

^Warum das den Job gemacht hat. Ich entfernte Fett von der Deklaration. Vielen Dank! Muss ich eine separate Deklination haben? für jedes Gewicht, oder gibt es eine mehr kondensierte Syntax, die ich verwenden kann? – janeh

+0

Sie benötigen eine separate Deklaration für jede einzelne Datei, da separate Dateien geladen werden sollen. :) Froh, U zu helfen – DaniP

Antwort

0

Sie müssen jeden src in einer anderen font-face haben, bei diesem Beispiel aus Google Fonts genommen aussehen.

In Ihrem Beispiel ändern Sie den font-family Namen (was in Ordnung ist), aber dann, wann immer bold ist, müssten Sie diesen geänderten Namen geben.

Es ist besser, das gleiche font-family zu behalten.

@font-face { 
    font-family: 'Josefin Sans'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Josefin Sans'), local('JosefinSans'), url(https://fonts.gstatic.com/s/josefinsans/v9/xgzbb53t8j-Mo-vYa23n5ugdm0LZdjqr5-oayXSOefg.woff2) format('woff2'); 
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; 
} 

@font-face { 
    font-family: 'Josefin Sans'; 
    font-style: normal; 
    font-weight: 700; 
    src: local('Josefin Sans Bold'), local('JosefinSans-Bold'), url(https://fonts.gstatic.com/s/josefinsans/v9/C6HYlRF50SGJq1XyXj04z3NuWYKPzoeKl5tYj8yhly0.woff2) format('woff2'); 
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; 
} 
Verwandte Themen