How do I set 'semi-bold' font via CSS? Font-weight of 600 doesn't make it look like the semi-bold I see in my Photoshop file

Question

I'm doing a Photoshop-to-XHTML conversion, and the website designer used the Myriad Pro Semi-bold font which looks good in the photoshop file, but when I try the semi-bold option in CSS, it looks pretty much like a normal bold font, which is too bold for my purpose. Is there a way to achieve a nicer looking semi-bold font in HTML and CSS or am I just stuck with 'font-weight: 600;'?

Can you post a jsfiddle of your code so we can reproduce your error? — Alan Weibel, Jan 05 '12 at 00:18
[Check this answer below](https://stackoverflow.com/a/23478331/11667949) — Shivam Jha, Dec 08 '20 at 12:39

Jesús Carrera · Answer 1 · 2014-07-11T14:38:17.317

86

In CSS, for the font-weight property, the value: normal defaults to the numeric value 400, and bold to 700.

If you want to specify other weights, you need to give the number value. That number value needs to be supported for the font family that you are using.

For example you would define semi-bold like this:

font-weight: 600;

Here an JSFiddle using 'Open Sans' font family, loaded with the above weights.

edited Jul 11 '14 at 14:38

answered May 05 '14 at 17:35

Jesús Carrera

11,275
4
63
55

This answer with the answer in this [link](http://stackoverflow.com/questions/2436749/how-to-define-bold-italic-using-font-face) is better than defining new name for semibold – besabestin Jun 15 '14 at 11:20
font-family: 'Open Sans'; font-weight: 600; important to add the font-family – MartianMartian Aug 31 '16 at 02:45
This is a better option when you inherit family but want to change the weight. – Paw Baltzersen Nov 15 '17 at 08:20

score 46 · Accepted Answer · edited Aug 23 '15 at 19:33

46

The practical way is setting font-family to a value that is the specific name of the semibold version, such as

font-family: "Myriad pro Semibold"

if that’s the name. (Personally I use my own font listing tool, which runs on Internet Explorer only to see the fonts in my system by names as usable in CSS.)

In this approach, font-weight is not needed (and probably better not set).

Web browsers have been poor at implementing font weights by the book: they largely cannot find the specific weight version, except bold. The workaround is to include the information in the font family name, even though this is not how things are supposed to work.

Testing with Segoe UI, which often exists in different font weight versions on Windows systems, I was able to make Internet Explorer 9 select the proper version when using the logical approach (of using the font family name Segoe UI and different font-weight values), but it failed on Firefox 9 and Chrome 16 (only normal and bold work). On all of these browsers, for example, setting font-family: Segoe UI Light works OK.

edited Aug 23 '15 at 19:33

Peter Mortensen

30,738
21
105
131

answered Jan 05 '12 at 00:22

Jukka K. Korpela

195,524
37
270
390

1

@Django Reinhardt, did you check that the name you use refers to a font that you actually have in your system, under that name? – Jukka K. Korpela May 11 '12 at 12:08
1

Yep. It's visible in Photoshop as Chaparral Pro - with the weight set to Semibold, but "Chaparral Pro Semibold" reverts to Times. "Chaparral Pro" works, just as the wrong weight. Thanks for any help. – Chuck Le Butt May 11 '12 at 12:19
2

If you’re using Windows, use http://www.cs.tut.fi/~jkorpela/listfonts1.html on IE to check out the list of fonts in your system with the names recognized by browsers. – Jukka K. Korpela May 11 '12 at 12:23
Unfortunately I'm on Mac, so that's not an option. Damn. – Chuck Le Butt May 11 '12 at 12:55
1

Seems like this technique works in Chrome, but not Firefox (on a mac). If you are on a mac, you can get the css-name of a font by opening fontbook, finding your font, and right-click -> validate font. It will then display the proper otf name of the font. – c.apolzon Oct 24 '12 at 17:37
font-family: 'Open Sans'; font-weight: 600; important to add the font-family – MartianMartian Aug 31 '16 at 02:45
This doesn't work. I have added the correct answer. It's also incorrect to rely on whether a local font is installed on a certain device or not. You *must* use Google Fonts or separate fonts uploaded to the server, for the user to see what you designed. – Henrik Erlandsson Apr 24 '19 at 14:15

score 45 · Answer 3 · edited Aug 23 '15 at 19:34

45

For me the following works good. Just add it. You can edit it as per your requirement. This is just a nice trick I use.

text-shadow : 0 0 0 #your-font-color;

edited Aug 23 '15 at 19:34

Peter Mortensen

30,738
21
105
131

answered Dec 14 '13 at 01:47

Raj

491
4
2

This is usefull is some situations. Not sure why people downvote you like that. – SinisterGlitch Jun 02 '14 at 14:01
Yes true, this is very useful hack, may be it's not correct solution, however it gave me the exact solution I was searching for.. Thanks Raj.. – harishkumar329 Apr 17 '15 at 05:42
Thanks for this, very useful! – NiKo Jan 19 '18 at 08:20
2

Looks blurry on my system. – cdauth Mar 25 '19 at 15:25

score 2 · Answer 4 · answered Aug 31 '16 at 02:45

2

font-family: 'Open Sans'; font-weight: 600; important to change to a different font-family

answered Aug 31 '16 at 02:45

MartianMartian

1,753
1
18
26

score 1 · Answer 5 · answered Sep 23 '16 at 12:30

By mid-2016 the Chromium engine (v53) supports just 3 emphasis styles:

Plain text, bold, and super-bold...

 <div style="font:normal 400 14px Arial;">Testing</div>

 <div style="font:normal 700 14px Arial;">Testing</div>

 <div style="font:normal 800 14px Arial;">Testing</div>

score 1 · Answer 6 · edited Sep 02 '19 at 06:10

Select fonts by specifying the weights you need on load

Font-families consist of several distinct fonts

For example, extra-bold will make the font look quite different in say, Photoshop, because you're selecting a different font. The same applies to italic font, which can look very different indeed. Setting font-weight:800 or font-style:italic may result in just a best effort of the web browser to fatten or slant the normal font in the family.

Even though you're loading a font-family, you must specify the weights and styles you need for some web browsers to let you select a different font in the family with font-weight and font-style.

Example

This example specifies the light, normal, normal italic, bold, and extra-bold fonts in the font family Open Sans:

<html>
  <head>
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Open+Sans:100,400,400i,600,800">
    <style>
      body {
        font-family: 'Open Sans', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>    
    <div style="font-weight:400">Didn't work with all the fonts</div>
   <div style="font-weight:600">Didn't work with all the fonts</div>
   <div style="font-weight:800">Didn't work with all the fonts</div>
  </body>
</html>

Reference

(Quora warning, please remove if not allowed.)

https://www.quora.com/How-do-I-make-Open-Sans-extra-bold-once-imported-from-Google-Fonts

Testing

Tested working in Firefox 66.0.3 on Mac and Firefox 36.0.1 in Windows.

Non-Google fonts

Other fonts must be uploaded to the server, style and weight specified by their individual names.

System fonts

Assume nothing, font-wise, about what device is visiting your website or what fonts are installed on its OS.

(You may use the fall-backs of serif and sans-serif, but you will get the font mapped to these by the individual web browser version used, within the fonts available in the OS version it's running under, and not what you designed.)

Testing should be done with the font temporarily uninstalled from your system, to be sure that your design is in effect.

Have to say I didn't expect a downvote in seconds for the only answer that works. You can test this yourself, by adding/removing the `:100,400,400i,600,800` part. — Henrik Erlandsson, Apr 24 '19 at 13:53
I completed your example to allow readers see it working. I hope that helps reversing the downvote in a useful answer. — Leopoldo Sanczyk, Sep 01 '19 at 23:40