including font face for bold not working

Question

I've added the 'circular' font family to my site shown in the first code snippet below, but it doesn't add any bold, so I tried to include the bold .ttf and .woff for the bold 'circular' font but neither of my two approaches worked, the first approach made all the text bold and the second approach didn't do anything at all!

Here is how I added 'circular' to my asp.net mvc site's site.css file and it makes all the text circular, but not the bold

@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;
}

Here I tried adding the bold but it makes everything bold

@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;
}

The last thing I tried was adding a new 'font-face' and including it in the body like this but it doesn't change any of my 'font-weight: bold' css to bold

@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*/
}

Or ask engine to generate (ugly) bold font face for us by font-synthesis:weight.

Here is an example showing how googlefonts configs font face.

@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;
}