I would like to use a different font for the labels in my network other than Arial, Verdana or Tahoma, which are the default three available fonts.
How do I do that? I don't even want a very fancy font, just Arial Narrow.
If I replace 'arial' with 'arial narrow' in the options of my network, the Arial Narrow font gets correctly applied on my computer, but does not on my phone (I get some kind of Time New Roman instead).
Make sure the font is loaded on your page as Vis Network doesn't ship any fonts and different platforms and sometimes even browsers support different fonts. I suppose your cell phone doesn't have Arial Narrow.
PS: It seems that you have to pay for Arial Narrow: https://stackoverflow.com/a/7189307/2697214.
Related
When I inspect elements on my site using the Chrome developer tool, I see the following as my element's "Computed" style:
font-family: "HelveticaNeue-Medium", "Helvetica Neue Medium", "Helvetica Neue", Helvetica, "Roboto", Arial, "Lucida Grande", sans-serif
But if I scroll down further (to the bottom of the "Computed" tab) I see:
Rendered Fonts
Liberation Sans—Local file(11 glyphs)
Since my (Linux) OS must have Arial and sans-serif, I'm confused as to why Chrome would pick "Liberation Sans": it isn't even on my font-family list.
I'd blame my own bad CSS, but in theory the "Computed" tab shows the final/processed version of my rules, so however terrible my original CSS may have been, Chrome clearly sees my font-family list defined (and being applied) to my element ... it just ignores it.
Can anyone explain this mystery?
EDIT: I installed a font-checking program and it turns out that Linux (Mint) does not in fact come with an Arial or sans-serif font ... but even so, I thought browsers provided (at least) a basic sans-serif font, no matter what the OS? Is that incorrect?
Your font stack specifies Arial.
Arial is not present on most Linux systems for licensing reasons, and it is usually aliased to Liberation Sans, since Liberation Sans has the same dimensions (metrics) as Arial. The font design, however, is different (that's why Liberation Sans is usually not the default Linux sans serif font, its design is not popular).
Helvetica is another well-known legacy font name usually not present. If you try to use it in the font stack it will usually trigger all kinds of aliasing. It may even trigger the Liberation Sans alias before Arial (since Arial was Microsoft's poor-man Helvetica replacement when windows launched and has about the same metrics).
(When you create a PDF that specifies Helvetica on Windows it will usually substitute ArialMT).
If you only specify sans-serif you will get the system "best" sans-serif font, usually clean well-loved designs, but their dimensions vary widely from system to system.
Due to the number of broken web sites whose designers assume all systems ship with the same fonts, with identical pixel widths that can be fixed in the page design, font substitution is usually done on metric first, design second priorities.
The only way to get the same font on all clients is to use web fonts, but that will slow down your site due to the font download and users (not "designers") prefer fast pages. Web fonts demand to be careful about licensing and font unicode coverage, security-conscious users will block third-party downloads, and there is a lot of cargo-culting about obscure web font formats (opentype is sufficient in most browsers nowadays).
The kind of Apple maniac that thinks HelveticaNeue is the alpha and omega is usually satisfied with Open Sans as web font.
But even with web fonts the rendering will be slightly different since different systems use different text engines that all have their specifics, with some fonts working better than others for a given engine.
There are two font fallback mechanisms in Chrome for Linux. One is OS-level fallback. Another one is CSS specified fallback. The OS-level fallback mechanism returns Liberation Sans to Chrome instead of none or not found while Chrome asking if the HelveticaNeue available in your OS. Chrome takes the returned Liberation Sans and believes OS returned answer so ignores the CSS subsequent font fallback list.
I see that you have both Helvetica and Arial in your font-family properties. I'm guessing that you want Arial when Helvetica is not available...An answered question that deals with this is: two fonts
Now, if I wanted to have only one font-family, such as Century Gothic, I would do:
font-family: "Century Gothic", CenturyGothic, AppleGothic, Sans-Serif;
This is a good guide.
My question is, why do you have so many
Because Google Chrome, somethiing leave the WWW from the url, you can try to put it manually.
Especially in Unix or Mac system.
I have noticed that at Google Fonts they never use fantasy as fallback class in font-family. For all script and typical fantasy fonts, they use cursive.
I wonder if this is a hint that chrome does not support fantasy as fallback class? For that to be the case, fallback font-classes would have to be handled by the browser via implemented lists for typical serif, sans-serif etc. fonts. Alternatively, the browser could query the os for such lists?
What happens when the browser needs to fallback to say a serif font on the clients system? How will it get info on the installed serif fonts?
I haven't been able to find an aswer to this, so I hope that someone here might know about it. I know web safe fonts and all that are probably about to become things of the past, but they still have some relevance.
Typefaces don't map to any generic font families mechanically. They're only categorized that way in their family names and on font listings such as Google Fonts and Adobe Typekit.
You could create a font stack that consists of a sans-serif family, a serif family, and ends with the fantasy keyword:
font-family: Helvetica, 'Times New Roman', fantasy;
And browsers would treat it the same: use whichever family comes first that is supported, or fall back to the generic family if it comes to that.
I would expect all browsers to implement at least the five generic families defined in CSS2.1 and css-fonts-3: serif, sans-serif, cursive, fantasy, and monospace. But which faces each generic family maps to exactly is less predictable — for one, most browsers actually offer the user the ability to change their preferred default serif, sans-serif and monospace families. And even then, the entire list of installed fonts is available for selection in every category, which suggests that even browsers can't (or at least don't) differentiate between categories of fonts.
The default preferences that a browser ships with are based on assumptions of which fonts are most likely to be preinstalled on any given system.
I can't answer why Google Fonts doesn't seem to specify fantasy in any of its font stacks.
I've set up a test case:
http://codepen.io/jaycrisp/pen/NxOrOy
.cursive {
font-family: cursive;
}
.fantasy {
font-family: fantasy;
}
I see different fonts in chrome on mac, so that shows that chrome does support the fantasy keyword. I see the same font on Safari and Chrome too.
I'm seeing papyrus for the fantasy font, which I think is a Mac OS bundled font. I'm also seeing the same font on Firefox and Safari.
I would guess that the reason google font uses cursive instead of fantasy is that if you're using such a font, you're probably going for a very specific look to your site. Replacing this font with something like papyrus is going to totally ruin it. Well, using Papayrus will totally ruin your site anyway, but that's another matter.
The typeface my client wants to use is "Courier". Courier is not installed on every computer or smartphone. When it's not there, it falls back to "Courier New". "Courier New" is a thinner typeface than "Courier" and I want the look of the page to be as consistent as possible across different OS and browsers. So I figured: if "Courier" is not installed, why not use "Courier New Bold"? See the image below:
After creating this image I got even more confused. I added some more font names to my font-family declaration in th css, to cover how the font ("Courier New Bold", that is) could be called on different OS. This is the new declaration:
font-family: Courier, CourierNewPS-BoldMT, 'Courier New Bold', 'Courier New Fett', monospace;
Now comes the weird part: on Chrome in Windows XP, the text is stoll rendered as thin as before. And it's the same with Mobile Safari.
What I suspect is this: both Chrome (WinXP) and Mobile Safari only check the first font I declared. They see it's "Courier". They do not have "Courier" installed so they serve "Courier New". They do not take into account the other fonts I declared in the CSS.
Sorry for this lengthy post. My problem boils down to this: How can I get the text to show up as either "Courier" or "Courier New Bold" consistently across all OS and browsers?
You can find the live example here.
Update: I've read about -webkit-font-smoothing: antialiased; and added it to the CSS but this does not solve the problem. The text still looks much thinner on Windows and iOS.
Update2: This post from 2007 explains how Courier is displayed as Courier New on iOS and why it sucks. I'm not sure if newer versions of iOS still behave the same, though.
CSS lacks programming features, so you cannot express things like "use font A in normal weight if available, otherwise font B in bold weight" in CSS. Font family and font size are independent of each other, in CSS terms.
If you have checked that embedding is not allowed for Courier, check out the available free fonts created to resemble Courier. For a starter, check out
http://en.wikipedia.org/wiki/Courier_%28typeface%29#Free_alternatives
If the client can accept some of them, you could use it with #font face. (I presume you have already explained to the client that Courier is about the worst choice, competing with Comic Sans, and that the visual boldness of Courier, on computers where it is still available, may be caused by its implementation as a bitmap font, which makes it look awful in large size or in high-resolution rendering. If the client still insists, a free Courier-like font is probably the simplest and technically most reliable approach.)
Get some free Courier-like font and embed it as webfont to have it displayed "consistently across all OS and browsers". This is the only way to ensrue the users sees the font you/your customer had in mind when designing the site first.
Screenshot: http://i.imgur.com/QVBGx.png
It is pretty evident that my site renders different on Chrome and FF7 on my Win7 machine
I am using this:
h1, h2 {font-family: "Lucida Grande", "Helvetica Neue", Arial; }
Does anybody can point me how can I even these diffs? I don't want fonts with different 'feelings' on each browser.
The font, Lucida Grande is installed in my Windows machine
EDIT:
font-weight: normal !important
doesn't work either
It looks like the two browsers are rendering it with a different weight.
I can think of two possibilities, though I don't know if either are correct.
You requested a bold font, but that font is not available in bold. One browser is just showing the regular, non-bold variant unchanged, whereas the other has processed it to look bold.
You requested a particular weight of font, say "bold" or "600" but the installed fonts do not precisely match that weighting. One browser is substituting an "extra-bold" variant of font, and the other a "regular-bold", or something of this nature.
If either of these is correct you could play around with the font-weight CSS property to try and alter it. But then that may affect substitution of whichever font is chosen in the case that it is viewed on a system with no Lucida Grande font at all.
Fonts will always render slightly different from one browser to another, but that was a bit more difference than usual. Probably because the headers have font-weight: bold; as default, and the font doesn't have a bold variation so the browsers create the bold style from the regular weight in different ways.
Anyway, you might want to use more common fonts. On my Windows 7 machine there is neither Lucida Grande nor Helvetica Neue, so it would render using Arial. Still, I have the additional fonts that come with both MS Office and Photoshop, so I have a lot more fonts installed than you can expect from a standard system.
Also, you should always specify a generic font as the last resort, in this case sans serif, otherwise it would render using the default font if none of the fonts are installed, which is something like Times Roman which has a completely different look. Perhaps also adding Helvetica, which is the closest equivalent of Arial on non-Windows systems.
I actually have right now two questions:
1) What font faces are preferred for a website? Right now I really like 'Segoe UI', but it's only available on newest Windows systems like Vista and 2008 Server. So I have defined a sequence:
font-family: 'Segoe UI', Tahoma, Arial, Helvetica, Sans-Serif;
I do not really like the look of all of them except for 'Segoe UI'. Any suggestions on what nice font could be used in addition to that? I also tried 'Trebuchet MS', it looks great on documents, but not really on a page.
2) Any way to specify with CSS different font sizes for each particular font-familiy? Like 'Segoe UI - 9px', Tahoma - 8px etc. This is probably not possible, but maybe there are some tricks?
I also know I will get lots of comments now to use relative font sizes, but I don't want that. I have some graphics in my design which are not stretchable. If the user or browser default lead to the font rendered with a varying size the design will quite soon fall apart. I prefer having design with font size limitations to not having design at all.
1) What font faces are preferred for a website?
See this page concerning safe web fonts.
2) Any way to specify different font sizes for each particular font-family through CSS?
Nope.
Soon, #font-face will be supported by all major browsers, and you'll be able to use any font you want on your website.
Until then, have a look at Cufón or sIFR.
Use the right typeface for your site. It's not as simple as saying "this is the best font for websites". Here are two quotes (read principles) from Robert Bringhurst's "The Elements of Typographic Style":
"Typography exists to honor content."
"Choose faces that suit the task as well as the subject."
On another note, unless a serif face really suits the website, sans-serif faces are more appropriate for digital media.
With regards to your second point, Phil Oye has recently released FontUnstack, a jQuery plugin which will tell you what font is being used for a given element. The element will be given a class (i.e. "set_in_gill_sans") through which you can apply specific styles for different typefaces.
Also, check out the font matrix (1.5 years old) and these well thought-out font-stacks.
1) What font faces are preferred for a website? Right now I really like
'Segoe UI', but it's only available on
newest Windows systems like Vista and
2008 Server. So I have defined a
sequence: font-family: 'Segoe UI',
Tahoma, Arial, Helvetica, Sans-Serif;
I do not really like the look of all
of them except for 'Segoe UI'. Any
suggestions on what nice font could be
used in addition to that? I also tried
'Trebuchet MS', it looks great on
documents, but not really on a page.
What font faces are preferred? This is a tough question. There are three main computing platforms that each have their own set of base fonts. Then, some software like Adobe Creative Suite, the Microsoft Office suite, or even software as simple as the Powerpoint 2007 viewer for XP install fonts for the user. There's lot of charts on the web that list commonly used fonts.
For a website, you're going to want to use legible fonts. Most of the screen fonts commonly used on the web are pretty legible. The fonts you mention for instance are good examples. The most legible on screen font is Verdana, although it's generally considered to be ugly. Arial is always a safe choice.
Just be careful with that Segoe UI declaration though: if a Windows XP user has that font, it probably won't be legible with anti aliasing disabled.
For headings, you can go custom and use techniques like sIFR and Cufon to replace the text with non-native system fonts.
A quick note on size: most sites tend to set a really small font size. 13 pixels really is the minimum for long texts (see relative readibility). A font with a small x-height like Times should only be used for headings or in a large enough size (e.g. 15+ pixels).
2) Any way to specify with CSS different font sizes for each
particular font-familiy? Like 'Segoe
UI - 9px', Tahoma - 8px etc. This is
probably not possible, but maybe there
are some tricks?
No, this is not possible. You can make assumptions about the browser and OS people are running via Javascript and thus make assumptions about the fonts they have installed, but it's a lot of work for a relatively small gain. I would advise against it.
Re. your font choice, I would consider usability to be a key requirement (unless you're going for a deliberately styled format).
Neilson made a study and found Verdana or Arial to be optimal choices in terms of legibility.
CSS3 will natively support downloadable fonts (you won't be promted to download, they will just work on the fly), so you will be able to use whatever typeface you want. We just have to wait for it a but since it will be available only in Firefox 3.5 and Opera 10.
You can also use classic fonts like: Arial/Helvetica, Verdana, Georgia, or even Times Roman for great visual impact. You just need to find the right font-size and contrast with other elements on the page.
Just personally, I like Verdana and Georgia, though they are only Mac/Windows-"safe". In your case perhaps it's best to select second-choice font which has the same metrics as your first choice.
Most major browsers already support #font-face so you can use any openly available font.
Google Web Fonts hosts some free fonts to choose from:
There are also paid websites like Typekit that will host paid fonts for you and let you buy them: