CSS Fonts on Android

CSS fonts on Android

The fonts that I see installed in my Android (2.2) system files are:

• Clockopia.ttf
• DroidSans-Bold.ttf
• DroidSans.ttf
• DroidSansArabic.ttf
• DroidSansFallback.ttf
• DroidSansHebrew.ttf
• DroidSansMono.ttf
• DroidSansThai.ttf
• DroidSerif-Bold.ttf
• DroidSerif-BoldItalic.ttf
• DroidSerif-Italic.ttf
• DroidSerif-Regular.ttf

Load font from css file using html in android

You have to define the path to your font. Place the desired OTF or TTF font in assets/fonts and define the path as following in your css file:

@font-face {
    font-family: MyFont;
    src: url("file:///android_asset/fonts/MyFont.otf")
}

If your font isn't a latin font, try to convert the font from otf to svg! There were some discussions and bug reports about this issue, but google never responded - please correct me if I'm wrong.

Use a online converter like Everything Fonts and you'll be good. Be sure that the namespace includes xmlns="http://www.w3.org/2000/svg"!

Use of two complementary fonts in Android

Thanks to the direction given by JaiSoni, I have managed to find a way to solve my problem using HTML and CSS : I have used a WebView, and have declared the @font-face to define my fonts. Then, I have used them in the CSS attribute "font-family" like this :

<style type="text/css">
   @font-face {font-family: MyFont; src: url("file:///android_asset/fonts/font.ttf")}
   @font-face {font-family: MyFont2; src: url("file:///android_asset/fonts/font2.ttf")}
   body {font-family: MyFont2, MyFont; }
</style>

Thank you very much.

How to detect Android device's default font size with CSS media queries?

Short Answer

No, you cannot do this just using CSS. However you can minimise impact using a method similar to the one you mentioned in your question (measuring font size and adjusting layout accordingly).

Long Answer

You cannot do this with just CSS, however it is possible to have a performant website without repaints and fall-back to your default styles for no JS.

There is one downside to this method, you do end up injecting a style sheet into the page which will affect first contentful paint times. However bear in mind that this is essentially the same as having a matching media query (so in reality, there is no difference between this and a media query other than it relies on JavaScript).

You can mitigate this by inlining the relevant styles but obviously that carries a page weight cost. You will have to decide which is the greater sin!

The solution is quite simple.

(1) Work out the user's font size using the method similar to the one you described.

(2) Load in conditional CSS that overrides the key layout options as you desire.

(2a) Alternatively add a class to the body and change the layout based on that from styles within existing style sheets or inlined in the document if above the fold.

1. Work out the user's font size

You can do this in vanilla JS right within the header of the page as an inline script so it does not delay anything (other than parsing the script) and it will still be performant.

Try the below example with you font size set to "medium" first, then set your font-size to "extra large" and run the script again. Your font size should show as 16px and 24px respectively.

var el = document.getElementById('foo');
var style = window.getComputedStyle(el, null).getPropertyValue('font-size');
var fontSize = style;
console.log(style)

<div id="foo">a</div>