@font-face not showing bold version of font despite it declaration

I have created a small sandbox page, and while the CSS does work, the font-face is a problem for locally-hosted Open Sans downloaded from Google Fonts.

I've hosted the fonts locally so this test page is self-contained for now.

body {
 font-family: Helvetica,Arial,sans-serif;
}
h1,
h2,
h3,
h4,
h5 {
 font-family:"Open Sans", Helvetica, Arial,sans-serif;
 font-weight:400;
 font-style:normal;
 line-height:1.4em;
 color:#333;
 margin:0 0 15px 0;
}
h1 {
 font-size:22px;
}
h2 {
 font-size:20px;
}
h3 {
 font-size:18px;
}
h4 {
 font-size:16px;
}
h5 {
 font-size:14px;
}
p {
 font-family:"Open Sans", Helvetica, Arial,sans-serif;
 font-weight:400;
 font-style:normal;
 font-size:14px;
 line-height:1.2em;
 color:#333;
 margin:0 0 15px 0
}
a {
text-decoration: none;
}
b {
font-family: Open Sans, sans-serif;
font-weight: 700;
}
#header {
  background: #01b14c;
  width: 100%;
  box-shadow: 0 0 10px 0 rgba(0,0,0,.15);
  left: 0;
  right: 0;
  padding: 6px 0;
}
.fal.fa-phone::before {
  content: "\ea39";
}
.footer {
  padding: 60px 0;
  background: #000;
  color: #FFF;
}
#cloned-hometext {
width: 470px;
}

.about-text {
font-size: 13px;
}

@font-face {
    font-family: 'Open Sans';
    src: local('Open Sans Regular'), local('OpenSans-Regular'),
    url('fonts/OpenSans-Regular.ttf'); 
    font-display: swap;   
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: 'Open Sans';
    src:
    url('fonts/OpenSans-Bold.ttf');
    font-weight: 700;
    font-display: swap;
    font-style: bold;
}

@font-face {
    font-family: 'Open Sans';
    src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'),
    url('fonts/OpenSans-ExtraBold.ttf');
    font-weight: 900;
    font-display: swap;
    font-style: bold;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Test page</title>
    <link rel="stylesheet" type="text/css" href="styles/style.css">
</head>
<body>
<header id="header">
<h1>A TEST</h1>
</header>
<div id="cloned-hometext" >
  <h1>TEST</h1>
<p>This is a test</p>
<h3>This works</h3>
<b>It's got to work</b>
</div>
<footer >
Content to come
</footer>
</body>
</html>

Despite having the OpenSans-Bold font in fonts folder of styles where style.css resides the document only shows Open Sans or a faux-bold.

These are all the fonts in the directory:

OpenSans-Bold.ttf

OpenSans-ExtraBold.ttf

OpenSans-Medium.ttf

OpenSans-Regular.ttf

OpenSans-SemiBold.ttf

However, the bold font is not showing even when I declare in HTML.

How can I resolve this in the CSS I have?

Note in the code above, that's the content of style.css ; it's not inline.

CodePudding user response：

Check your path url to your font file, if it was in the same path change url path to "url('./fonts/OpenSans-Regular.ttf')"

CodePudding user response：

add format('truetype') to your @font-face declaration. Also if it doesn't work, then move the @font-face declarations to the top of CSS.

Also if Open Sans is your default font, then apply it to the body and you don't have to specify font-family to all your elements over and over, like you're doing now.