I grabbed some CSS from a website and while I have a pretty good understanding of basic CSS I don't understand all of the styles/properties here:
font: normal normal bold 36px/54px brandon-grotesque-n7, brandon-grotesque, sans-serif;
Some additional context - this is CSS for a logo, which you can see in this JS Fiddle.
Specifically I am curious about:
Why does it say "normal normal bold"?
Why is there a slash on the font-size?
Why are there three font types listed?
What you are seeing is a shorthand font declaration. It is essentially the same as writing the following:
font-family: brandon-grotesque-n7, brandon-grotesque, sans-serif;
font-size: 36px;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 54px;
Why does it say "normal normal bold"?
This is font-style, followed by font-variant, followed by font-weight. Another example would be something like italic small-caps bold.
Why is there a slash on the font-size?
This is font-size followed by line-height. In your example, the font-size is 36px and the line-height is 54px.
Why are there three font types listed?
This is called a font stack. The browser will attempt to use those fonts in the order that they are written. If brandon-grotesque-n7 is unavailable on the user's system, the browser will fall back to using brandon-grotesque. If that is unavailable, it will use the system's default sans-serif font.
A helpful cheat sheet for font shorthand:
Cheat sheet source: http://www.impressivewebs.com/css-font-shorthand-property-cheat-sheet/
Just so this question has an answer not in comments. From CSS-Tricks.com:
CSS
font: font-style font-variant font-weight font-size/line-height font-family;
USE
font: italic small-caps normal 13px/150% Arial, Helvetica, sans-serif;
Related
I really don't get it. I have the next css:
#font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');
}
h1{
font-family:Poppins;
}
And the next html:
<h1>
Hello world!
</h1>
Why isn't the h1 font weight set as 400 ?
To make the h1 to have font-weight:400, I need to set it in the h1 element, as this:
h1{
font-family:Poppins;
font-weight:400;
}
Else, the font-weight will be bold.
Demo without font-weight:400 for h1 https://jsfiddle.net/7kbnr6gz/
Demo with font-weight:400 for h1 https://jsfiddle.net/keg4w5nh/
So, the question is:
Why should I set the font-weight in the #font-face, since is not taked in consideration ?
The default font-weight for h1 is bold, so unless you set a different font-weight explicitly, that’s what the style will have. You declared a font in the #font-face rule with weight 400, but that just provides a characterization for the font resource; it doesn’t override the style. It appears the font file you’re accessing really is a regular weight, so what is probably happening is that the browser is applying bold stimulation, since the style specifies bold.
I'm hosting my own fonts, but I've also created a fiddle linking to Google fonts and the problem remains.
All browsers change the weight of the font in the H tags.
I find this a bit disconcerting particularly when in my case I'm specifying the font file that should be used.
If for example I set, both <h3> and <p>, with font-family: 'robotoregular'; and use the same exact font-size in both cases, I would expect the same exact result in both of them. Instead, what the browsers produce is a bold version of the font in the <h3>, and the only way to set it right is to specify the font-weight, which shouldn't be necessary if I'm already indicating a specific font file.
Is this behavior to be expected, and why does this happen?
Here's a Fiddle
#font-face {
font-family: 'robotoregular';
src: local('robotoregular'), url('../fonts/roboto-regular-webfont.woff2') format('woff2'),
local('robotoregular'), url('../fonts/roboto-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
p {
font-family: 'robotoregular';
font-size: 27px;
}
h3 {
font-family: 'robotoregular';
font-size: 27px;
font-weight: normal; /*IF NOT INCLUDED, THE BROWSER WILL MAKE IT BOLD*/
}
Browsers apply a wide variety of defaults. Headers get font-weight: bold, among other things (like margins).
If you want complete, total control, consider a reset stylesheet.
For google fonts the font-family and font-weight are variables. The short syntax should be
font: 400 "Open Sans", Helvetica, Arial, sans-serif;
But I get invalid property value,
Is there a way to declare just font-weight and font family in the short version? I want everything else to stay as it is (font style etc)
I believe the font-size must be specified when using font shorthand.font: 400 12px "Open Sans, Helvetica, Arial, sans-serif;
See http://www.impressivewebs.com/css-font-shorthand-property-cheat-sheet/ and http://www.w3.org/wiki/CSS/Properties/font
You'll need to use the good old font-weight and font-family instead of the shorthand.
I'm using webfonts on a site. For certain headings (h1, h2, etc.) I'm using bold variants (and setting font-weight to normal) because they look much better than using the regular variant and leaving the h-tags with the default bold weight. It's necessary to specify font-weight: normal because otherwise "the bold is bolded", which looks really terrible.
The problem I'm having is, how do I specify standard web fonts as fallback fonts and have the bold setting "restored"?
So for example I might do something like:
#font-face {
font-family: "My bold webfont";
src: url("url/of/webfont/bold/variant");
}
h1 {
font-family: "My bold webfont", Arial, sans-serif;
font-weight: normal;
}
As long as the webfont is present we have no problem, but if the webfont fails we end up with non-bold Arial.
Is there a way to specify "Arial Bold" in the font-family of the h1 (I know that doesn't work, but it's the desired goal)? Or perhaps in the #font-face definition I can say "this applies only to the bold version of whatever it's assigned to" – so I can omit the font-weight: normal from the h1 style?
Try specifying font-weight: bold in both places:
#font-face {
font-family: "My bold webfont";
src: url("url/of/webfont/bold/variant");
font-weight: bold;
}
h1 {
font-family: "My bold webfont", Arial, sans-serif;
font-weight: bold;
}
Here's a demo. p#one shows this technique in use; if you look at it in a browser that doesn't support WOFF webfonts, you'll see the default font in bold.
http://www.i3physics.com/blog/2010/07/dsfsdf/
Here is an example.
The part where it said "PHP" (the right top corner) remained as slim as it was.
here is part of the css code
.wp_syntax_lang {
background-color:#3c3c3c;
position:absolute;
right:0;
padding:1px 10px 3px;
color:#ddd; font-size:9px; font-weight:800;
text-transform:uppercase;
-moz-border-radius-bottomleft:5px;
-webkit-border-bottom-left-radius:5px;
border-radius-bottomleft:5px;
}
I tried bold, bolder, 700, 800, 900 and is not working under FF.
font-weight can fail to work if the font you are using does not have those weights in existence – you will often hit this when embedding custom fonts. In those cases the browser will likely round the number to the closest weight that it does have available.
For example, if I embed the following font...
#font-face {
font-family: "Nexa";
src: url("Nexa-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
}
Then I will not be able to use anything other than a weight of 400. All other weights will revert to 400.
If you want additional weights, you need to specify them in separate #font-face declarations with those additional weights, like this.
#font-face {
font-family: "Nexa";
src: url("Nexa-Light.ttf") format("truetype");
font-weight: 300;
font-style: normal;
}
#font-face {
font-family: "Nexa";
src: url("Nexa-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
}
#font-face {
font-family: "Nexa";
src: url("Nexa-Bold.ttf") format("truetype");
font-weight: 700;
font-style: normal;
}
Usually each weight will have a separate font file the browser will need to download, unless you're using variable width fonts.
Its because the font size (9px) is too small to display bold. Try 11px or more and it works fine.
Most browsers don't fully support the numerical values for font-weight. Here's a good article about the problem, and even tough it's a little old, it does seem to be correct.
If you need something bolder then you might want to try using a different font that's bolder than your existing one. Naturally, you could probably adjust the font size for a similar effect.
If you're importing a Google font, you need to ensure you've specified all the weights that you would like to use.
In my case, I was using Google's Roboto font. I had to import it with several different weights, like this:
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto+Slab|Roboto:300,400,500,700" rel="stylesheet" />
Remember that each additional weight increases the amount of data each visitor needs to download, and can slow down the loading of your page, so only use what's necessary.
i was also facing the same issue, I resolved it by after selecting the Google's font that i was using, then I clicked on (Family-Selected) minimized tab and then clicked on "CUSTOMIZE" button.
Then I selected the font weights that I want and then embedded the updated link in my html..
For me the bold work when I change the font style from font-family: 'Open Sans', sans-serif; to Arial
I removed the text-transform: uppercase; and then set it to bold/bolder, and this seemed to work.