I want to use system fonts first and fallback to a web font, but it is not working as expected.
Demo: https://jsfiddle.net/60s8mgpu/
Result in my browser:
When I set font-family: sans-serif,'Arimo'; I want to render characters the same as with font-family: sans-serif;, but the last character ϣ is different (rendered by Arimo). My system supports it using "DejaVu Sans—Local file(1 glyph)".
Maybe DejaVu Sans is not serif, nor sans-serif? If so, how to set font-family to use system fonts as first and if none of them support a character then download some font, e.g. Arimo?
Related
I used some special fonts in my asp.net web application .Which are not found on every machine (which use that web application) and due to which that font is not visible to client.how can i resolve it
As mentioned in this W3Schools article you should always specify fallbacks when specifying a font-family:
The font-family property should hold several font names as a
"fallback" system. If the browser does not support the first font, it
tries the next font, and so on.
Start with the font you want, and end with a generic family, to let
the browser pick a similar font in the generic family, if no other
fonts are available.
You can do this in CSS with the font-family property, simply by specifying a comma separated list of different fonts. As mentioned above it should end with a generic family.
The following example prefers Arial, but falls back to the Helvetica "font-family" when Arial is not found. If neither of both is available it then falls back to a font of the sans serif "generic-family".
font-family: Arial, Helvetica, sans-serif;
You should use a webfont in this case. The browser will download your specific font and display the page as you want.
See for instance (never used, first hit in Google search): https://www.web-font-generator.com/ Mind the second checkbox!
Or see https://www.google.com/fonts
The Liberation Sans Narrow font is included with many versions of Microsoft Windows. It is a discrete font, defined by the file LiberationSansNarrow-Regular.ttf.
How, in CSS, can this font be specified? Simply specifying:
font-family: "Liberation Sans Narrow";
will not work.
Note that specifying:
font-family: "Liberation Sans";
will work to specify the Liberation Sans font, which is defined by a different TrueType font file.
I only need the CSS code to work in Firefox. It is perfectly acceptable (and expected) that it will only work in browsers running on systems that have that specific font installed.
Note that I don't want to approximate Liberation Sans Narrow; I want that specific font to be used due to the clarity of rendering.
I want to specify this font for modifying the chrome within Firefox using userChrome.css.
it depends on how the file has been included in the page.
1) font included through url then the file would have the font name used for it. we need to use the same font name
2) font included locally through the font-face then we need to use the name we mention to that font
I have a script which converts HTML to PDF. On Windows, it runs just fine.
But when I run the script on Ubuntu, the Arial and Courier fonts do not work correctly.
I presume this is because those fonts don't come with Ubuntu by default. That's fine, it's not a big deal.
I'm just wondering what I should change the following to, such that it will still work on Windows and use a font that is close to Arial and Courier respectively on Ubuntu?
font-family: "Arial";
font-family: courier;
Thanks
For the Arial-esque font use
font-family: Arial, sans-serif;
and for the Courier-esque font use
font-family: Courier, monospace;
These rules basically mean: take the first one if available, otherwise the next one, otherwise repeat until the end. It should work in normal CSS (not sure about your particular implementation, though).
sans-serif and monospace are browser or system dependent values for fonts that have been specified as those font classes (e. g. “DejaVu Sans” and “Ubuntu Mono”).
One way is to use Web Safe fonts. Here's a list of Web Safe fonts you can use:
CSS Web Safe Fonts
Another way can be to use a font from your web directory or fonts available on the web from services like Google Fonts,etc.
Here's its usage:
#font-face {
font-family: fontName;
src: url('/font/xyz.woff');
}
Check here for reference on font face rules.
Check this for getting started with Google Fonts.
Check this page for the Font Stack, showing the compatibility of fonts with different OS.
link is :
http://www.woolovers.com/silk-cotton/womens/sleeveless-silk-cotton-camisole.aspx
Left is iPhone display and right is PC. The fonts circled are having same css but have different display. A(pc)=B(pc) but A!=B. Any ideas?
As Jukka has said it is not a supported font on iOS so you have three options.
Choose a different font which is available on ALL (iOS, Android, MacOS, Windows etc.) platforms.
Host the font file on your web server and point to it with CSS #font-face.
Use an online font hosting service such as Google Webfonts
To point to a custom font with CSS use the code below and copy the Lucida Sans font file to your web server.
#font-face{
font-family: "Lucida Sans"; src:url('LucidaSans.ttf');
}
Note: Google Web Fonts does not have Lucida Sans available.
It seems that iPhone just hasn’t got a font named Lucida Sans and therefore uses another font. Cf. to What fonts do iPhone applications support?
My computer doesn't show the text using Lucisa Sans either, because the version of the font that I have is named Lucida Sans Unicode. All computers doesn't have a font named Helvetica either.
You should use a font stack will fallbacks all the way to the default font sans-serif defined in CSS. That way you know that one of the fonts specified will always be used, and it won't fall back to something completely different:
font-family: Lucida Sans, Lucida Sans Unicode, Helvetica, Arial, sans-serif;
See https://developer.mozilla.org/en-US/docs/Web/CSS/font-family:
You should always include at least one generic family name in a font-family list, since there's no guarantee that any given font is available. This lets the browser select an acceptable fallback font when necessary.
I went with the following fallback fonts:
font-family: "Lucida Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
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.