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.
Related
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.
This is my first time using font-face, and it's really hard for me to actually render the exact font, especially when it comes to *.ttc files.
Here is what I've done so far:
#font-face {
font-family: 'FontName';
src: url('../fonts/font.ttc') format('truetype');
font-weight: normal;
}
.header {
font-family: 'FontName;
}
When I check the network tab in Chrome's inpector, I can see that the font is loaded successfully, but the result text still uses another font.
What did I do wrong? Please help me to fix this problem. Thanks a lot in advance.
Update
One more thing that I figured out. When I style inline, the font is rendered correctly.
<p style="font-family:'FontName'">test 2</p>
Is there any delay in loading or something like that?
You can't use font collections for CSS #font-face declarations as the purpose of this syntax is to, unambiguously, specify which single font resource must be used by the browser when you specify some specific combination of font-{family, weight, style, etc} in your actual page CSS.
Specifying a font collection makes this impossible: there is no syntax to specify which font inside that collection you would need, so ttc are not supported by design. Extract the individual font assets you need (if legally allowed!) and then be explicit about which single font you need for which single #font-face declaration.
And remember that this is possible:
#font-face {
font-family: myfont;
font-weight: normal;
src: url('that-font-I-like-Regular.woff') format('WOFF');
}
#font-face {
font-family: myfont;
font-weight: bold;
src: url('that-font-I-like-Regular.woff') format('WOFF');
}
...
:root {
font-family: myfont;
}
h1 {
font-weight: normal; /* will use that-font-I-like-Regular.woff */
...
}
p {
font-weight: bold; /* will _also_ use that-font-I-like-Regular.woff */
...
}
I have a collection of fonts. Let's say font-a-normal, font-a-italic, font-a-bold and so on with b, c...
If in some css file I have:
font-family: 'font-a-bold';
In another file, I could have
font-weight: bold;
The result actually is double bold font, that is two times thicker than what I need on some html pages. Because project specifications changed a lot over time and because I have a big number of static pages that I would have to change manually if I would want only to remove font-weight I'm searching for another solution.
Is there a rule or some way to specify that 'font-a-bold' shouldn't become thicker. And if I have
font-family: 'font-a-normal';
font-weight: bold
it should actually become:
font-family:'font-a-bold'
Is there a pure css solution?
Update
Or a fast and possibly clean way of removing double bold.
If you are pulling in all the fonts with #font-face declarations, you probably could do something like this:
#font-face {
font-family: 'MyFont-Bold';
font-weight: normal;
font-style: normal;
src: ...
}
#font-face {
font-family: 'MyFont-Bold';
font-weight: bold;
font-style: normal;
src: ... // same as above: always the same bold
}
#font-face {
font-family: 'MyFont';
font-weight: normal;
font-style: normal;
src: ... // regular weight new style
}
#font-face {
font-family: 'MyFont';
font-weight: normal;
font-style: normal;
src: ... // boldweight new style
}
I would think the browser doesn't care if what you tell it is a bold weight is not actually any bolder than the regular.
Fiddle
You can't tell CSS to not apply a certain style if another style is being applied, So...
I would simply do this by using the 'lots of classes' approach to CSS.
Make classes:
.bold {
font-family: 'font-a-bold';
}
.italic {
font-family: 'font-a-italic';
}
and so on. Then just apply these classes to the text you want to have said font-family. Just don't apply a <strong> tag to a piece of text that is already using the .bold class for example.
I am using a tool to generate automatic CSS, and it generates the following #font-face tag and the corresponding paragraph Style
#font-face {
font-family:FF-Garamond-Italic;
src:url("../fonts/16309_GARAIT (1).ttf");
font-style:italic;
}
p.autoParaStyle3 {
font-family:FF-Garamond-Italic;
font-size:32px;
line-height:40px;
color:#000;
text-align:justify;
}
Notice, that the font specified is already the italic version of the Garamond Font, and technically the line font-style:italic is redundant.
However, as is, this does not work (I tried in FF, Chrome & Safari), and ends up using the default system font instead. If I manually remove the font-style:italic line, then the text is correctly rendered in the Garamond Italic font as expected.
So, I have 2 questions
Why does this not work, meaning why does having a font-style:italic cause it not to work?
Is there a way to "override" the #font-face definition to use font-style:normal via javascript?
The reason I am asking is that I don't control the tool that is generating the CSS above, so cannot touch that file.
Also, I attempted to create a new #font-face in javascript with the same name, but I don't want to specify the "src" again in the index.html, as this file and the css file are further manipulated into different locations - so I want the "src" to be relative to the css file only, and be picked from there.
Thanks in advance!
The setting font-style:italic is not redundant. It specifies that the typeface is italic, and this means that it will be considered a match when an element’s typeface has been set to italic, as it is by default e.g. for i and cite elements.
Thus, the answer to question 1 is that the p element has regular (normal) typeface declared for it, by default, so a regular typeface (here, the default font of the browser) will be used instead.
To solve this, add font-style: italic into the rules for p.autoParaStyle3.
The answer to question 2 is that this depends on the place of the #font-face rule in the DOM. For example, if it is in a style element, you can modify that element’s content with JavaScript. However, you shouldn’t need to ask this question.
(Having an entire paragraph displayed in italic is typographically questionable. You might be solving the wrong problem.)
For those using Create React App, font-face may give different results depending on entry point. This is what I've noticed:
If you choose to link the css file directly to your public/index.html then you can use font-face normally with one font-family and different font-style:
#font-face {
font-family: "FontName"; <---
font-style: normal; <---
font-weight: normal;
src: url("path-to-assets/fonts/FontName.ttf") format("truetype");
}
#font-face {
font-family: "FontName"; <---
font-style: italic; <---
font-weight: normal;
src: url("path-to-assets/fonts/FontName-Italic.ttf") format("truetype");
}
/* Usage */
.text {
font-family: FontName;
font-style: normal;
}
.text-italic {
font-family: FontName;
font-style: italic;
}
If you choose to link the css file via Js for bundling, then you need to have a different font-family for all your italic fonts and use normal font-style.
#font-face {
font-family: "FontName"; <---
font-style: normal; <---
font-weight: normal; /* normal | 300 | 400 | 600 | bold | etc */
src: url("path-to-assets/fonts/FontName.ttf") format("truetype");
}
#font-face {
font-family: "FontNameItalic";
font-style: normal; <----
font-weight: normal; /* normal | 300 | 400 | 600 | bold | etc */
src: url("path-to-assets/fonts/FontName-Italic.ttf") format("truetype");
}
/* Usage */
.text {
font-family: FontName;
}
.text-italic {
font-family: FontNameItalic;
}
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.