太字のフォントが含まれていない

Question

私は、以下の最初のコードスニペットに示されている私のサイトに 'circular'フォントファミリを追加しましたが、太字を追加しませんでした。私の2つのアプローチのどちらもうまくいきませんでした。最初のアプローチはすべてのテキストを太字にし、2番目のアプローチは全く何もしませんでした。私はここでここで

は、私は私のasp.net MVCのサイトのsite.cssファイルに「円形」を追加する方法であり、それはすべてのテキストが円形になりますが、ない大胆

@font-face { 
 
    font-family: 'Circular'; 
 
    src: url('../fonts/circular-book.ttf') format('truetype'); 
 
    src: url('../fonts/circular-book.woff') format('woff'); 
 
    
 
} 
 

 
body { 
 
    font-family: Circular,"Helvetica Neue",Helvetica,Arial,sans-serif; 
 
    font-size: 16px !important; 
 
    -webkit-font-smoothing: antialiased !important; 
 
    color: #484848 !important; 
 
}

太字を追加しようとしたが、それは大胆なすべてのものを作る

@font-face { 
 
    font-family: 'Circular'; 
 
    src: url('../fonts/circular-book.ttf') format('truetype'); 
 
    src: url('../fonts/circular-book.woff') format('woff'); 
 
    src: url('../fonts/circular-bold.ttf') format('truetype'); 
 
    src: url('../fonts/circular-bold.woff') format('woff'); 
 
    
 
} 
 

 
body { 
 
    font-family: Circular,"Helvetica Neue",Helvetica,Arial,sans-serif; 
 
    font-size: 16px !important; 
 
    -webkit-font-smoothing: antialiased !important; 
 
    color: #484848 !important; 
 
}

私が試した最後のものは、新しい「フォントフェース」を追加し、このような身体でそれを含むが、それは私の任意の変更されないた「フォント重量：太字」CSSを大胆

@font-face { 
 
    font-family: 'Circular'; 
 
    src: url('../fonts/circular-book.ttf') format('truetype'); 
 
    src: url('../fonts/circular-book.woff') format('woff'); 
 
    
 
} 
 

 
@font-face { 
 
    font-family: 'Circular-bold'; 
 
    src: url('../fonts/circular-bold.ttf') format('truetype'); 
 
    src: url('../fonts/circular-bold.woff') format('woff'); 
 
    
 
} 
 

 
body { 
 
    font-family: Circular, Circular-bold,"Helvetica Neue",Helvetica,Arial,sans-serif; 
 
    font-size: 16px !important; 
 
    -webkit-font-smoothing: antialiased !important; 
 
    color: #484848 !important; 
 
}

へ

Answer 1

@font-face { 
    font-family: 'Circular'; 
    src: url('../fonts/circular-book.ttf') format('truetype'); 
    src: url('../fonts/circular-book.woff') format('woff'); 
} 
@font-face { 
    font-family: 'Circular'; /*same name, yes*/ 
    font-weight: bold; /*config its weight*/ 
    src: url('../fonts/circular-bold.ttf') format('truetype'); 
    src: url('../fonts/circular-bold.woff') format('woff'); 
} 

body { 
    font-family: Circular; /*select font family normally*/ 
    font-weight: bold; /*select family's bold font face*/ 
} 

それともfont-synthesis:weightによって私たちのために（醜い）太字フォントフェイスを生成するエンジンをお願いします。

ここでは、googlefontsがフォントフェイスをどのように設定するかを示すexampleがあります。

@font-face { 
    font-family: 'Spectral SC'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Spectral SC Regular'), local('SpectralSC-Regular'), url(https://fonts.gstatic.com/s/spectralsc/v2/yJ95fCBFs0v33GTJdYTk_zUj_cnvWIuuBMVgbX098Mw.woff2) format('woff2'); 
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; 
} 

@font-face { 
    font-family: 'Spectral SC'; 
    font-style: normal; 
    font-weight: 700; 
    src: local('Spectral SC Bold'), local('SpectralSC-Bold'), url(https://fonts.gstatic.com/s/spectralsc/v2/J7mO0YbtyrIkp56FY15FDS_vZmeiCMnoWNN9rHBYaTc.woff2) format('woff2'); 
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; 
} 

Answer 2

code'll作業以下

@font-face { 
    font-family: 'Circular'; 
    src: url('../fonts/circular-bold.ttf') format('truetype'); 
    src: url('../fonts/circular-bold.woff') format('woff'); 
} 

body { 
    font-family: Circular; 
    font-weight: bold; 
}