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.
Related
I need to dynamically make an SVG in my web app and to do so I'm making an SVG in Corel and modifying that template file in Node.js as needed. This works except for fonts. For this project I need my text as text, not curves, because I need to modify it. I'm using Century Gothic. I was using embedded fonts, but apparently those are no longer supported by Chrome and Edge. However, if I used linked fonts the file renders improperly if the user doesn't have the font installed. In either of these error cases the browser defaults to Times New Roman. What can I do to get Century Gothic to render in all browsers in an SVG?
You'll need a web font. Century Gothic is not freely available, so you have to either buy a license, or use an open source alternative. Muli seems to be considered as a good alternative. For how to use an external font provider, see this.
After installing libgd on RedHat Linux, I found the path to .ttf fonts and used the full pathname to a DejaVu .ttf font (in 'set terminal gif font...") to create a .gif file from gnuplot. It looks good in a Firefox window, but when I change the size, it looks bad, as though the font is not scalable.
I am using the default binaries. Do I need to recompile gnuplot with different settings to make it scalable? I get no errors or msgs when the image is created from gnuplot (i.e. it finds and uses the .ttf file; I know because I tried several fonts and the image responded accordingly, with .pfa fonts also).
The gnuplot documentation says that TrueType fonts are fully scalable. Maybe I don't understand what scalable means. I had a similar problem with SUN OS, and my solution was to create a postscript (.eps) file from gnuplot and then convert it to .gif, and then it was scalable, but I don't have such a conversion utility on Linux (yet), and it seems like an unnecessary step.
I don't have the actual code/output in front of me, but I can add some if it would help. Also, I can't find any arial.ttf fonts on the system. Maybe that is a clue to the problem.
I heard good things about pngcairo (to avoid using gd), but 'set terminal' does not list it as an image type.
This is not a definitive answer, but it allows to show me a picture of the situation on my machine.
This plot was generated as gif using gnuplot 4.6p5 and Suse Linux 13.2.
The upper plot shows labels written in DejaVu, left using the full path to the TTF file, right using the name of the font. (DejaVu is an installed font here.)
The lower plot shows the same, the font is from the game Minecraft (i.e. very pixelated). I do not get any error message about missing fonts or similar, but gnuplot uses its default font here, but not what I want. More interesting: When I do not specify the font, I get Liberation Serif...
However, it seems my system ONLY uses fonts, regardless if referenced by name or path, when the font is correctly installed. Nevertheless, also the default font is smooth and scalable. (the gnuplot help says, gd has some not scalable build-in fonts, which may be used in your plot)
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?
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 am investigating the usage of SVG fonts in #font-face declaration. So far, only Safari 4 and Opera 10 seem to support it. Firefox 3.5 does not support it but there is a bug report but no fix has been supplied yet (though there are patches).
I am wondering, with #font-face support in major browsers, what is the advantage of using SVG font format in lieu of TTF/OTF/EOT formats? The only advantage I can glean from the discussion linked above was that you can add your own missing gylphs to fonts that do not support them yet.
Is there any other reason to specify SVG fonts in CSS?
It seems to be the only way to use web fonts on Mobile Safari. So that's a pretty big advantage if you're developing for iPhones and iPads. Font Squirrel's #font-face generator can create the appropriate SVG file and CSS syntax from any OpenType font.
The W3C states these advantages:
One disadvantage to the WebFont facility to date is that specifications such as [CSS2] do not require support of particular font formats. The result is that different implementations support different Web font formats, thereby making it difficult for Web site creators to post a single Web site using WebFonts that work across all user agents.
To provide a common font format for SVG that is guaranteed to be supported by all conforming SVG viewers, SVG provides a facility to define fonts in SVG. This facility is called SVG fonts.
SVG fonts can improve the semantic richness of graphics that represent text. For example, many company logos consist of the company name drawn artistically. In some cases, accessibility may be enhanced by expressing the logo as a series of glyphs in an SVG font and then rendering the logo as a 'text' element which references this font.
But the point of a common format doesn't really count because of the lacking browser support.
svg webfonts cannot work within an offline webapp. You can see an example here: http://straathof.acadnet.ca/beta2.2 Save this file to an idevice homepage, turn on airplane mode and open it. The svg fonts and the naming system used cause the font url to fail.
hopefully Apple fixes that soon.