I have the following CSS rule:
some-selector {
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
This shows up correctly as font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif in Chrome Dev Tools 'Computed' tab. Open Sans is loaded from the network in this case, and is applied correctly.
However in Dev Tools "Rendered Fonts" section I see
Cg7UAidtBkOtUziULXjeaA== — 8 glyphs
What does this mean?
I haven't used data: for a font anywhere, so I am not sure where did the base64 come from.
Related
When I set font-family: Roboto, sans-serif; Roboto is rendered.
But if I add Helvetica font-family: Helvetica, Roboto, sans-serif; , then Arial is rendered.
Tested in Chrome 99 and Firefox 98 on Windows 11. On my system there's Roboto installed and Arial preinstalled. Helvetica is not.
Why doesn't it fall back to Roboto since its the next font in line?
Problem might be in your way of writing font-family.
If you have newly installed font, you should use quotes, maybe also for Arial if is preinstalled.
font-family: Helvetica, 'Roboto', sans-serif;
If I use this in my CSS file:
body {
font-family: "Open Sans", Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
then Firefox (69.0.3 on OpenSUSE Tumbleweed, KDE 5.17.2) finds the "Open Sans" font on my system and renders the body text using this font as expected, and this is confirmed in the Web Inspector tool (which underlines the active font):
But if the order of font-family is adjusted to reduce the priority of "Open Sans" so that we end up with this:
body {
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Open Sans", "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
suddenly Firefox no longer seems to be able to find "Open Sans" and instead uses whatever its default sans-serif font is, as confirmed in the Web Inspector tool:
Is there some obscure CSS3 rule which explains why Firefox ignores all fonts within font-family even when one of those fonts is available and will work fine if that font comes first in the list? Or is this a known bug in Firefox?
Update
As requested by j08691 I retested with a smaller number of fonts in the font-family list, and the length of the list makes no difference.
But I did find something weirder: no matter how long the list nor how soon "Open Sans" appears in the list, it works fine until you position "Open Sans" after Calibri or Arial. If Calibri or Arial come first then "Open Sans" is never found (even though neither Calibri nor Arial exist on my system) and Firefox defaults to the generic sans-serif family.
This surely is not correct CSS3 behaviour?
I have an HTML which uses the Helvetica Neue font for most of the text.
font-family: 'Helvetica Neue', Helvetica, Arial, Calibri, sans-serif;
<font color="#ffffff" face="'Helvetica Neue Medium','Helvetica Neue', Helvetica, Arial, sans-serif">Sample text</font>
Using Fount I can see that the text is actually written using Helvetica Neue Medium.
My question is where does the css/html look for this font ? I checked my /Windows/Fonts folder and there is no Helvetica font there.
The CSS will look for fonts installed in your font directory.
We can configure fonts with #font-face rule
#font-face {
font-family: MyHelvetica;
src: local("Helvetica Neue Medium"),
local("HelveticaNeue-Medium"),
url(HelveticaNeueMedium.ttf);
font-weight: bold;
}
ref https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face
I have this style object in my controller:
p: {
'font-family': 'Lucida Grande\', \'Lucida Sans Unicode\', Helvetica, Arial, Verdana, sans-serif',
'margin': '0'
}
Only 'margin' is honored (in Chrome Dev Tools, 'margin' is found in the 'Styles' list in the 'Elements' section). Anyone see an issue with the font-family I've specified?
Try this:
'font-family': '\'Lucida Grande\', \'Lucida Sans Unicode\', Helvetica, Arial, Verdana, sans-serif',
It may be because you need an opening apostrophe ' before Lucida Grande, the one currently there would not serve that purpose.
This question already has an answer here:
Google Webfont conflict with local font
(1 answer)
Closed 4 years ago.
So I am working on the landing page for one of my little products.
http://finaltouchapp.com/
The application is for OSX so my target group is going to be on mac. Many of them are going to have Helvetica Neue so I have created a font family and a font weight that looks like this.
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight:100;
The problem is that on some machines it will show the ultra light version like this.
https://img.skitch.com/20110808-kwyja7m8anmjsyc1xcqqk174x1.png
On my machine it shows the proper weight which is light
I then tried to be more specific with something like
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
But still no luck.
I am assuming it's because people have different weights in their Helvetica Neue folder but I am not sure how to deal with it.
One alternative is of course to use font-face but I would rather just have those who have the font show it and the rest use ordinary Helvetica.
Anyone know how to deal with it.
Using CSS3 you can include your own TTF font files and use that instead.
#font-face {
font-family: " your FontName ";
src: url( /location/of/font/FontFileName.eot ); /* IE */
src: local(" real FontName "), url( /location/of/font/FontFileName.ttf ) format("truetype"); /* non-IE */
}
/* THEN use like you would any other font */
.yourFontName {
font-family:" your FontName ", verdana, helvetica, sans-serif;
}
The code snippet above is from: http://randsco.com/index.php/2009/07/04/p680 which explains this in detail.