A recent trend in CSS is to use a "system" font stack, which utilizes fonts designed for the user's operating system. Typically this looks something like this:
body {
font-family: -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell,"Helvetica Neue", sans-serif;
}
This type of font-stack has been adopted by Medium, Wordpress, Github, Bootstrap, Booking.com and many others. All of them include "Roboto" for Android version 4 & up. My question is, why? What would happen if "Roboto" was removed from this stack?
From my testing, even when you switch system fonts on an android device (in settings), the browsers default "sans-serif" font is always Roboto.
Is there any device or browser out there that does not set Roboto as the default sans-serif font when it's available? If not, why is Roboto included in these font stacks at all?
... why is Roboto included in these font stacks at all?
The answer is quite simple: to make sure.
Here's how you should translate it:
If Roboto font family is installed on the system (or the browser is capable of applying it) from either own or loaded CSS #font-faces, it should be used when none of the afore mentioned font families resolve successfully.
Does it matter if any current device doesn't actually make it until Roboto because most resolve the same font earlier in the stack, since it's default system font? Not really. Because nobody knows what new device might get launched next year and that one might benefit from specifying Roboto in the stack.
Considering the possible impact on the page, font-family is really not the place where you should optimize your app. Besides, the font family list can be 1km long. Everything past the first font that resolves is ignored, so it's, actually quite cheap from a technical point of view.
Related
I want to know what is the default font that is used by Android OS for my app if i didn`t specify any font to be used.
This post didn`t help
Thanks in advance for any help
The default font varies phone to phone. The default font can be set by the user on certain varieties of Android (like Samsung phones), and on others the default font is set and cannot be changed by the user. There is no single default font.
For the devices that run stock-Android, according to Material Design Guidelines:
Roboto is the standard typeface on Android.
But in case that you use languages not covered by Roboto (check the same link to see all languages covered by it), the typeface will be switched to Noto
Noto is the standard typeface for all languages on Chrome and Android for all languages not covered by Roboto.
That being said, the actuals fonts differ depending on the place where they are used (see below some examples from the same guideline)
App bar
Title style, Medium 20sp
Buttons
English: Medium 14sp, all caps
Dense: Medium 15sp, all caps
Tall: Bold 15sp
For the pre-Lollipop devices, the same rules apply, but you might notice some changes between different versions since Google refined Roboto as the time passed.
However, all the above are true only for stock-Android, the rest of them having a predefined typeface/font based on the device or manufacturer. As Eli Sadoff stated, most of these devices let the user pick a default font which will be used across all apps (without exceptions), even if you have a custom font for your app.
PS: Make sure to read everything form the provided link because you'll find more useful information.
I'm wondered why it doesn't work in chrome mobile browser v47 (latest atm), since it perfectly works at desktop one including different mobile device modes in developer tools.
Is there workarounds exist? At least, what it's original name I can find for the download?
Check this up:
<style>
* {
font-family: cursive;
}
</style>
<div>
I should be cursive even on mobile devices
</div>
JSFiddle
Notice, it works in developer tools but doesn't from real mobile device one.
Never rely on generic family keywords to actually be "a specific font". There is no requirement for the browser to load a font that matches the keyword, technically it just needs to load "a" font. The CSS specification is very explicit about this:
"Generic font families are a fallback mechanism, a means of preserving some of the style sheet author's intent in the worst case when none of the specified fonts can be selected. For optimum typographic control, particular named fonts should be used in style sheets.
"All five generic font families are defined to exist in all CSS implementations (they need not necessarily map to five distinct actual fonts)."
With my emphasis added to the part that explains that you are responsible for getting the right font loaded.
I was encountering this problem as well.
When you use font-family: cursive you're actually allowing the browser to decide which font-family it generates for 'cursive'.
The solution is to be specific with your font-family instead of using the generic font.
serif eg. Times New Roman, Palatino Linotype, etc.
sans-serif eg. Arial, Helvetica, Verdana, etc.
cursive eg. Comic Sans MS, Lucida Handwriting, etc.
fantasy eg. Impact, etc.
monospace eg. Courier New, etc.
So for cursive you'd want to specify Comic Sans MS, Lucida Handwriting, or another specific type that you were intending to implement.
As pointed out here and here, Google updates the Roboto font periodically to respond to criticism, add glyphs, improve legibility, and so on. Are the metrics locked? Do any of these changes cause text to flow differently?
In other words, can an Android app that's compatible with ICS (API 14) and up use Roboto for its text and trust that the labels will take the same amount of space on ICS and Lollipop? Provided, of course, that the screens have the same properties (dpi, dimensions, resolution, etc.)
A system font is effectively part of a windowing system's public API. If the metrics change, then an app which is coded to expect a piece of text to fit within a certain box may break.
The Roboto font is as fundamental to Android as Arial and Verdana are to Windows. As Microsoft puts it,
Note that some values associated with UI fonts and default fonts used in Microsoft apps are locked. UI fonts are used to render UI elements like captions, dialogs, and menus. Very few changes are made to these fonts, given their high visibility and frequent use.
A roboto developer has responded to the issue I filed on the roboto github, saying
I understand that metric compatibility would be helpful, but we don't have any plans for metric compatibility. The fonts are still far from stable, and it's too early to consider metric stability.
I'm trying to render code in monospace on my personal web site. The following CSS style works on desktop browsers (and Firefox for Android) without issues, but fails on Chrome for Android:
.code {
font-family:Consolas,"Courier New","Liberation Mono",monospace;
background-color:#F0F0F0;
}
Adding Droid Sans Mono does not help:
.code {
font-family:"Droid Sans Mono",Consolas,"Courier New","Liberation Mono",monospace;
background-color:#F0F0F0;
}
Simply using font-family:monospace works correctly on Chrome for Android, but by doing so, I lose the ability to use specific fonts on desktop operating systems.
How do I get code to display with a monospaced font on Android without losing the ability to use specific fonts on other platforms? I don't want to use custom fonts as suggested by the answer to this question, I just want to use the monospaced font provided by the system.
For reference, the style file is here.
Chrome can't access Droid Sans Mono by specifying the name that way, monospaced is mapped directly to the Droid Sans Mono font already.
It now works after updating to Chrome 30. Looks like a browser bug after all...
The default monospace font can be modified in the web browser settings. It also depends on the operating system being used.
To ensure consistent results, you need to load your own font.
What worked for me is:
#import url('https://fontlibrary.org/face/dejavu-sans-mono');
.monospace {
font-family: 'Dejavu Sans Mono', monospace;
font-variant-numeric: tabular-nums lining-nums;
font-kerning:none;
}
I am doing :
<div class="testing"
style="font-family: Carrington,'Black Rose', Champagne, 'England Hand'">testing</div>
All these families are embedded using #font-face. While Chrome on Windows and Linux loads all the font families mentioned in the fallback(checked via the network load option in the console), it does not do so on the Android tablet(this was checked as I created further divs after this one with font families Black Rose and witness the FOUT issue on chrome).
Is this the universal behaviour of Chrome on Android that it will load only the first family found and neglect the others?
The reason it only loads the first font-family found is because it found it.
The reason you would add more fonts to the font family is for the "just in case" possibility that the preferred font is not found. That is why most font-familys look like:
font-family: 'Trebuchet MS', Verdana, Arial, sans-serif;
Browser Interpretation:
If the computer browser doesn't have the "Trebuchet MS" font then load Verdana. If it doesn't have Verdana then load Arial. If for some odd reason Arial isn't a choice then load the default sans-serif font.
What is really bizarre about this is not the way the font family functions. I think most people understand how that works.
What's really weird is when you are using a common system font like trebuchet ms that IS on the system, but the browser can't find it.
I've had this problem with Trebuchet. For some inexplicable reason, on my Android phone, my regular browser has no trouble with it, but Chrome can't do it.
The font is there. But Chrome can't see it.