I want to style some HTML with a condensed font. I want to use built-in fonts, not webfonts. For Apple devices, I can just write font-family: AvenirNextCondensed-Medium, but on Android, declarations like font-family: "Roboto Condensed", font-family: Roboto-Condensed or font-family: RobotoCondensed don't work, even though Roboto Condensed is preinstalled on Android.
I also tried specifying Roboto and using font-stretch: condensed. No dice.
Is there any way to write my CSS so that Android devices use their built-in Roboto Condensed font?
Answering my own question here:
You have to use the nonstandard sans-serif-condensed keyword, like so:
h1 { font-family: AvenirNextCondensed-Medium, HelveticaNeue, sans-serif-condensed, sans-serif; }
Note that sans-serif-condensed has to come before sans-serif and any other font names recognized by Android. For example, if you put Arial before sans-serif-condensed, Android will just use Arial (or actually its substitute for it).
For other versions of Roboto (Thin, Light, Medium, etc.), the font names listed in this StackOverflow answer should probably work.
Related
I recently built a comics website at www.pipanni.com that uses the "Comic Sans" font. Everything is ok so far, except that the font is not showing on my Samsung Galaxy mobile phone. It shows something that looks like Arial.
I've already tried every clear history / cache, etc.
Here's my styles font:
body
{
font-family: "comic sans ms", "comic sans", "Comic Sans", arial, helvetica, tahoma, verdana;
font-size: 18px;
color: #000000;
}
The home page's title is working ok on my laptop (and every other computer I've tested the website on), but not on my smartphone.
I don't have an iphone, but I think it is working ok on those.
What can I try next?
P.S: This is a comics website, it's supposed to use "Comic Sans"! :)
I just found the simple solution for this, you just need to override the font file using font face like so:
#font-face {
font-family: 'Comic Sans MS';
src: url("comic-sans-ms/comici.ttf");
}
and HTML code
<h1 style="font-family: 'Comic Sans MS';">Comic sans</h1>
What happen is browser will override the default font file by using your file. In any devices, the browser will download comici.ttf and render the same font.
p/s: font file you can download from here https://www.wfonts.com/font/comic-sans-ms
To display a font, the device must have this font installed. If not, it uses the fallback you gave to it ( here Arial).
If you want to include a specific font, you can user websites like google font or you could use #Font-face ( look here : http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp )
But be aware that you need the rights to use and install that font.
checkout out font-squirrel. They have an app that will allow you to change a font like comic sans into an embedded font. Very handy for ensuring your look is consistent across all devices.
https://www.fontsquirrel.com/tools/webfont-generator
Go to expert settings and choose base64encode.
It will create a css file that has the embedded font which you include on your css.
Hello Stackoverflow—to make what I'm asking about more clear, I'll elaborate.
I'm using the following symbols in a rotation transformation: ☎ and ♦ and ✔
(☎ and ♦ and ✔ respectively).
On my android device though (smart phone, LG G4), it replaces these text symbols with non-text picture emojis that do not format with my transformation or font size styles.
I want to force the browser to use the regular symbols in the font that I have supplied on my website (using #font-face with an included .ttf file). On desktops, I have no issues at all displaying my selected symbols as intended.
Your help is greatly appreciated as I'd rather not be forced to make an image substitute of my text arrangement. Thank you.
You should include a webfont with support for the characters you want to use.
To include an icon font in your CSS, use the following code :
#font-face {
font-family: 'myfont';
src:url('fonts/myfont.eot?-td2xif');
src:url('fonts/myfont.eot?#iefix-td2xif') format('embedded-opentype'),
url('fonts/myfont.woff?-td2xif') format('woff'),
url('fonts/myfont.ttf?-td2xif') format('truetype'),
url('fonts/myfont.svg?-td2xif#myfont') format('svg');
// Different URLs are required for optimal browser support
// Make sure to :
// 1) replace the URLs with your font's URLs
// 2) replace `#myfont` with the name of your font
font-weight: normal; // To avoid the font inherits boldness
font-style: normal; // To avoid font inherits obliqueness or italic
}
.emoji {
font-family: 'myfont', Verdana, Arial, sans-serif; // Use regular fonts as fallback
speak: none; // To avoid screen readers trying to read the content
font-style: normal; // To avoid font inherits obliqueness or italic
font-weight: normal; // To avoid the font inherits boldness
font-variant: normal; // To avoid the font inherits small-caps
text-transform: none; // To avoid the font inherits capitalization/uppercase/lowercase
line-height: 1; // To avoid the font inherits an undesired line-height
-webkit-font-smoothing: antialiased; // For improved readability on Webkit
-moz-osx-font-smoothing: grayscale; // For improved readability on OSX + Mozilla
}
You can then include your symbol like this:
<span class="icon">☎</span>
<span class="icon">✉</span>
If you don't know a webfont that supports your character, you can easily create one yourself using the Icomoon App. See also my open source Emoji icon font for an example of an Icon font with support for 650 symbols, which I created with the Icomoon App.
If you plan on using my Icon font (or any other icon font), I would recommend that you edit the font in the Icomoon app to remove all symbols except the ones you need, as that would reduce your filesize significantly!
More info:
Create webfont with Unicode Supplementary Multilingual Plane
symbols
I have a simple line of text
<h4>This is just some placeholder junk</h4>
with the following CSS:
h4 {
font-size:20px;
color:#000000;
font-style:italic;
}
This is working in everything but the default browser on Android GS3.
I've tried wrapping the text in a span with font-style:italic;, as well as including <i> and <em> tags, but the font will not slant. Am I overlooking something simple here?
In terms of performance I would not recommend to use a custom font on mobile devices at all, unless there is really no other way. But this seems to be a problem caused by Samsung: https://code.google.com/p/chromium/issues/detail?id=169446#c11
So I think this is one of the rare situations where you should go with a custom font. Of course it should be a custom font that supports the italic font style. Don´t forget the font-styleproperty in the #font-face declaration.
#font-face {
...
font-style: italic, oblique;
}
I know there are already some fixes but none of them seem to work.
I want to use "Helvetica Neue" with font-weight:300 on my site. It all looks good on Desktop but as soon as I switch to android, there seems to be no light fonts.
Here you can see my test at jsbin.com . Feel free to edit around, on my Galaxy S3 and Nexus 4 the fonts all have the same weight.
As you can see I also tried to include roboto and set it to light but that didn't work either (used some more methodes but didn't want to make an extra H1 for every single one).
My testcase:
<h1 class="neue">Does not work</h1>
<h1 class="neueLight">Does not work</h1>
<h1 class="neueLighter">Does not work</h1>
with this CSS:
h1.neue {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 300;
}
h1.neueLight {
font-family: "HelveticaNeue-Light", "Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 300;
}
h1.neueLighter {
font-family: "HelveticaNeue-Light", "Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: lighter;
}
This worked (only with android 4.2+):
There seem to be no solution on how one can use a specific light font without a font-face import or using google Fonts.
The solution is using sans-serif-light as first font-family font.
The best solution looks like this:
html:
<h1>Headline</h1>
css:
h1 {
font-family: sans-serif-light,"HelveticaNeue-Light","Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 300;
}
Helvetica Neue is not available on most devices, including Android (which has a small set of installed fonts).
Regarding Roboto, you seem to be asking for weight 100, but your link element only takes weight 300 into use. And you are referring to the font only in WOFF version, which is not supported by many Android versions.
use font-weight:100
also make sure your font supports different font weight
There seem to be no solution on how one can use a specific light font without a font-face import or using google Fonts.
The solution is using sans-serif-light as first font-family font.
The best solution looks like this:
html:
<h1>Headline</h1>
css:
h1 {
font-family: sans-serif-light,"HelveticaNeue-Light","Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 300;
}
Note: this only works with android 4.2+
I have this in my CSS:
.like-counter span, .entry-content h2 {
color: #444;
font-family: Bitstream Charter, "Droid Serif", Gerogia, serif;
font-weight: bold;
}
In my computer, I see a serif font. If I remove the first one, then I see the Droid Serif font. I thought this font was a default font in Android devices.
But when I open the site on my Android phone. I'm still seeing Droid Sans.
What could be causing this?
EDIT:
I discovered that the problem only happens when I display the page in Android's default browser. In Firefox, I can see the Droid Serif font (strange).
Instead of guessing the default fonts, you can just use the generic serif font:
font-family: serif;
serif will be the browser's default serif font.
On older Android systems (until a version that I'm not aware of) the browser instead of checking the full list of possible fonts, it checks the very first entry of the font family, and if it is known to the browser, what to substitute it with, then it will use that, otherwise it will throw away the whole list.
This is notable, if you just use Times for example, it will use Droid Serif, but if you add some fancy font before it, it will use Droid Sans, regardles of the rest.
Obviously it will work, if you put the “serif” in first place, but then all the browser use the default serif font, instead of whatever you want. Because of the simplicity of the font selection on older Android, you can add a "serif" family to the first place, which will be interpreted as Droid Serif on the old Android, but other browsers will look (and hopefully fail) for a font named “serif”.
Also—interestingly—none of the Droid fonts are known to those Android browser.