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>
Related Topics
Letting Webview on Android Work with Prefers-Color-Scheme: Dark
Install Shows Error in Console: Install Failed Conflicting Provider
Error Message 'Java.Net.Socketexception: Socket Failed: Eacces (Permission Denied)'
How to Avoid Soft Keyboard Pushing Up My Layout
How to Set Id of Dynamic Created Layout
Listview Scroll to the End of the List After Updating the List
How to Handle Imeoptions' Done Button Click
How to Save a Bitmap on Internal Storage
How to Upload an Image File in Retrofit 2
How Much Support Is There for -Webkit-Overflow-Scrolling:Touch
Lock Screen Orientation (Android)
Remove Listview Items in Android
Get Android API Level of Phone Currently Running My Application
How to Set Layout_Gravity Programmatically
Creating a Preference Screen with Support (V21) Toolbar
How Permission Can Be Checked at Runtime Without Throwing Securityexception