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
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.
Safari on iOS unable to show a normal CSS font as bold
Safari won't display a font out of its available font-weights.
So if that font doesn't have bold type then it won't be bold in safari.
CSS font-weight numbers: how do they work?
The details of how numeric values are mapped to font weights are covered in the spec which states:
The values '100' to '900' form an ordered sequence, where each number
indicates a weight that is at least as dark as its predecessor. The
keyword 'normal' is synonymous with '400', and 'bold' is synonymous
with '700'. Keywords other than 'normal' and 'bold' have been shown to
be often confused with font names and a numerical scale was therefore
chosen for the 9-value list.
'599' is not a valid value for the font-weight
property
Black font is not really black
When importing fonts from Google Fonts, you can customize the options you want. Some fonts will have different options. In your case, here is a screenshot of how that "customize" page looks like:
By doing that, your import snippet will be different when you go back to the "Embed" tab. To include the 900 weight, you should import the font like this:
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,900&display=swap" rel="stylesheet">
For the second question
"Is there a way to easily select Black, Thin, Thin Italic, Semibold etc. into CSS ?"
by adding the correspondent options in the Google Fonts, you could also set your css with font-weight: bold
or font-weight: bolder
or font-weight: lighter
...
See this link for the full reference:
https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
Font-weight values not working
If you want to use a different type of font weight, it is important that your font supports this weight type.
If the font doesn't have a 500 or 600 type, it is not possible to use this font weight. The browser will automatically pick the closest value to the font that is available. In this case 600 will change in the 700 which is supported
How to add multiple font files for the same font?
The solution seems to be to add multiple @font-face
rules, for example:
@font-face {
font-family: "DejaVu Sans";
src: url("fonts/DejaVuSans.ttf");
}
@font-face {
font-family: "DejaVu Sans";
src: url("fonts/DejaVuSans-Bold.ttf");
font-weight: bold;
}
@font-face {
font-family: "DejaVu Sans";
src: url("fonts/DejaVuSans-Oblique.ttf");
font-style: italic, oblique;
}
@font-face {
font-family: "DejaVu Sans";
src: url("fonts/DejaVuSans-BoldOblique.ttf");
font-weight: bold;
font-style: italic, oblique;
}
By the way, it would seem Google Chrome doesn't know about the format("ttf")
argument, so you might want to skip that.
(This answer was correct for the CSS 2 specification. CSS3 only allows for one font-style rather than a comma-separated list.)
Related Topics
CSS Grid: Content to Use Free Space But Scroll When Bigger
Change the Icon Size of Angularjs Material Icons
Controller Specific Stylesheets in Rails 3: Inheritence
Using Grunt Grunt-Contrib-Less) for Compiling Bootstrap 3.1 Less in Visual Studio 2013
Move R Shiny Shownotification to Center of Screen
CSS Multiple Classes Property Override
CSS Transparent Border Problem in Firefox 4
How to Avoid Webkit Contenteditable Copy-Paste Resulting in Unwanted CSS
Remove All Stylings (Border, Glow) from Textarea
Is There Any Difference Between "Margin: 0 Auto;" and "Margin: Auto;"
How to Use Calc() in Tailwind CSS
Darkening an Image with CSS (In Any Shape)
Getting Inline-Block Element's Height to Fill the Parent
Using Less, CSS3 Calc() Doesn't Work Correctly