@font-face - Using multiple files for one font

Question

It seems this question has been asked numerous time already (such as here). But my issue does not seem to be resolved with the answers provided.

I am attempting to use multiple files for a single font. Each file is for a different style - italics, bold. I have attempted the following:

@font-face {
    font-family: matrix;
    src: url('../fonts/chris-simpkins_hack/Hack-Regular.ttf');
}
@font-face {
    font-family: matrix;
    font-weight: bold;
    src: url('../fonts/chris-simpkins_hack/Hack-Bold.ttf');
}

My HTML contains the following:

<h1>Some Text</h1>
<p><b>Some more text that is bold!</b></p>

Unexpectedly, all the text outputted on the page is using the "...bold.tff" file. Why is this?

I have been able to achieve this easily and quickly in the past and am unsure as to what is different this time.

Is the style of h1 bold? If so, both h1 and your bold p will use bold. — Chris Cousins, Aug 27 '18 at 03:29
By browser default, h1 use bold text. https://www.w3schools.com/cssref/css_default_values.asp — NoobTW, Aug 27 '18 at 03:31
Chris Cousins No. However, interestingly, if I add `font-weight: normal;` to my h1's css. It will resolve the issue. I can not see why all text is bold by default - I checked under my * selector. — Flame Stinger, Aug 27 '18 at 03:32

score 1 · Accepted Answer · answered Aug 27 '18 at 03:36

By browser default, h1 use bold text. See W3School for details.

Simply add h1{ font-weight: normal;} to reset this.

If you don't like the default css by browser, you can use some reset.css or normalize.css.

But, normalize.css treat h1 as bold text, too.

Dr Manish Lataa-Manohar Joshi · Answer 2 · 2018-08-27T03:38:25.270

0

create different classes with font face and assign those classes to expected tags

@font-face {
    font-family: matrix;
    src: url('../fonts/chris-simpkins_hack/Hack-Regular.ttf');
}


.myh1 {
  font-family : matrix;
  font-weight : 400;
}
.myp {
  font-family: matrix;
  font-weight:700;
}

example

<h1 class='myh1'>Some Text</h1>
<p class='myp' >Some more text that is bold!</p>

edited Aug 27 '18 at 03:38

answered Aug 27 '18 at 03:32

Dr Manish Lataa-Manohar Joshi

2,380
5
17
38

score 0 · Answer 3 · answered Aug 27 '18 at 03:45

0

Maybe you must use <em></em> tags for styling because is deprecated in HTML4 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b

Or you try change font-weight: bold; to font-weight: 700; and add this style

b { font-weight: 700; }

answered Aug 27 '18 at 03:45

Mehmet Ali Peker

701
1
6
19

score 0 · Answer 4 · answered Aug 27 '18 at 05:57

try this:

@font-face { font-family: 'BrushScriptStdMedium';
src: url('brushscriptstd.eot');
src: local('Brush Script Std'), local('BrushScriptStd'), url('brushscriptstd.woff') 
format('woff'), url('brushscriptstd.ttf') format('truetype');}
.classname{ font:21px bold italic Arial;}

@font-face - Using multiple files for one font

4 Answers4