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;'?
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>
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;
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.
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.
This example specifies the light, normal, normal italic, bold, and extra-bold fonts in the font family Open Sans:
<html>_x000D_
<head>_x000D_
<link rel="stylesheet"_x000D_
href="https://fonts.googleapis.com/css?family=Open+Sans:100,400,400i,600,800">_x000D_
<style>_x000D_
body {_x000D_
font-family: 'Open Sans', serif;_x000D_
font-size: 48px;_x000D_
}_x000D_
</style>_x000D_
</head>_x000D_
<body> _x000D_
<div style="font-weight:400">Didn't work with all the fonts</div>_x000D_
<div style="font-weight:600">Didn't work with all the fonts</div>_x000D_
<div style="font-weight:800">Didn't work with all the fonts</div>_x000D_
</body>_x000D_
</html>(Quora warning, please remove if not allowed.)
https://www.quora.com/How-do-I-make-Open-Sans-extra-bold-once-imported-from-Google-Fonts
Tested working in Firefox 66.0.3 on Mac and Firefox 36.0.1 in Windows.
Other fonts must be uploaded to the server, style and weight specified by their individual names.
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.
font-family: 'Open Sans'; font-weight: 600; important to change to a different font-family
Source: Stackoverflow.com