Menu
I've came across a problem with custom font i use for my website.
So i use following CSS for text.
font-family: "Open Sans",Helvetica,Arial;
font-weight:600;
As website is built in my native language, i have to use UTF-8 symbols, that doesn't seems to be included in Open Sans, so they are being shown in Helvetica instead, but the problem is that they have more weight.
Is there any possible solutions to set font-weight parameter to normal, if fallback font is being used?
498
If the fallback font loads, then all bolds and italics will be lost — because we had set all weights and styles to normal — thus making it harder for readers to see the structure of your website’s content and making it harder for them to skim the text.
Another way to set weights and styles is to use the same font-family name multiple times, setting the weights and styles in each @font-face declaration to match the weight and style of the Web font file being accessed. This approach is called style linking.
Therefore, it is very important to always use fallback fonts. This means that you should add a list of similar "backup fonts" in the font-family property. If the first font does not work, the browser will try the next one, and the next one, and so on.
The font-weight is a property in CSS that allows you to set the font’s weight. Here, the weight means the thickness or the boldness of the text characters. On many web pages, you would have observed that the headings are very bold, the sub-headings are bold but not like the main headings, and the body is written in a smaller size.
You could define a new @font-face for each font you want.
@font-face {
font-family: 'mainFont';
src: url(/*Link to Open Sans*/);
font-weight: 600;
}
@font-face {
font-family: 'secondaryFont';
src: local('Helvetica');
font-weight: 400;
}
@font-face {
font-family: 'tertiaryFont';
src: local('Arial');
font-weight: 600;
}
Then you'll end up with font-family: 'mainFont', 'secondaryFont', 'tertiaryFont'; which should get the desired results.
106
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
