I wanted to know the default behavior of the browser when it comes to fonts. if the CSS does not specify the font-family property (or it is specified, but the font is not installed) then what determines the default font?
are there fonts that are universal among OS's (times new roman, arial, etc...) or is it a universal font type (san-saraf,saraf, etc...) that all OS"s share (meaning a default will fallback to font type and not a specific font)?
The answer to this question depends on the users browser. Each browser has a default font. The user can then change this value to some other more desirable font to be defaulted in case of no font-family tags or no font installed on site. But it is browser specific.
Related
What's the difference between ui-sans-serif and sans-serif fonts in font-family in CSS? And ui-serif vs. serif? And ui-monospace vs. monospace?
Where does system-ui fit into this? Would you use it for all 3 types of fonts, and where would it go in the list of fonts?
I usually see the "ui-" variant coming first in the list of fonts in font-family in CSS, and the other coming last. Something like font-family: ui-sans-serif, (more fonts here), sans-serif. What's the point in doing that if the first matched font will be used? Since ui-sans-serif is a generic font, won't it always be matched and there's no need to add any fonts after it?
ui- generics should map to the default fonts of the system while non ui- generic ones map to the default of the browser.
A web-browser may have the same default font set for all platforms, however different platforms do have different default fonts.
I have two website hosted on different server, there are elements that i have set the same font-family as 'TheSans', I am sure they both are not overwritten, the 'theSans' is the real and final value in css, but the font of these 2 pages just look differently with same browser. I checked on my pc and found that I don't have this 'theSans' font installed, so what actually happened there?
if the browser does not find the font, what font it will use? why the behavior is different in same browser.
If a browser doesn't have the font, it will fall back to the other options specified in the css font-familyrule. If no addition options are specified it will just use its default. eg. below it will use Helvetica if installed, if not it will use arial, if no arial it will just pick what every sans-serif font it has
font-family: Helvetica, arial , san-serif;
Link about font-family
Now that being said, wouldn't it be nice to give the browser the font if it doesn't have it? And that is where the #font-face CSS rule comes in
related question here
About #font-face
With CSS, if you specify font-family: monospace;, my understanding is that the browser chooses its default/preferred monospaced font.
If that's correct, how can you determine which monospaced font your browser is using?
There are 5 generic families that can be used: "serif", "sans-serif", "cursive", "fantasy", and "monospace". When a browser sees one of those, it asks the operating system for the default font in that family.
Thus, which font a web browser uses is OS-dependent.
See Mozilla's documentation on font-family for details.
Use DevTools
Select HTML element
Search for "Rendered Fonts"
Demo
In my case, that was lucida console font. Maybe helps someone)
If I have a custom font and I call it 'verdana', will that conflict with the browser's built-in verdana font? When I do:
font-family: 'verdana';
will the browser use my custom font or the built-in one?
Yes, you can use a custom font name that may coincide with the name of an installed font. It might be confusing, though, and might look suspicious (using a font illegally) to use a name like Verdana, if someone peeks at your code.
The CSS3 Fonts draft says: “If the font family name [in #font-face] is the same as a font family available in a given user's environment, it effectively hides the underlying font for documents that use the stylesheet. This permits a web author to freely choose font-family names without worrying about conflicts with font family names present in a given user's environment.”
You may find parts of this article interesting: http://www.practicalecommerce.com/articles/3080-How-Browsers-Manage-Fonts.
The short answer is that the browser should use whatever version of Verdana you have installed. The exception here is if you are using "src: url()", then it should load the font file from that URL. A good resource if that is the case: http://www.html5rocks.com/en/tutorials/webfonts/quick/.
If you're wanting to use your font and you worry that some browsers may just up and decide to use the local Verdana, you can rename the ttf or eot on your server and just use Verdana-Mine as the font-family and src as url('verdana-mine.ttf').
In Firefox when a page loads it shows a default font (such as Times New Roman) for a moment (depending on connection speed) before it renders using the specified font-face. I understand this cannot be faster but how can I set, for example, Arial as the default font before it changes when the font-face loads?
Specifying an extra font in your font-family property will solve your problem.
font-family: "YourFontFaceFont", arial;
This will cause arial to be used until "YourFontFaceFont" is available.