As a part of offering example themes for a website, to show it is possible with LESS, I am using a cursive font-family. For example:
#base-font-family-fonts: 'Lucida Handwriting', 'Comic Sans', 'Comic Sans MS', 'Chalkboard', cursive;
I've tried naming many different cursive font, but not even the fallback "cursive" works on the stock Android browser (Samsung Galaxy S4).
Do I really need to download a font to the browser on Android? Is there not a single one built in?
Here is a JSFiddle with android safe font families and unfortunately you will see there is not a stock cursive font.
If I were you, I would use Google Fonts to make your cursive text look consistent across all browsers and operating systems though.
http://jsfiddle.net/9z3tD/
<div style="font-family: sans-serif; font-style: normal">Regular</div>
<div style="font-family: sans-serif; font-style: italic">Italic</div>
<div style="font-family: sans-serif; font-weight: bold">Bold</div>
<div style="font-family: sans-serif; font-weight: bold; font-style: italic">Bold-italic</div>
<div style="font-family: sans-serif-light; font-style: normal">Light</div>
<div style="font-family: sans-serif-light; font-style: italic">Light-italic</div>
<div style="font-family: sans-serif-thin; font-style: normal">Thin</div>
<div style="font-family: sans-serif-thin; font-style: italic">Thin-italic</div>
<div style="font-family: sans-serif-condensed; font-style: normal">Condensed regular</div>
<div style="font-family: sans-serif-condensed; font-style: italic">Condensed italic</div>
<div style="font-family: sans-serif-condensed; font-weight: bold">Condensed bold</div>
<div style="font-family: sans-serif; font-weight: bold; font-style: italic">Condensed bold-italic</div>
Related
The problem is:
Text from HTML file not showing on Android but showing on iOS
I have notice that there is something not showing on my page when I access it on Android devices but showing on iOS Devices. I mean that on iOS Devices only shows the text that needs to be seen by the user, but on Android it shows the whole HTML file (also including the tags).
Maybe in the HTML File is the problem.
Here is the HTML:
<div>
<p style="margin-bottom: 14pt; line-height: normal; font-size: 14pt;"><span style="font-family: Verdana;">The APP</span></p>
<p style="margin-top: 14pt; margin-bottom: 14pt; line-height: normal; font-size: 14pt;"><span style="font-family: Verdana; font-weight: bold;">Date: 12.03.2022</span></p>
I have two links in my html newsletter that turn to the default blue no matter what I seem to do. Anyone know of any fixes.
The <span>, <font> and <strong> tags were all fixes I've read about but none seem to work.
Blue Links
a {font-family:'Roboto', sans-serif, Helvetica, Arial !important; font-size:16px; color: #EF8152 !important;; font-weight:300; text-decoration: none;}
<a href="#" style="margin:10px 0px 40px 0px; font-family:'Roboto', sans-serif, Helvetica, Arial !important; font-size:1em; color: #EF8152 !important; color: #EF8152; font-weight:300; line-height:1.0em; font-size:1em; text-align:center;">
<span style="color:#EF8152 !important; color: #EF8152;">
<font color="#EF8152">
<strong style="text-decoration: none; color: #EF8152 !important; color: #EF8152;">
View in web browser.
</strong>
</font>
</span>
</a>
This is bc of Outlook App adding styling for links. This is also an issue on Windows 10 and I believe Comcast email.
Try adding this code in your CSS
a:link, span.MsoHyperlink {
mso-style-priority:100 !important;
color:#000000 !important;
color:#000000;
text-decoration:none !important;
}
You shouldn't need all those extra tags or !important references in inline css. Something like this should work, though I get the sense you've already tried it:
<a href="#" style="margin:10px 0px 40px 0px; font-family:'Roboto', sans-serif; color: #EF8152; font-weight:300; line-height:15px; font-size:15px; text-align:center; font-weight: bold; text-decoration: none;">
View in web browser.
</a>
Two other things to try:
Get rid of the styles for a in the <head>.
If you're inlining any CSS, turn that off / don't do it.
If this still doesn't work there's been chatter about this being a bug in Outlook app, both Android and iOS apps are mentioned.
I have to parse data from xml.this is my xml- or its url is: http://mobileecommerce.site247365.com/admin/catdata.xml
<Cat_Name>News for the day</Cat_Name>
<Cat_Desc>
<div style="text-align: center;"><span class="Apple-style-span" style="font-weight: normal; font-size: medium; "><img src="http://mobileecommerce.site247365.com/admin/assetmanager/images/gns_header.jpg" alt="" align="middle" border="1px" height="90" width="550"></span></div><span class="Apple-style-span" style="color: rgb(105, 105, 105); font-family: Verdana; font-size: 13px; font-weight: normal; "><br><div style="text-align: center;">Yes we are coming at E & I? Are you?</div></span><br><h1 style="font-weight: bold; "><span style="font-family: Verdana; font-size: 14pt; ">News for the day...</span></h1><span style="color: rgb(105, 105, 105); "><span style="font-family: Tahoma; font-size: 10pt; ">Template Mobile Sites for IC: http://icmobilesite.vidushiinfotech.net/</span><br><span class="Apple-style-span" style="font-family: Tahoma; font-size: 13px; color: rgb(105, 105, 105); ">Promotional valid till 30 Sept 2011: MOBILE WEBSITE (Base Product Mobile CMS) for JUST $159<br></span></span><br><span style="font-family: Tahoma; font-size: 10pt; color: rgb(105, 105, 105); ">Mobile Template link: </span><span class="Apple-style-span" style="font-size: 15px; font-family: Calibri, sans-serif; color: rgb(105, 105, 105); ">http://newsletter.vidushiinfotech.net/Mobilesite/</span><br><span style="font-size: 10pt; font-family: Tahoma; "><span style="font-size: 10pt; "><br><span style="color: rgb(105, 105, 105); ">With the promotion on Business Edge and eFusion still running successful in e market place - $ 499</span><br><span style="color: rgb(105, 105, 105); ">Check out some of the latest site launch on: </span><br><br><span style="color: rgb(105, 105, 105); font-weight: bold; ">http://www.randallcontracting.co.uk/Pages/Default.aspx </span><br><br><span style="color: rgb(105, 105, 105); font-size: 10pt; "><span style="font-weight: bold; ">Category</span>: Building & Construction</span><br></span><br></span><div style="color: rgb(105, 105, 105); text-align: left; "><span style="font-size: 10pt; font-family: Tahoma; ">Description: WELCOME TO RANDALL CONTRACTING Randall Contracting is a family-run contracting SME which has been servicing London and the South East since 1956. Working closely with our Clients and external Design Consultants, we place great emphasis on a safe, positive, practical and common sense approach to our projects. Our delivery methods have resulted in an extensive volume of repeat business from both Private and Public Sectors. Safety and Environmental concerns are a high priority on all our contracts and we continually strive to source innovative working methods and solutions. Our equipment is regularly updated and maintained to ensure minimal environmental impact.</span><br><br></div><span style="color: rgb(105, 105, 105); font-weight: bold; font-family: Tahoma; "><span style="font-size: 10pt; "><br></span></span><br>
</Cat_Desc>
i added one snap for first cat_name.Any way to uploaded whole cat_description in webview or any other view in android or i need to parse one by one and display one by one.
this image has tag data
any help would be appreciated.Thanks In Advance
Well Guys i got the Answer that is , we just have to save to the whole XML (with HTML tags) in an String and then pass that string to the WebView. It will show all your data. Its is because WebViews Understands only HTML or XML so when we pass them our HTML string in XML format.. It Understands and display our content as its is we wanted.
Can anyone tell me what are the bundled fonts on most Android devices, specifically for web pages?
Just like Windows has their bundled fonts or Mac font lists, what are the fonts that come with most Android phones and tablets? Can anyone point to a list on the web?
I'm making web pages and want to set up my CSS to degrade gracefully from using newer fonts to just plain ol' "sans-serif" and "serif" font families. Thx.
Expanding upon Grstmo's answer:
system_fonts.xml defines mapping from font-family to actual font files. So let's try these:
<div style="font-family: sans-serif; font-style: normal">Regular</div>
<div style="font-family: sans-serif; font-style: italic">Italic</div>
<div style="font-family: sans-serif; font-weight: bold">Bold</div>
<div style="font-family: sans-serif; font-weight: bold; font-style: italic">Bold-italic</div>
<div style="font-family: sans-serif-light; font-style: normal">Light</div>
<div style="font-family: sans-serif-light; font-style: italic">Light-italic</div>
<div style="font-family: sans-serif-thin; font-style: normal">Thin</div>
<div style="font-family: sans-serif-thin; font-style: italic">Thin-italic</div>
<div style="font-family: sans-serif-condensed; font-style: normal">Condensed regular</div>
<div style="font-family: sans-serif-condensed; font-style: italic">Condensed italic</div>
<div style="font-family: sans-serif-condensed; font-weight: bold">Condensed bold</div>
<div style="font-family: sans-serif-condensed; font-weight: bold; font-style: italic">Condensed bold-italic</div>
<div style="font-family: serif; font-style: normal">Serif Regular</div>
<div style="font-family: serif; font-style: italic">Serif Italic</div>
<div style="font-family: serif; font-weight: bold">Serif Bold</div>
<div style="font-family: serif; font-weight: bold; font-style: italic">Serif Bold-italic</div>
<!-- "Droid Sans" actually gives you Roboto. -->
<div style="font-family: "Droid Sans"; font-style: normal">Droid Sans Regular</div>
<div style="font-family: "Droid Sans"; font-weight: bold">Droid Sans Bold</div>
<div style="font-family: monospace; font-style: normal">Monospace Regular</div>
http://jsfiddle.net/9z3tD/4/ =>
(tested on android 4.2)
EDIT: "Droid Sans" in the screenshot is clearly Roboto.
The config supports it but turns out the underlying file is a simlink: DroidSans.ttf -> Roboto-Regular.ttf, DroidSans-Bold.ttf -> Roboto-Bold.ttf
EDIT: It doesn't seem to matter whether I quote the family names (http://jsfiddle.net/9z3tD/9/ renders the same). CSS distinguishes between generic keywords like serif and quoted "serif" which refers to a font whose name happens to be "serif"; but the xml config makes no distinction so I guess in android either syntax refers to a font whose name is "serif". But there may be a difference if you create a custom WebView and configure it to map generic keywords to other fonts (setSerifFontFamily() and friends).
Then there are fallback_fonts.xml. These have no names; e.g. you CAN'T say font-family: "Droid Sans Fallback".
But all of them are suppossed to be tried for every missing glyph in other fonts. Presumably one can even choose a subset using font-variant of "elegant" or "compact" and by setting text lang="ja"?
However I don't see Droid Sans Fallback being used at all so perhaps fallbacks don't work in WebKit :-(
Disclaimer: The above applies to stock Android, using stock browser and/or Chrome. I believe it also applies to WebView (with default config) but haven't tested.
In theory manufacturers may use other fonts, e.g. I heard rumors Samsung does it. In practice screenshots on all android devices BrowserStack had all — including Samsungs — look to my untrained eyes to be Roboto or Droid, the differences being just android releases...
However here is Galaxy S3 caught not aliasing Georgia to serif so something differs.
Firefox is a good example of a browser doing it differently — they switched to Open Sans and Charis SIL Compact, then replaced Open Sans with Clear Sans.
The full config is in libpref/init/all.js and is language-dependent.
As far as I can tell, Firefox disregards the system_fonts.xml's aliases, e.g. Georgia results in a sans font.
OTOH, older versions (tested 30, 34) allowed you to refer to system fonts by name, even to Droid Sans Fallback but this doesn't work on FF 36, 37 (these 2 results are for http://codepen.io/cben/pen/VYgPEE, use of AdobeBlank means that when you see chars, that font was used).
See also relevant answer about fonts available to apps.
This has been answered here: How to retrieve a list of available/installed fonts in android?
There are only 3 fonts available as part of Android; normal (Droid Sans), serif (Droid Serif), and monospace (Droid Sans Mono).
From Android 4.1 you can use this for example :
font-family: sans-serif-light;
http://www.granneman.com/webdev/coding/css/fonts-and-formatting/default-fonts/#android
Apparently there's only 3 fonts you can specify on pre 4.0 android:
Droid Sans
Droid Serif
Droid Sans Mono
I guess they translate to the default CSS ones (i.e sans-serif, serif, mono)
As I have been tested for a while, there are 3 standard font-family types for WebView:
serif,
sans-serif,
monospace.
I have been loading like below with JavaScript(I have tried different combinations from http://www.w3schools.com/cssref/css_websafe_fonts.asp - table of commonly used combinations):
myWebView.loadUrl("javascript:document.body.style.fontFamily=\"Impact, Charcoal, sans-serif\";");
so, there was no difernce with below code:
myWebView.loadUrl("javascript:document.body.style.fontFamily=\"sans-serif\";");
I've got the same result. Tested on 4.2.2.
Strange but courier also works, looks like kind of monospace.
Post 4.0 Androïd uses "Roboto" Font.
You can find specs from Androïd here :
http://developer.android.com/design/style/typography.html
I discovered that the following HTML code does not work on Android (it will only use the default font: Droid Sans. On desktop it is working as expected.
<p style='font-family: "Droid Sans",sans-serif;'>vând whisky și tequila, preț fix.</p>
<p style='font-family: "Droid Sans Mono",monospace;'>vând whisky și tequila, preț fix.</p>
<p style='font-family: "Droid Serif",serif;'>vând whisky și tequila, preț fix.</p>
You probably don't have an #font-face declaration for the other typefaces in your css. I imagine you only have one for Droid Sans. You need one for each typeface. For example, in your css you should have:
#font-face {
font-family: 'DroidSans';
src: url('font/DroidSans-webfont.eot?') format('eot'),
url('font/DroidSans-webfont.woff') format('woff'),
url('font/DroidSans-webfont.ttf') format('truetype'),
url('font/DroidSans-webfont.svg#webfontw7zqO19G') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'DroidSansMono';
src: url('font/DroidSans-Mono-webfont.eot?') format('eot'),
url('font/DroidSans-Mono-webfont.woff') format('woff'),
url('font/DroidSans-Mono-webfont.ttf') format('truetype'),
url('font/DroidSans-Mono-webfont.svg#webfontSOhoM6aS') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'DroidSerif';
src: url('font/DroidSerif-webfont.eot?') format('eot'),
url('font/DroidSerif-webfont.woff') format('woff'),
url('font/DroidSerif-webfont.ttf') format('truetype'),
url('font/DroidSerif-webfont.svg#webfontw7zqO19G') format('svg');
font-weight: normal;
font-style: normal;
}
And then in your code, your font-family should be the same as those you declared in the css above (i.e. font-family: 'Droid Sans'; is not the same as font-family: 'DroidSans')
<p style='font-family: "DroidSans",sans-serif;'>vând whisky și tequila, preț fix.</p>
<p style='font-family: "DroidSansMono",monospace;'>vând whisky și tequila, preț fix.</p>
<p style='font-family: "DroidSerif",serif;'>vând whisky și tequila, preț fix.</p>
Try it and see how you get on.
It seems Android only recognizes family names defined in system_fonts.xml (fonts.xml up to gingerbread). E.g. to get Droid Serif you're suppossed to write the generic serif. See this answer for details.
Oh, and there is a quirk with 'Droid Sans': that one name is in the config since 4.0 but the .ttf is a symlink to Roboto.
<speculation> I can see how early in Android's life someone said "we're only going to have three fonts so it's better if developers only use generic names, that way we can always replace them" </speculation>
But it's unfortunate. There are many reasons why the actual font you'll get might be different:
Before 4.0 you get the Droid family, after you get the Roboto family.
Firefox is bundling Open Sans and Charis SIL and using those instead.
Manufacturers might replace the 3 fonts with their own. EDIT: I can't find any confirmation this actually happens.
In all these situations it'd be nice if I could reference a specific font by actual name in my font stack. Alas, I can't.