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.
Related
Is it allowed to use:
"font-family: Segoe UI, Trebuchet MS, Lucide grande, sans-serif"
And just rely on the font thats already installed on the system. Including "ROBOTO" on any android device...
I would like to go away from google-fonts (Open sans), as it is causing data-protection problems in EU, and is also blocking website speed (CLS). Whatever.. I think its stupid to download a font.
I know it will look slightly different on Windows and Mac Systems, - but anyway it does look different on Android devices all the time, so let the Mac use Trebuchet MS an I am fine with that. It will not destroy the whole design.
I just would like to use "Segoe UI" if it is available on a Windows System (and it is on 99,9% of them anyway)
I do not offer it for download or safe it somewhere.
Is that legal?
I found the standard-web fonts (Arial, Verdana,...) are always missing a semibold weight, thats why I dislike to use them.
It is legal if you don't upload it on you site, if you just specify like font-family: Segoe UI, Trebuchet MS, Lucide grande, sans-serif its legal
If you want place font to your site (upload to your server) for all users (not only if they have it on PC) you need to buy Web License for it
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.
I designed a small template which uses Trebuchet MS font (PSD). Now, if I use this font in HTML/CSS it
looks quite different. Is there any possibility to achive the same or a better quality ?
Maybe Google Webfont ? Is there a simmilar font ? Or should I use CSS #font-face?
CSS:
font-family: "Trebuchet MS", sans serif;
Best regards
The basic answer is No.
You're talking about font anti-aliasing (or font smoothing). Photoshop gives anti-aliasing in four flavors (Sharp, Crisp, Strong, Smooth). Browsers don't do the same thing, generally the OS will control font anti-aliasing.
more on browsers and fonts: Type rendering: web browsers
No, unless you can use flash generated or image fonts, etc. You're looking at the differences in how two different beasts render fonts and it's mostly stuff outside your control.
#font-face is new and doesn't work in all browsers. In order to maintain cross browser support, you can use the JS based Cufon to deliver whatever font you want.
http://cufon.shoqolate.com/generate/
Can I use "Arial Rounded MT Bold" with css ?
font-family:"Arial Rounded MT Bold", Arial, Helvetica, sans-serif;
Nothing Changed when I put :
font-family:Arial, Helvetica, sans-serif;
Google Fonts has Nunito, by Vernon Adams:
http://www.google.com/webfonts/family?family=Nunito
It's nice and rounded; sort of reminds me of what they're using on Glitch.
It's hard to know without more information from the OP but I've seen these same symptoms caused by the hardware acceleration feature in Firefox. It's been know to cause several problems with font rendering. One I've observed is failing to render a non-standard font (such as "Arial MT Rounded Bold") despite it being present on the client machine.
For example, this page...
<html>
<head>
<style type="text/css">
body { font-family: "Arial Rounded MT Bold"; font-size: 30px; }
</style>
</head>
<body>
This can be really annoying.
</body>
</html>
When viewed in IE, Chrome or FF with hardware acceleration turned off the font appears correctly, like this...
But when viewed in FF with hardware acceleration enabled the browser fails to "find" the specified font so it defaults to another, like this...
There have been issues with this "feature" of FF since version 4.
Probably the best solution is to either use a different (standard) font or (as Kent suggests) find a similar web font that will work in all modern browsers. Alternatively, like many font issues, the problem can be mitigated by supplying a list of font families to use as fall-backs.
I've seen an alternative Google Font suggested here from back in 2011 which is a pretty good match but there are some thin parts to the font which aren't the same as the Arial Rounded MT Bold.
For people still looking for an alternative I think this one is a better match; its called Varela Round by Joe Prince:
Varela Round
I would also set it in font-weight: bold; for a more accurate match.
To use custom fonts with good cross browser compatibility, take a look at FontSquirrel. They will generate the correct CSS to get custom fonts working cross browser. Take a look around their site for Rounded MT Bold or whatever else you want :-) Also, if you want more fonts, take a look at http://www.fontex.org/
Google Fonts is also a possibility. There are a lot of different fonts but I don't know whether there's exactly Arial Rounded MT Bold.
You can use only fonts which are installed at the clients computer!! So just mentioning them in the css font-family doesn't work if the font is not installed. For this, Google Fonts and others bring the functionality... so everytime you use a font that is not "Times", "Arial" or "Verdana", which are installed on nearly every computer, you should think about an alternative to raw css
There's a good chance that — if nothing changed (on your local browser's rendering of the webpage) when you changed the font stack — that you don't actually have Arial MT Rounded Bold installed on your computer. One way to test this is to use Firebug, to 'inspect element' for the headline (or whatever the font is applied to), and to edit the font-family listing in the right-hand Firebug pane. (Usually, I just find the named font and add a space into the name of it, which "breaks" the call to the proper font, and the browser then moves on to the next font in the stack.)
Other options include using Google's web-font Nunito (as Kent Brewster recommended a few minutes ago), or setting up a font-face font on your own server, providing one of the rounded fonts (RockoFLF Bold, FF Din Rounded, Nunito, and Arial MT Rounded Bold are all options). (Technically, per Kent's comment, Glitch is using RockoFLF, with Arial MT Rounded Bold as the second font in the stack. At least, that's what they were doing a few months ago when I last looked at their code. ... Oh ... just checked again, and they've dropped the Arial MT Rounded Bold out of the stack. They're calling RockoFLF with an embedded font-face.)
Anyway, as Kent Brewster noted, I think your best bet is to use Google Web Fonts' 'Nunito', if you aren't sure that it'll be on your users' computers (or even your own).
It may not appear because of system compatibility - you can check out Arial Rounded MT Bold on CSS Font Stack for compatibility. There's a 59.53% on Windows and 95.14% on Mac. https://www.cssfontstack.com/Arial-Rounded-MT-Bold
Its worth noting that Linux doesn't come with Arial by default so one should not rely on a font being present on a users computer. Instead they should download the files (license permitting), host them on their site and link to them using #font-face.
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;