Default Font Set on Android

How to set default font family for entire Android app

The answer is yes.

Global Roboto light for TextView and Button classes:

<style name="AppTheme" parent="AppBaseTheme">
<item name="android:textViewStyle">@style/RobotoTextViewStyle</item>
<item name="android:buttonStyle">@style/RobotoButtonStyle</item>
</style>

<style name="RobotoTextViewStyle" parent="android:Widget.TextView">
<item name="android:fontFamily">sans-serif-light</item>
</style>

<style name="RobotoButtonStyle" parent="android:Widget.Holo.Button">
<item name="android:fontFamily">sans-serif-light</item>
</style>

Just select the style you want from list themes.xml, then create your custom style based on the original one. At the end, apply the style as the theme of the application.

<application
android:theme="@style/AppTheme" >
</application>

It will work only with built-in fonts like Roboto, but that was the question. For custom fonts (loaded from assets for example) this method will not work.

EDIT 08/13/15

If you're using AppCompat themes, remember to remove android: prefix. For example:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:textViewStyle">@style/RobotoTextViewStyle</item>
<item name="buttonStyle">@style/RobotoButtonStyle</item>
</style>

Note the buttonStyle doesn't contain android: prefix, but textViewStyle must contain it.

What is the default font family in Android?

There is no documentation on d.android.com for font family names. However, if you look at AOSP, the default fonts are loaded in android.graphics.*. The FontListParser loads the default fonts from /system/etc/fonts.xml (Android 5.0+) or /system/etc/system_fonts.xml (Android 4.1). The default fonts are loaded in Typeface#init.

The two XML files have some documentation. The first font is the default font. You can pull /system/etc/fonts.xml from your device. A device manufacturer or custom ROM may change the default system fonts.

fonts.xml (API 21+)

NOTE: this is the newer (L) version of the system font configuration,
supporting richer weight selection. Some apps will expect the older
version, so please keep system_fonts.xml and fallback_fonts.xml in sync
with any changes, even though framework will only read this file.

All fonts withohut names are added to the default list. Fonts are chosen
based on a match: full BCP-47 language tag including script, then just
language, and finally order (the first font containing the glyph).

Order of appearance is also the tiebreaker for weight matching. This is
the reason why the 900 weights of Roboto precede the 700 weights - we
prefer the former when an 800 weight is requested. Since bold spans
effectively add 300 to the weight, this ensures that 900 is the bold
paired with the 500 weight, ensuring adequate contrast.

system_fonts.xml (API 16-20)

System Fonts

This file lists the font families that will be used by default for all supported glyphs.
Each entry consists of a family, various names that are supported by that family, and
up to four font files. The font files are listed in the order of the styles which they
support: regular, bold, italic and bold-italic. If less than four styles are listed, then
the styles with no associated font file will be supported by the other font files listed.

The first family is also the default font, which handles font request that have not specified
specific font names.

Any glyph that is not handled by the system fonts will cause a search of the fallback fonts.
The default fallback fonts are specified in the file /system/etc/fallback_fonts.xml, and there
is an optional file which may be supplied by vendors to specify other fallback fonts to use
in /vendor/etc/fallback_fonts.xml.

If you parse the fonts.xml file, you can find which font family uses which typeface (see here):

╔════╦════════════════════════════╦═════════════════════════════╗
║ ║ FONT FAMILY ║ TTF FILE ║
╠════╬════════════════════════════╬═════════════════════════════╣
║ 1 ║ casual ║ ComingSoon.ttf ║
║ 2 ║ cursive ║ DancingScript-Regular.ttf ║
║ 3 ║ monospace ║ DroidSansMono.ttf ║
║ 4 ║ sans-serif ║ Roboto-Regular.ttf ║
║ 5 ║ sans-serif-black ║ Roboto-Black.ttf ║
║ 6 ║ sans-serif-condensed ║ RobotoCondensed-Regular.ttf ║
║ 7 ║ sans-serif-condensed-light ║ RobotoCondensed-Light.ttf ║
║ 8 ║ sans-serif-light ║ Roboto-Light.ttf ║
║ 9 ║ sans-serif-medium ║ Roboto-Medium.ttf ║
║ 10 ║ sans-serif-smallcaps ║ CarroisGothicSC-Regular.ttf ║
║ 11 ║ sans-serif-thin ║ Roboto-Thin.ttf ║
║ 12 ║ serif ║ NotoSerif-Regular.ttf ║
║ 13 ║ serif-monospace ║ CutiveMono.ttf ║
╚════╩════════════════════════════╩═════════════════════════════╝

What is the default font used in android if developer didn`t specify any

For the devices that run stock-Android, according to Material Design Guidelines:

Roboto is the standard typeface on Android.

But in case that you use languages not covered by Roboto (check the same link to see all languages covered by it), the typeface will be switched to Noto

Noto is the standard typeface for all languages on Chrome and Android for all languages not covered by Roboto.

That being said, the actuals fonts differ depending on the place where they are used (see below some examples from the same guideline)

App bar

Title style, Medium 20sp

Buttons

English: Medium 14sp, all caps

Dense: Medium 15sp, all caps

Tall: Bold 15sp

For the pre-Lollipop devices, the same rules apply, but you might notice some changes between different versions since Google refined Roboto as the time passed.

However, all the above are true only for stock-Android, the rest of them having a predefined typeface/font based on the device or manufacturer. As Eli Sadoff stated, most of these devices let the user pick a default font which will be used across all apps (without exceptions), even if you have a custom font for your app.

PS: Make sure to read everything form the provided link because you'll find more useful information.

how to set default font family available in android to action bar title

With a Toolbar you can use:

    <com.google.android.material.appbar.MaterialToolbar
app:titleTextAppearance="@style/myTitleTextAppearance"

with:

    <style name="myTitleTextAppearance" parent="TextAppearance.MaterialComponents.Subtitle1" parent="TextAppearance.AppCompat.Subhead">
<item name="fontFamily">sans-serif-medium</item>
<item name="android:fontFamily">sans-serif-medium</item>
.....
</style>

with an ActionBar you add in your app theme the actionBarStyle attribute:

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
<item name="actionBarStyle">@style/myActionBar</item>
</style>

with:

<style name="myActionBar" parent="Widget.MaterialComponents.ActionBar.PrimarySurface">
<item name="titleTextStyle">@style/myActionBarTextTitle</item>
</style>

<style name="myActionBarTextTitle" parent="TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="fontFamily">sans-serif-medium</item>
<item name="android:fontFamily">sans-serif-medium</item>
</style>

How do i apply a default font to all Text() elements in the app using Jetpack Compose?

Jetpack Compose supports theming and a uniform font can be applied by specifying a custom font in app theme. Steps to do this are as follows.

Copy your custom font to res/font directory ex: helvetica_nue.ttf

Sample Image

Create a Kotlin file (Type.kt) and add your Font family object here. Specify the defaultFontFamily as your custom font. If you wish to perform some additional customization you may add your styles to body1 typography, as this is the default typography used for all Text() unless specified.
private val myCustomFont = FontFamily(
Font(R.font.helvetica_nue),
)

val Typography = Typography(
defaultFontFamily = myCustomFont,
)
Create a Kotiln file (Theme.kt or any name) and declare you app theme
@Composable
fun MyApplicationTheme(content: @Composable () -> Unit) {
MaterialTheme(
typography = Typography,
)
}
In your activity/fragment, wrap your apps main Composable within this theme
 MyApplicationTheme {
NewsDetailScreen()
}

Now your app will display text in the specified font wherever the theme is applied.

Reference: https://developer.android.com/jetpack/compose/themes/material#typography

If you want to use the same typeface throughout, specify the defaultFontFamily parameter and omit the fontFamily of any TextStyle elements:

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>

What is the default font family taken by android webview to show its fonts?

WebView has provided us with the methods to check the default fonts like -

  1. webview.getSettings().getStandardFontFamily()
  2. webview.getSettings().getFixedFontFamily()

and As WebView Safe fonts Suggested, My default fonts which are applying, I get it through StandardFontFamily(sans-serif)
font-family in my case and Arial/Verdana fonts in particular.

Set default font family for Android app

Thanks KDeogharkar!

Looks like I would have to add the code inside of styles.xml in values folder. It worked :)



Related Topics



Leave a reply



Submit