My website uses a rather obscure font that about half the computers can properly read. The font is "Lucida Console".
On the computers that can't read this font, they get displayed ugly Times New Roman, is there a way to set the font of my website to Lucida Console but on computers that can't read it, view Arial instead? Using CSS.
you can specify multiple fonts:
p {
font-family: "Times New Roman", Times, serif;
}
The browser will try the first one, if that one isn't available the second, and so forth. In the end it uses the family serif, so the browser chooses any serif font. You should use the monospace family.
So in your case, something like this is what you want:
p {
font-family: "Lucida Console", "Courier New", monospace;
}
Further tips:
Google css font stack for suggested lists of fonts aimed at certain styles of fonts. 'font stack' is the colloquial name for these font lists.
Think cross-platform. Consider adding fonts commonly found on Mac, Linux, iOS, Android, Windows, and other platforms your readers may be using.
Always include a generic-family name at the end of your font stack in case the user has none of your desired fonts:
serif
sans-serif
cursive
fantasy
monospace
Include quotes around fonts named with multiple words, or simply quote all font names.
You can also serve that obscure font with your website (if you are legally able to) using #font-face. It's easy and works even in IE6 :).
Read about it here: http://www.miltonbayer.com/font-face/
Related
As we know when register any google font url in your website and then can use it during font-family css property, after each google font name we see the Generic font families name like sans-serif, serif, cursive and monospace like these exapmles below
font-family: 'Tulpen One', cursive;
font-family: 'Ubuntu', sans-serif;
font-family: 'Trykker', serif;
font-family: 'Ubuntu Mono', monospace;
Is google fonts work with font-family property without using Generic font families name? and only using google font name? like this examples below
font-family: 'Tulpen One';
font-family: 'Ubuntu';
font-family: 'Trykker';
font-family: 'Ubuntu Mono';
This question highlights a misunderstanding of CSS - the font-face rules you get from google tell the CSS engine which bytecode to use as font-resource for specific font families (and at which style/weight). That's all it does, and can do. Whether you use external fonts from Typekit or Google or github.io or even your own locally hosted ones.
In contrast to this, your page CSS is responsible for saying which font-families the browser should used for specific content: if you list one or more font-families then the browser will try each of those until it finds one that supports the text it needs to style, and it checks that for every letter. If there's a single letter that isn't supported by one font-family, it'll check a next font. And if it runs out of fonts to check (for instance, you only lists a single font-family value) then the browser will just guess, and pick whatever it feels like, which you don't want it to do.
So you (and only you) get to make sure your page CSS has a correct font-stack. Especially when you rely on external font resources, it's entirely realistic that some of the time those will not be available and your font-family instruction for that font will fail: what then? So at the very least always add the generic font family, but also add one or more of the "websafe" fonts in between. Will it look perfect? No, of course not, but it will look better than a complete guess by the browser.
Keep your generic category keywords, and add some more:
font-family: Ubuntu, Tahoma, Geneva, sans-serif;
Use full font-stacks, because you don't control the internet. Plan for when it doesn't do what you want.
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.
Could somebody tell me if fonts TNR, Helvetica, Arial are safe in multilanguage website?
This website will be among others in English, Polish (polish diacritical signs), Greek (greek alphabet) and Russian (cyrillic). Will it be safe I just use for example:
font-family: Times New Roman, serif;
Should I bother about "special" Times New Roman, Helvetica, Arial for greek and russian?
It will depent if you are using web fonts (#font-face) or just a font stack that will use the local system available fonts. If you are using the second option you can safely expect that the user have the appropiate version of the font to display his language. If you are using #font-face you will have to check wich unicode points have your version of the font.
This applies to any font family, not only Times, Helvetica & Arial.
Times New Roman, Arial and Helvetica are featured within the CSS2.1 specification and so can be considered safe to use. The serif at the end of your font-family declaration is the generic family and acts as a fall back. If the browser cannot render the specified font, it will fall back to a serif font.
As for whether they support Greek and Russian symbols: that's a different matter. You'll have to check this yourself (through sites like fileformat) to ensure they include the specific Unicode range.
serif and sans-serif will be failsafe regarding that. Besides that, you need to look up if the fonts support Latin-2 (Russian, Polish) character set. For Greek this is the same but it’s not covered in Latin-1/2.
Best is to test yourself in these languages but there’s a pretty good chance these fonts support all your needs.
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.