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;
}
Related
I have a strange issue which Chrome.
I've defined my font-family like this:
font-family: Tahoma,Helvetica neue,Helvetica,Arial,sans-serif;
This works just fine in all browsers on Mac,Windows,iOS and Android. Excpet of Google Chrome in Android.
Via remote debuggin, I figured out that Chrome renders the font Roboto. I have absolutly no idea why this is happening, since I never used this font in my CSS.
Does anyone know why Chrome is doing this? Alle other browsers are using Tahoma but Chrome uses Roboto without any particular reason.
I'm creating an universal HTML5 app for iOS and Android, which is a backup to show a client if the native ones get delayed. In just a margin of the time I need for the native ones I could create a HTML5 version. However, to get a more distinctive look between Android and iOS I would like to target the correct font-families.
While iOS uses Helvetica neue (lighter/font-weight: 100), Android uses Roboto (Light/Font-weight:300).
Now I'm seeking the correct way to target them both in a single CSS stylesheet.
I'm unsure whether this would be enough/correct, I guess not.
Font-family: font-family: HelveticaNeue-Light, Helvetica Neue Light, Roboto-light.
Thanks!
Since Roboto is default installed on Android and Helvetica neue default on iOS 7, webfonts aren't necessary.
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 developing an app in phonegap and I'm now searching for days to solve this problem. I checked every other topic related to custom font faces but no one has already faced my problem.
The matters is that I want to show farsi fonts in my app. it works well in PC , android browser and phonegap apps in android 2.x and 4.4 (kitkat) but all I have in android 4.1 and 4.2 is default farsi fonts.
here is my code but I tried every other possible variations even using Base64 encoded fonts into my css.
#font-face {
font-family: 'B Yekan';
src:url('../fonts/byekan.eot?#') format('eot'),
url('../fonts/byekan.woff') format('woff'),
url('../fonts/byekan.ttf') format('truetype');
}
h2,h1,h3 {
direction:rtl;
font-family:B Yekan,'B Yekan'!importan;
}
I tried to move the fonts into asset folder or even put fonts near my css and index.html, no chance. I think it's a bug with android 4.x webview (except kitkat) but I have no idea what I can do for this. every kind of help is appreciated.
I experienced the same. The strangest of all is that if the font is applied to general tags like body or label it works! Just not when using the H or P tags.
So it can't be a render or location issue, but I haven't found a solution yet either.
UPDATE:
It seems like Android 4.2 has an issue with text-rendering set to optimizeLegibility. Which in my case foundation does in the background. Setting it to auto solved it here.
Found it here:
font-face on android 4.0.x doesn't work
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.