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;
Related
I want to replace the default font family helvetica in my Chrome-Browser derivate, as it's rendered in an unreadable fashion.
My replacement font-family of choice would be "Helvetica Neue, for which I have licensed copies.
So, inside Chrome, I use the Stylus plugin, and inject the following CSS into every website:
#font-face
{
font-family: helvetica;
font-style: normal;
font-weight: normal;
src: local("Helvetica Neue");
}
However, using the Chrome developer tools, I can see that the Rendered Font property defaults back to Arial, for an element with style
element.style {
font-family: helvetica, arial, verdana, sans-serif;
}
Clearly, I am misunderstanding the local(...) argument. If, for example, I redefine
#font-face
{
font-family: helvetica;
font-style: normal;
font-weight: normal;
src: local("Impact");
}
then the changes apply (in a very ugly way). My question is thus:
What do I specify as the argument to local(...) in order to actually use my local fonts?
Additional information:
I'm on windows, my fonts are installed OS-wide to C:\Windows\Fonts.
If I drag one of the icons to a different place, I can see its filename is HelveticaNeue.ttf
The same file in the font view gets displayed as Helvetica Neue Standard
If I open the file in font preview, it displays the title Helvetica Neue (OpenType) and the font name Helvetica Neue (see attached screenshot)
For google fonts the font-family and font-weight are variables. The short syntax should be
font: 400 "Open Sans", Helvetica, Arial, sans-serif;
But I get invalid property value,
Is there a way to declare just font-weight and font family in the short version? I want everything else to stay as it is (font style etc)
I believe the font-size must be specified when using font shorthand.font: 400 12px "Open Sans, Helvetica, Arial, sans-serif;
See http://www.impressivewebs.com/css-font-shorthand-property-cheat-sheet/ and http://www.w3.org/wiki/CSS/Properties/font
You'll need to use the good old font-weight and font-family instead of the shorthand.
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.
I know that Alt is used for images in HTML, but is there a way to apply it to text via CSS?
Example:
input { color: #62161e; font-size: 25px; font-family: Lintel; }
So say Lintel does not display properly in some browsers. Is there an alt option to display Helvetica or something?
In CSS, you can specify a list of font families to follow and the browser will use the first one that it supports. So if you want to display Helvetica if Lintel is unavailable, you would simply do this:
font-family: Lintel, Helvetica;
Remember that if the font family has a space in it, you need to surround it in double quotes, like with the line I use for my website:
font-family: "Segoe UI", Arial, Helvetica, sans-serif;
You can provide multiple fonts and the browser will pick the first available font.
Yes, you can chain fonts.
font-family: Lintel, Helvetica, Arial, sans-serif;
If you are defining both font-size and font-family I suggest you use the shorthand version:
font: 25px Lintel, Helvetica, Arial, sans-serif;
You can add more to this as well:
font: (weight) (size)/(line-height) (family);
The only two that are required are size and family.
font: bold 30px/25px Lintel, Helvetica, Arial, sans-serif;
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.