Default fonts on my site are defined in an external stylesheet as:
body { font-family: Arial; font-size:62.5%;}
This works fine in Windows and Mac.
To test my site I installed Linux Mint 13 (Mate) and loaded a selection of browsers from the Repository. I made two installations on separate PC’s. I left all browser settings as their defaults.
Firefox, Opera, Konqueror and Reconq displayed my pages as expected.
Web (Epiphany) overrides the default font style (i.e. it is not Arial) and also displays too large a font size.
Midori displays too large a font size. (installed in windows, midori displays the correct font size).
I believe Web (Epiphany) is designed principally for the GNOME desktop environment and maybe this is a factor or do I need to design differently for these two browsers to make them display the fonts correctly in Linux?
It seems that some distributions of Linux don't include the Arial font. I added Liberation Sans as an alternative font and this seems to be okay.
I don't understand however why some of the browsers didn't need this. Unless they include the font with the browser or accurately map some alternative?
Related
I have a small but annoying bug with Google Docs in Firefox with font rendering. Bug details fully described on Bugzilla, briefly -- in Google Docs (and Sheets) Firefox substitute two fonts: sans-serif 'Arial' and monospace 'Courier New' with one serif font (that is Bitstream Vera Serif in my case) (see picture below).
But this bug is absent in Chromium.
Temporary workariound -- disabling loading of the 49-sansserif.conf file (part of the fontconfig package) via removing symlink, fixes the bug.
So my questions is:
Does fontconfig mechanism is used by both browsers mentioned above?
Why Chromium recognized 'Arial' font as 'Arial' and 'Courier New' as 'Courier New', but Firefox not?
Yes, definitely. Bug was disappear after reinstaling ttf-bitstream-vera package, so mechanism of browsers interaction with the fontconfig is not affect to font rendering in this case.
Trivia: at this morning I decide to remove Bitstream Vera Serif font, with which Firefox substitute Arial and Courier New, I planned to see which font Firefox will use next, if Bitstream Vera Serif font will no exists in system. So I removed whole ttf-bitstream-vera package, and fonts in Google Docs began to render normally; moreover, after I installed ttf-bitstream-vera again, Google Docs works orrectly.
We have a web application. The application runs on both Windows and Linux.
On windows, the application works fine (Layout is proper etc.)
On linux, the complete layout is haywire. I figured there is a font's problem on Linux.
On my JSF page, I have specified Calibri font. I am using JBoss server.
How can I ensure the layout on windows and linux is identical. I need to eliminate the Fonts problem.
I tried installing the Calibri fonts on the server, but this becomes a pre requisite before any installation which surely I would like to avoid.. Infact even after installing I could not notice changes in the layout (this indicates app failed to read the font).
Kindly guide.
Is it possible to bundle fonts in JBoss and ship it along with the application. If yes, how can I instruct my application to use fonts present inside JBoss.
You can use the #font-face CSS, as described here:
Define a new font, named myFirstFont:
#font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
And use it to style an element:
.myFirstFontStyledThing {
font-family: myFirstFont;
}
This means that the font file must be available from the web. So you either host it in your server (besides your images perhaps - BUT BEWARE THE LICENSING OF THE FONT) or use Google fonts: http://www.google.com/fonts/
if you are defining fonts you are using most probably a css line like that:
font-family: Arial, Calibri, sans-serif;
css is 'cascading' so in this case if neither arial nor calibri are found sans-serif evaluates to a default sans-serif font on your machine - on Windows - Arial on Mac - Helvetica, on Linux it might be something else.
A good tip would be to use Google's Fonts this way you make sure everyone gets the same font and you don't need to install anything on your JBoss and save you some traffic couse it uses CDN!
I was searching through the net and couldn't find the exact answer.
How do browsers get the exact .ttf file for a font family specified in the css? Does it already have it in its code or does it pick from the user's system. I guess we can always specify the custom font files using the #font-face but what about the normal general fonts like arial etc?
The process is obviously different between browsers and operating systems, but in short, browsers pick the font from the system, and if it’s not installed, the font will be replaced with another similar font.
I noticed that math.SE uses mathjax and has equations in a blue color.
Notice how the infinity sign is colored aswell.
However one would expect this to remain black because - as mentioned here: How to change equations color in MathJax - those symbols are in fact images who's color is not effected. Like so:
So, how do they change the color of those images as well? I thought it was impossible.
MathJax should use image mode only in a few rare cases these days. The main one is when you use Firefox to view local files (via a file:// url) and MathJax is not in the same directory as the HTML file being viewed. In this case, Firefox's same-origin policy considers MathJax to be in a separate domain, and so fails to be able to access the web-based fonts since it considers that to be cross-domain access. So MathJax uses image fonts as a fallback because it can't use web-based fonts. I'm guessing that is what is happening for you.
Math.SE doesn't have that problem since it is not a file:// url and Firefox doesn't have trouble recognizing what domain is what, so you get actual web-based fonts and not images and they can be colored properly (unlike the images). Math.SE doesn't have to do anything special to make that happen, and you are not seeing colored images, but actual fonts. That is the difference from your uncolored examples.
The solution for the Firefox local-file problem is to install the STIX fonts, or MathJax's own OTF fonts, in your system's fonts folder. You can find the MathJax fonts in the MathaJax/fonts/HTML-CSS/TeX/otf directory of the MathJax distribution that you have installed locally. If these are available as actual fonts on your system, MathJax won't have to use web-based versions, and so it can avoid the Firefox issue with the same-origin policy. This will also speed up any page using MathJax anywhere (like Math.SE) since it won't have to download the fonts over the web.
I have the following specified on body:
body {
font: 63.5% Helvetica, Arial, sans-serif;
In Virtual Machines, I am unable to setup an IE7 installation to reproduce this problem, but on others' machines, some with IE7 render the font on the page abnormally large. The actual CSS and html are hundreds of lines long across multiple files, but I'm at a loss as to why only CERTAIN IE7 environments would produce this behavior.
Any thoughts on where I should be looking?
Zoom is 100% and text-size is medium. Although text-size IS medium, setting the text-size to anything larger than medium on my machines and VMs produces the same exact problem: overlapping text and images. Hmmm....
Display size in windows is set to normal (96dpi)
The following article was helpful for me:
http://www.lealea.net/blog/comments/web-dev-problem-win-ie-on-widescreen/
Basically IE has a "feature" for some screens (likely dell) that messes up how certain pages render. The fix has to do with turning off this feature via registry.
You can try it with the following command (start -> run):
reg add “HKCU\Software\Microsoft\Internet Explorer\Main” /v UseHr /t REG_DWORD /d 0×00000000 /f
Dell screws with font installations, for some reason, and will fuss up a number of fonts if any "Dell software" is installed.
This is a bit of shot in the dark, but you could check what the Text Size is set to in IE. If you go View Menu > Text Size and reset it to Medium.
Wild guess, but it might have something to do with the DPI setting. I'm pretty sure IE7 is using that setting, and if that setting is not the same on all your environments that might explain your problem.
On Windows XP you change it by going to Desktop -> Properties -> Settings -> Advanced
Here you can chose between normal size (96 dpi) and large size (120 dpi).
Do the users have a differet text size set?
(source: microsoft.com)
I ran into this problem lately, and it turned out that it was due to text size.