I've designed an HTML page on a local host using a sans-serif font, and I've attempted to move my code to a Unix/Linux server so I can use crontabs to generate the page at specific times.
However, I want to use a sans-serif font. This is simple to do at first, just using:
body {
zoom: 23%;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#multiLine {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
width: auto;
margin: auto;
text-align: center;
position: absolute;
top: 0px;
right: 0px;
} ...
As soon as I push the code to Linux and attempt to render the file, the fonts never match up correctly and it just returns the page in a clunky looking (with no commas) Linux default font.
Does anyone know how to use CSS on Linux and have it use a font of my choosing? I tried basic CSS, but it never works, and font-face doesn't seem to have access to any files.
Linux equivalents for Verdana: DejaVu Sans, Bitstream Vera Sans, Tahoma, Kalimati
Try:
{font-family : Verdana, "Bitstream Vera Sans", "DejaVu Sans", Tahoma, Geneva, Arial, Sans-serif;}
and see this link for more details
Verdana and Arial are Windows-specific legacy fonts — you won't find them on Linux for licensing reasons (or very old never fixed versions that Microsoft briefly published in RO mode in the 90's to help IE kill Netscape, and that some people still install manually).
Helvetica is an even older legacy font. If it matches on the system it will likely match 80's or 70's era fonts with limited encoding coverage, little screen optimization, etc.
Sometimes Arial and/or Helvetica are aliased to other fonts on Linux. When that's the case the alias target is chosen for metric compatibility (same symbol sizes and proportions as the original font) not prettyness or encoding coverage. Those aliases are intended to help render legacy pages that depend on exact pixel dimensions, not to be pretty.
Kill your css stack and just specify sans-serif if you don't want to dig into system font specifics. What poisons your rendering is the Arial/Helvetica references.
Otherwise you need to follow which sans-serif font is popular and available a given year on your target system. Dejavu Sans has been a pretty safe bet for quite a long time. That may change in the future. Its metrics (symbol proportions) are quite different from Arial and Helvetica. Modern for-screen fonts tend to be wider than legacy fonts that targetted cramped paper output.
Related
In Chrome v75 Windows 10
font-family: "Arial Black" works, but font-family: "Arial Bold" doesn't.
They both work in Edge.
I know I can still use font-weight. But here I struggle to understand why Chrome doesn't work with Bold: Other fonts that end with Bold wouldn't be found either.
As you see in the above I have all variants installed. "Arial Bold" falls back to "broadway".
http://jsfiddle.net/amts6ebq/1/
"Arial Bold" isn't a font family.
"Arial" is a font family. "Bold" is a weight. The Bold weight of Arial is stored in a file called "Arial Bold", but this doesn't mean it's part of a separate family.
What you want is:
.example {
font-family: "Arial";
font-weight: bold;
}
<div class="example">Example</div>
It’s true, "Arial Bold" isn't a font family. You can blame Microsoft.
Using the font-weight declaration is the correct answer, however, some users might find themselves in my situation. I am using sass on a large number of templates, and we have written all our work so far in a way that we cannot use font-weight. We apply font weights by using font-families of different weights. One recent design was specified to use Arial. Of course we also need to use this font in bold in many places. So Arial won’t work for us.
The solution is to use a different font. Arial is actually the same as Helvetica, so you can do a direct swap and no one will know. You can't rely on the user having Helvetica installed on their system, so you will need to provide web fonts. If you can't find a version of Helvetica to use, There are a lot of similar fonts. You should search online for Arial/Helvetica equivalents, but in 2022, I'm using Roboto, which is a good match, but it is a little condensed. Open Sans might be an acceptable replacement.
tldr; Art Direction should never specify the Arial typeface - it’s not a real typeface, it’s Microsoft’s free version of Helvetica. Instead, use Helvetica.
I am currently using Helvetica Neue on a website that I am developing. Over the past few months, I have noticed that the Helvetica Neue font renders extremely bold in Google Chrome. When viewing the same site in Firefox, everything looks much better, and as expected.
Here's a comparison screenshot for reference:
The CSS rule for this portion is fairly straightforward:
#top-bar {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
height: 30px;
color: #ccc;
font-size: 80%;
line-height: 30px;
}
#top-bar a {
color: #eee;
}
Can anyone explain why the font looks so different in the two browsers? It almost looks like Chrome is rendering a heavier font weight, even though font-weight: normal has no effect. This is not unique to this site, either. Any site (including Bootstrap Docs) that uses Helvetica Neue suffers this on my PC (and others running Chrome). Everything looks fine on a Mac.
Is there a solution? Some technique to mimic FF's rendering of the font in Chrome, for example?
This is because Firefox supports the hardware-accelerated DirectWrite API (part of Direct2D) to render fonts and Chrome doesn't. See for example:
Chrome Issue 25541
Chrome Issue 124406
Even if you switch off hardware acceleration in Firefox, the results are different because both browsers use different font rendering backends.
I want a font to 'fall back' to a certain font on google web fonts (Open Sans) if the user doesn't have helvetica installed, is there a simple way of doing this?
My idea is that i only want the user to have to download the font if they have to, eg for mac users i don't want them to have to download the font.
Eg, something like this, if possible:
font-family: HelveticaNeue-Light, 'Open Sans Light', Arial;
Also, since i'm using the specific light version of helvetica 'Helvetica Neue Light', when falling back to open sans / arial is there a way of specifying the font weight in such a way that the weight only applies to the fallback font? Does the following do that?
h1 { font-family: HelveticaNeue-Light, Arial; font-weight: 400; }
You can specify a local path to the font inside the #font-face src property, so clients who already have the font won't download it from the alternate source. I don't know how well it's supported across browsers, but it should work with any browser that has font-face support.
#font-face {
font-family: Helvetica;
src: local(Helvetica), url(/path/to/Helvetica.ttf);
}
I am having a little issue with a font in Chrome. I think it's the way I'm specifying it. I have:
font-family: "Myriad Pro", Tahoma, Arial;
That works well in FF, IE and Safari, but Chrome just shows me weird symbols.
Using font-family: Tahoma, Arial; works well for all the browsers, including Chrome. But I need Myriad Pro at least for IE, FF and Safari, how can I achieve this?
Thank you!
Myriad Pro is NOT a web font. Because of this, Myriad Pro is not available in all browsers (also, not all computers have the font installed), you are going to end up with a lot of visitors who will only see Tahoma.
Try using #font-face. I recommend FontSquirrel's #font-face Generator. All you have to do is upload your font, then it generates the files and CSS you need to get a pretty consistent looking font in nearly all browsers, even IE6!
Remove Myriad font from stack in css. Refresh your page. Then add this font back to your stack again and refresh your page. I don't know why, but it worked for me.
Are you on a mac? I found this: http://www.mactalk.com.au/56/83001-font-issue-google-chrome.html
"Myriad Pro", Tahoma, Arial;
should it not be
"Myriad Pro", Tahoma, Arial, sans-serif;
This also might be case of the browser for some reason not being able to access the Font. Happened before for me on Opera, it would only be able to access a few fonts, but none of the special fonts I tested that other browser could see just fine. Updates \ reinstall never resolved it for me, but after upgradin from Vista to 7 the problem went away.
I have a lot of CSS that does the following:
font-family: Helvetica, Arial, sans-serif;
It my understanding that Helvetica is the default sans-serif font on Mac and Arial is the default sans-serif font on Windows ... if that's the case, couldn't I just change the above code to be:
font-family: sans-serif;
Yes, no?
The default font really depends on the browser. For example, in Firefox on Mac, I have Lucida Grande as the default sans-serif font. I don't think I changed it, but I'm not entirely sure. You can't really depend on the defaults being specific fonts, as users can change them in the preferences. If you want a specific font, specify it.
Helvetica on Windows XP looks horrible due to its poor rendering. Luckily, only a few people have Helvetica installed on Windows XP (because if they care about Helvetica, they’ll probably be using a Mac).
This is safer:
"Helvetica Neue", Arial, sans-serif;
That way, pretty much only Mac OS X will pickup Helvetica Neue (standard on OS X) and Windows can ignore it and move straight into Arial.
With fonts, you want to be as specific as possible to prevent layout issues. Your page may look perfect on a machine with Arial as the default sans-serif font, but if someone has a very different font as their default, it can affect spacing of elements (if you use relative measures). Plus it makes any designer on the project angry when they see the wrong font, and you don't want that.
What do you want to happen on platforms that have
Helvetica or Arial installed and
a default sans-serif font that is neither of those?
Or asked differently: do you always prefer Helvetica or Arial over the default, if they are installed? If you prefer the default sans-serif font in all cases, why mention those two at all?
Helvetica is sometimes the default sans on Mac, but to be honest it's not a great screen font.
Geneva, Lucida Sans, and Trebuchet MS are good alternatives.
You can be pretty certain that Helvetica is installed on machines running Mac OS X, because that font is used in a number of official applications designed by Apple. Arial is also available on any machine, provided that the user hasn't deleted the font file.
But as Tom points out, it's better to be as specific as possible when defining font styles. When I want a sans-serif family displayed I usually have the following in my stylesheets:
Helvetica, Geneva, Arial, sans-serif;