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

User · Answer

By mid-2016 the Chromium engine  v53  supports just 3 emphasis styles    Plain text  bold  and super-bold       lt div style  font normal 400 14px Arial   gt Testing lt  div gt     lt div style  font normal 700 14px Arial   gt Testing lt  div gt     lt div style  font normal 800 14px Arial   gt Testing lt  div gt

User · Answer

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

User · Answer

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

User · Answer

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    x000D   x000D   lt html gt  x000D     lt head gt  x000D       lt link rel  stylesheet  x000D            href  https   fonts googleapis com css family Open Sans 100 400 400i 600 800  gt  x000D       lt style gt  x000D        body   x000D          font-family   Open Sans   serif  x000D          font-size  48px  x000D          x000D       lt  style gt  x000D     lt  head gt  x000D     lt body gt      x000D       lt div style  font-weight 400  gt Didn t work with all the fonts lt  div gt  x000D      lt div style  font-weight 600  gt Didn t work with all the fonts lt  div gt  x000D      lt div style  font-weight 800  gt Didn t work with all the fonts lt  div gt  x000D     lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    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

User · Answer

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

User · Answer

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 nbsp 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 nbsp 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

[css] 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

Examples related to css

Examples related to fonts