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.
Related
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.
As I delve deeper into our next responsive website, I am exploring the options of using system fonts for phone versions. And am wondering a few things.
First would be, if we specify a font that is on the device (such as a system font), but we also have an call for Open Sans (our default body typeface), would the device still download the Open Sans typeface file? Open Sans would be listed after the system fonts in the font-family declaration.
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600">
<style type="text/css">
body { font-family: roboto, segoe, helvetica, 'open sans', sans-serif; }
</style>
Or as a #font-face call.
<style type="text/css">
#font-face {font-family:OpenSans; src: url('https://fonts.gstatic.com/s/opensans.woff'); }
body { font-family: roboto, segoe, helvetica, 'open sans', sans-serif; }
</style>
If this type of set up does eliminate downloading the font and thus decreasing the data usage to view the webpage, I am wondering if someone knows the technical aspects of the system fonts. In particular what names would be used in the css font-family declaration? Newer Androids are easy as the name is simply 'roboto', but how do we declare Segoe on Windows phone or Helvetica Neue / Lucinda on iPhones and iPads. And how does one determine which font weights are present and their values (we use 400 & 600 on Open Sans because we don't want a real heavy bold font).
Updating the question with our solution ....
This really had an oh duh answer, we just set the body css to use system fonts initially (mobile first css), then when we reach the breakpoint for laptops and desktops, use the #font-face call for Open Sans and update the body css to use it.
I found the following font-family setting giving me default system fonts on all mobile devices:
font-family: system,-apple-system,".SFNSText-Regular","San Francisco",Roboto,"Segoe UI","Helvetica Neue","Lucida Grande",sans-serif;
This css snippet (borrowed from issue on github) defaults to system font, on most platforms (OSX, iOS, Windows, Windows Phone, Android, Ubuntu):
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu;
-apple-system — San Francisco in Safari (on Mac OS X and iOS); Neue Helvetica and Lucida Grande on older versions of Mac OS X.
system-ui — default UI font on a given platform.
BlinkMacSystemFont — equivalent of -apple-system, for Chrome on Mac OS X.
"Segoe UI" — Windows (Vista+) and Windows Phone.
Roboto — Android (Ice Cream Sandwich (4.0)+) and Chrome OS.
Ubuntu — all versions of Ubuntu.
Fonts for other OS or older versions of them could be found in this article on css-tricks.
If you declare, say, body { font-family: roboto, segoe, helvetica, 'open sans', sans serif; } and the user’s device has a font called roboto installed and it contains glyphs for all characters in the content, then the rest of the font family list should be ignored. This means if some of those fonts is declared as a downloadable font with #font-face (directly or indirectly by using code provided by Google), then no download should take place. But if there is any character not present in that font, then the list should be processed further and this should result in a font download if no preceding font in the list contains the character.
In practice, browsers may implement this differently, e.g. they might always load the downloadable font, or they might fail to download it if any preceding font in the list exists in the system, even if it does not cover all the characters. You would need to organize suitable tests for each browser to see exactly how they behave. In general, if you declare a downloadable font, you should expect it to be downloaded, and you should put it first in font-family list to ensure that.
Regarding the specific font names, declaring segoe is useless. There is no such font; Segoe UI exists in many Windows systems. The name helvetica means in principle a font that is mostly available on Apple devices only, but in practice Windows, oddly enough, takes it as meaning Arial, unless the system has actually Helvetica installed. Declaring sans serif is useless; there is no such font; you probably meant sans-serif, which is the valid name for a system-dependent sans serif font.
I use Futura as the default font for my web app:
body {
font-family:Futura, Verdana, sans-serif;
font-weight: 100;
}
Ever since I added
<meta name = "viewport" content = "width=device-width">
for mobile formatting, the font has changed to a thin sans-serif font (that doesn't look like verdana) on my Android device. (However, the font has remained the same for iOS.)
How can I ensure that the font stays Futura/choose a specific font for the mobile version of the site?
if font is not available on device it will change it to next and next. try to use Google font its safe. though I don't love google font since its not sharp enough on mobile devices specially
you can add any of the font (same use as website) apply in your mobile application.you can use ttf file to set font of mobile application easy.
I hope its useful to you.
I'm trying to make a web app without the use of web fonts to keep browser requests at an absolute minimum.
At the same time, I'm trying to use only "good-looking" slim fonts for Headings etc.
This is basically no problem: iOS and Mac OS have HelveticaNeue-UltraLight natively, and Windows (Phone) has Segoe UI (WP) Light.
The fonts do not look the same, but they give a similar overall style and I don't have to use a single webfont. All can be addressed directly via css "font-family".
Is there a way to get a similar appearance on Android? Android has Roboto Light, which would perfectly serve my requirements, but it seems impossible to simply address this via css styles without webfonts.
You can use
font-family: "HelveticaNeue-UltraLight", "Segoe UI", "Roboto Light", sans-serif;
Each OS try use font from this list in course. When the browser finds a font that is present in the system, it will start to use it. iOS will use the font "HelveticaNeue-UltraLight" and ignore other. Android will use the font "Roboto Light" ...
Use:
font-family: sans-serif-light;
Edit: Apparently, this only works on HTC devices. But it's a start.
Edit2: Looks like Google has changed this with the recent Android 4.4 update, because now it works on my Nexus 7 as well. Not sure about other devices though.
Download Roboto and link to it in css like this:
#font-face {
font-family: 'Roboto Thin';
src: url('roboto/Roboto-Thin.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
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.