Here is the syntax:
font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;
I am not sure how to apply, tried these variations but no luck:
font: italic bold 12px/30px Arial icon
font: italic bold 12px/30px Arial|icon
font: italic bold 12px/30px icon
It work only if I apply this way:
font: icon
Here you can find doc I referred
font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;
This above means that what you can do is set a font shorthand, but those caption |icon(etc..) are a font-family type, therefore replace it - in your example - on Arial
.p1 {
font: italic bold 12px/30px icon
}
.p2 {
font: italic bold 12px/30px Arial
}
<p class="p1">FOO BAR</p>
<p class="p2">FOO BAR</p>
Related
I have the below css code
.mybutton{
font-family : Segoe UI Semibold;
}
Semi bold applies properly in the above case
I need to change as below
.mybutton{
font-family: Segoe UI, Helvetica Neue, Arial Semibold
}
But Semi bold does not applied, how to achieve this with out using font-weight property
Here is the shorthand for font
body {
font: font-style font-variant font-weight font-size/line-height font-
family;
}
You can't set font-weight in font-family property, You can set it to font: property,
font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;
In you project,
.mybutton{
font: bold Segoe UI, Helvetica Neue, Arial Semibold;
}
For font property font-size and font-family is required, can add other property to it, if did not give font-size and font-family the default values will be inherit
If you dont want to add font-weight:bold then use bold font family
.mybutton{
font: bold 15px Segoe UI, Helvetica Neue, Arial;
}
My font stylesheets are hosted on Fonts.com and out of my control. On the stylesheet, different weights of Avenir are implemented as different font families, each with a weight of 400. If the weight is anything but the default normal (400), the font renders oddly. So how do I make my fallback fonts bold while keeping the primary font weight as normal?
I tried to accomplish this by using the font CSS shorthand, thinking I could define different weights for each comma-separated value, like so:
font: normal 400 18px 'Avenir 85 Heavy',
normal 800 18px 'Calbri',
normal 800 18px sans-serif;
But the browser doesn't recognize this structure, unfortunately, unless I eliminate all properties besides <font-family> on the fallbacks. Any suggestions, even inelegant ones?
When using #font-face, you typically want to apply a different font variant (= different font file), depending on whether your font is (1) normal, (2) italic, (3) bold or (4) italic + bold.
If you use the same font-family name for each variant along with their corresponding font-style and font-weight in your #font-face definitions, the correct font file will automatically be chosen depending on the font-style and font-weight of your elements.
Do this for all fonts defined with #font-face, and behavior should be as expected.
Demo
#font-face {
font-family : 'Droid Serif';
font-style : normal;
font-weight : 400;
src: local('Droid Serif'),
local('DroidSerif'),
url(https://fonts.gstatic.com/s/droidserif/v6/0AKsP294HTD-nvJgucYTaI4P5ICox8Kq3LLUNMylGO4.woff2)
format('woff2');
}
#font-face {
font-family : 'Droid Serif';
font-style : normal;
font-weight : 700;
src : local('Droid Serif Bold'),
local('DroidSerif-Bold'),
url(https://fonts.gstatic.com/s/droidserif/v6/QQt14e8dY39u-eYBZmppwYlIZu-HDpmDIZMigmsroc4.woff2)
format('woff2');
}
#font-face {
font-family : 'Droid Serif';
font-style : italic;
font-weight : 400;
src : local('Droid Serif Italic'),
local('DroidSerif-Italic'),
url(https://fonts.gstatic.com/s/droidserif/v6/cj2hUnSRBhwmSPr9kS5898u2Q0OS-KeTAWjgkS85mDg.woff2)
format('woff2');
}
#font-face {
font-family : 'Droid Serif';
font-style : italic;
font-weight : 700;
src : local('Droid Serif Bold Italic'),
local('DroidSerif-BoldItalic'),
url(https://fonts.gstatic.com/s/droidserif/v6/c92rD_x0V1LslSFt3-QEpo9ObOXPY1wUIXqKtDjSdsY.woff2)
format('woff2');
}
body {
font-family : "Droid Serif", Georgia, serif;
}
.bold, .both {
font-weight : 700;
}
.italics, .both {
font-style : italic;
}
<h1>Title</h1>
<p>This is a paragraph with <b>some bold text</b>, <em>some text in italics </em> and <em><b>some text that is both bold and in italics</b></em>!</p>
<p>Depending on whether your text is <span class="bold">bold</span >, <span class="italics">in italics</span > or <span class="both">both</span >, a different font will be used for the same font family!</p>
In our project we use Fira Sans Bold for thickening text segments. As a fallback we would like to use Lucida Sans Unicode with font-weight set to bold.
However, we run into a problem that we need to pre-set font-weight property for Lucida Sans Unicode.
What are possible ways to do this?
We tried #font-face.
#font-face {
font-family: 'Lucida Bold';
font-weight: bold;
src: local('Lucida Sans Unicode');
}
However, the problem is, while using Fira Sans Bold we rely only on the font-family and do not use any other other ways of thickening the font, such as font-weight:bold, strong, b, etc. This is insufficient for the #font-face (I raised the question over here: What can be the reason for #font-face failing to work?)
Would be grateful for any ideas.
I think a simple
.supposedly-bolded-text {
font-family: 'Fira Sans Bold', 'Lucida Bold';
font-weight: bold;
}
would do the trick for you.
Declaring font-weight/ font-style etc only affects which text 'matches' a #font-face rule.
As a font face is either bold or it isn't, declaring font-weight:bold won't force it to become bold. It'll just make it show up whenever your text is supposed to be bold.
Presumably the text that uses Fira Sans Bold is bold when font-weight of your text is normal. That means you'll want the bold face of Lucida to match whenever font-weight is normal, like this:
#font-face {
font-family: 'MyLucidaFont';
font-weight: normal;
src: local('Lucida Sans Unicode Bold');
}
"Whenever my text is font-weight:normal and uses font-family:"MyLucidaFont" then this font-face is applied"
Then:
font-family:"Fira Sans Bold","MyLucidaFont"
This is assuming that you can't change your Fira Sans Bold definition. If you can, then it'd be better to change that instead to make sure it applies whenever your texts text-weight is bold:
/* We don't need to declare Lucida at all if we change this one */
#font-face {
font-family: 'Fira Sans';
font-weight: bold; /* That's more like it! */
src: url('/FiraSansBold.woff');
}
Whenever your text has font-weight:bold and font-family:"Fira Sans","Lucida Sans Unicode" it'll be bolded with a fallback.
Keep in mind that "Lucida Sans Unicode" is a font family; a group of font faces.
So I'm looking at this Google font called Roboto
https://fonts.google.com/specimen/Roboto?selection.family=Roboto
It comes in different styles such as light, regular, medium, etc.
The site says to import you can do
#import url('https://fonts.googleapis.com/css?family=Roboto');
and then in your style sheet you can do:
font-family: 'Roboto', sans-serif;
Well, thats fine, but I need a mixture of them. Such as light, and regular, not just one.
So I can do
#import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');
and this selects them all.
But it still says in the style sheet you can do:
font-family: 'Roboto', sans-serif
If you do that, then it just sticks to the first one. I need one style to be 300, one to 400, one to be 500. So how do I specify which one in the css?
I've tried doing
font-family: 'Roboto:300', sans-serif
and
font-family: 'Roboto 300', sans-serif
and
font-family: 'Roboto-300', sans-serif
but none of them worked. Can anyone help?
Use the font-weight property
http://www.w3schools.com/cssref/pr_font_weight.asp
Example:
p.normal {
font-weight: normal;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 900;
}
What i recommend is have a class that defines the font to be used
i.e after importing the google font, in your css add:
#import url('https://fonts.googleapis.com/css?family=Roboto:300,400,600');
.robotoriser{
font-family: 'Roboto', sans-serif;
font-weight: Normal; /* This is just so when ever you call use this class, it uses the normal font weight by default */
}
.rbt-300{ /* you can also name this rbt-light or whatever you like*/
font-weight:300;
}
.rbt-400{
font-weight:400;
}
.rbt-600{
font-weight:600;
}
... and so on.
Then use in html like this
<p class="robotoriser rbt-300" >This is light text</p>
<p class="robotoriser rbt-400" >This is medium text</p>
<p class="robotoriser rbt-600" >This is heavy text</p>
Here is a fiddle to a working demo
Note you can also use it in any class you have
e.g
.some_element{
font-family: 'Roboto', sans-serif;
font-weight: 300; /* Or any of the font weight values you included via the Google font url */
}
<p class="some_element"> Dragons are goats that can fly :D </p>
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.