How do browsers generate bold fonts when only regular is specified?

user_5958455 0
Viewed 415

I am using the font Baloo 2 on some website. I loaded only the "regular" (i.e. 400) weight variant of the font, but on both Chrome and Firefox, it looks slightly different when font-weight: bold (or 700) is used.

Arguably, the Chrome version of the "bold" font looks better, but it's interesting that "Chrome bold" is somewhere between 500 and 600 while "Firefox bold" is only slightly bolder than 400.

I'm curious about where these "bold" variants come from, and how I could get a consistent look across browsers.

Please check the following example:

@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 400;
  src: url(https://gstatic.loli.net/s/baloo2/v1/wXKrE3kTposypRyd51jcAA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

b {
  /* Not important, just to be absolutely sure */
  font-weight: bold !important;
}

.example {
  font-family: 'Baloo 2';
  font-style: normal;
}
<div class="example">
  <p>The quick brown fox jumps over the lazy dog.</p>
  <p><b>The quick brown fox jumps over the lazy dog.</b></p>
</div>

webfonts firefox google-chrome fonts css
1 Answers

See this article but basically, you need 2 things. Set the h tags to all use the specific font-weight, hack the font weight to -100 of that.

You can use a class to make it bold if you want

@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 400;
  src: url(https://gstatic.loli.net/s/baloo2/v1/wXKrE3kTposypRyd51jcAA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

b { // insure adding bold won't jack you up!
  font-family: 'Baloo 2';
  font-weight: 200 !important;
}

.bold {
  font-family: 'Baloo 2';
  font-weight: 700 !important;
}

h1, h2, h3, h4, h5 {
   font-family: 'Baloo 2';
   font-weight: 400; /* Be specific */
}

.example {
  font-family: 'Baloo 2';
  font-style: normal;
}
<div class="example">
  <p>The quick brown fox jumps over the lazy dog.  <- P tag</p>
  <p><b>The quick brown fox jumps over the lazy dog.<- Bold</b></p>
  <h4>The quick brown fox jumps over the lazy dog. <- H4</h4>
  <h4><b>The quick brown fox jumps over the lazy dog. <- H4 Bold</b></h4>
</div>
 <p class="bold">The quick brown fox jumps over the lazy dog.  <- Class bold</p>

user_36254330
Related