I'm trying to get something like this to work:
body {
font-family: Verdana, Arial, sans-serif;
}
p {
font-family: Helvetica, inherit;
}
Basically if "Helvetica" is not available on the client's browser, I want the font-family to be inherited from a parent. But it seems to me that I can't use "inherit" in a font priority list.
How can I achieve something like this without having to copy paste font-family from body?
You are correct. You can use it just like you did. This is something that became available with CSS2. This question is similar and has some answers worthy of a read.
I think the real problem is that Helvetica isn't a free font. So, it just isn't available for widespread use.
Option 1) If you own the Helvetica font, make an image using that font
(for the few lines that you want that specific look for).
Option 2) (as #bjupreti suggested) is to use a substitute font that is widely
available.
Font family will automatically be inherited from the parent property. So, all you have to do is:
body {
font-family: Verdana, Arial, sans-serif;
}
p {
font-family: Helvetica;
}
This will automatically inherit the font family of body if there is no Helvetica in end users computer.
Related
I have created a question mark button using the Arial font.
The CSS looks like this:
.question {
font: bold 24px Arial;
}
It appears correctly on almost all browsers, as this screenshot shows.
However, newer versions of Android use the Roboto font face instead of Arial. The question mark is now off-center and the wrong width.
My question: is it possible to force the browser to use Arial?
You cannot force a device/computer which doesn't have Arial installed to use it. You would have to rely on webfonts to use Arial everywhere.
Also, your syntax is wrong, you should be using the shorthand property font, and not font-family (which is only used to specify the font face and potential fallbacks), like so:
.question {
font: bold 24px Arial, sans-serif;
}
Is it possible to add a fallback font directly to the definition of the font-face?
Example:
#font-face {
font-family: 'MyWebFont', Arial, Helvetica, sans-serif;
src: url('fonts/MyWebFont.eot');
src: url('fonts/MyWebFont.eot?#iefix') format('embedded-opentype'),
url('fonts/MyWebFont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
And then using it as font-family value with automatic fallback, like so:
p {
font-family: MyWebFont;
}
My goal is not to having to define the fallback fonts everywhere I define a new font-family. If not like above, can I somehow achieve this without JavaScript? Thanks for your help!
No, you cannot specify any fallback fonts inside a #font-face rule, because such a rule defines a font face and assigns a name to it. Inside the rule, the font-family part can contain only one name, the name you choose to assign. It would be pointless list several names there, since only the first one can possibly matter (and, besides, in this context no name has any predefined meaning, e.g. Arial would not mean the Arial font but be just an arbitrary assigned name).
Fallback fonts can be specified only in normal font-family rules.
Consider organizing your style sheet so that the relevant font-family list appears only once, using a suitable list of selectors, like
p, blockquote, .foobar, .something {
font-family: MyWebFont, Arial, Helvetica, sans-serif;
}
You can totally add fallback fonts to a #font-face rule!* You don't add them to the font-family descriptor (that's for giving your font family a name); you add them to the src descriptor, which accepts multiple values. If the browser can't find (or doesn't support) the first font, it will try loading the next one, and so on. You can have it look for fonts installed on the user's system using the local() function:
#font-face {
font-family: bodytext;
src: url(fonts/MyWebFont.woff) format("woff"),
local(Arial),
local(Helvetica);
}
Some people may argue that url() and local() weren't designed to be used this way. Typically, they're used to provide local and remote versions of the same font, with the web-font functioning as a fallback if the local font can't be found. Here's such an example from the W3C specs:
#font-face {
font-family: MyGentium;
src: local(Gentium), /* use locally available Gentium */
url(Gentium.woff); /* otherwise, download it */
}
But there's nothing to say you can't use it in place of a regular font stack. Check out this W3C example:
Create an alias for local Japanese fonts on different platforms:
#font-face {
font-family: jpgothic;
src: local(HiraKakuPro-W3), local(Meiryo), local(IPAPGothic);
}
*There are some caveats though. Don't expect this to work exactly like the familiar font-family stack that you're used to. Firstly, there's no fallback for individual characters that may not be supported by your font. Secondly, you can't refer to generic font-families (like sans-serif, system-ui, etc). For those features, you're stuck with the classic font stack. But you can happily use both features, encapsulating all your named fonts in the #font-face rule, and adding the generic font as your last-resort fallback in the font-family declaration:
p {
font-family: bodytext, sans-serif;
}
CSS Variables is one solution to stay DRY
:root {
--MainFont: "Gotham", "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
--HeavyFont: "Gotham Black", "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
body {
font-family: $MainFont;
}
h1 {
font-family: $HeavyFont;
}
Hoping that it makes my pages look the same in modern browsers, I included some reset.css with the following lines
body {
*font-size: small;
font-family: arial,helvetica,sans-serif;
font: 16px/18px sans-serif;
margin: 0 auto;
}
However, the font in my Firefox 20 (for Ubuntu Canonical - 1.0) was still by a few per cent bigger than in my Chromium 25.0.1364.160 Ubuntu 10.04. Funnily, the following rule helped:
* {
font-family: arial,helvetica,sans-serif;
}
It looks like Firefox overrides the font for span, too, but I can't see it in the Web Developer Tools. It simply chooses a different font, although it shouldn't.
I've created a plunk showing it (just drop the star rule to see the change). My questions are
what's the explanation?
what's the proper way of resetting styles? Do we really need star rules just in case?
The explanation is that font: 16px/18px sans-serif sets the font family to sans-serif, which is a browser-dependent default sans serif font. It overrides the preceding font-family setting. Apparently, in your Firefox, sans-serif is mapped to a font that looks smaller than Arial, for the same font size. So the font size is the same, the letters are just smaller.
The simplest fix is to revert the order of the two declarations:
body {
font: 16px/18px sans-serif;
font-family: arial,helvetica,sans-serif;
margin: 0 auto;
}
(The *font-size hack is pointless here, since you have a rule later that sets the font size.)
Alternatively, you can combine the rules:
body {
font: 16px/18px arial,helvetica,sans-serif;
margin: 0 auto;
}
The question “what's the proper way of resetting styles?” is primarily opinion-based and also independent of the technical problem presented. Setting font properties on body isn’t really “resetting styles”, just normal styling. Technically, setting e.g. font-family on all elements has a considerable impact, and you should do that only if you really understand the impact (e.g., on form fields, on elements like code, etc.).
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?
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.
Unfortunately, there is no way to define fallback font specific styling using CSS alone.
As such you may want to attempt to work out the font being used, then apply a style as a result, see here for one method which works out the width resulting from applying a font to an element before 'best guessing' which it is.
That said, it is essentially a hack/workaround.
Otherwise, you could look into implementing a method to identify where the symbols are and then wrap them in styles span tags, again this would be a fairly dirty hack as opposed to a clean solution.
I believe MichaelM's solution won't work. What you can do is specify the font files using the "postcript name" that you can find in various font info sites online.
font-family: "Open Sans",Helvetica-Light;
unfortunately specifying font-weight: 600 might result in undefined behavior. some browser might try to make it bolder, some might just leave it be.,
I would like to override the font of web.ebuddy.com to Helvetica (the font of my messages).
I have tried doing
#bodyContent {
font-family: Helvetica;
}
and it didn't work.
When using Stylish, one often has to employ the !important flag. Also, provide a fallback font in case Helvetica is not installed (it wasn't on some of my windows machines).
So this should work:
#bodyContent {
font-family: Helvetica,Arial,sans-serif !important;
}
unless the content in question is in an iframe. Iframes in Google Chrome are sometimes impossible for Stylish to reach.
Have you tried using the all selector?
Like this:
* { font-family: Helvetica; }