Issue with system font weight not being respected in Chrome on Android

Looking for a font challenge?

We've discovered that the Roboto font has a slim version that can be specified in CSS using font-weight: lighter or a weight value below 400.

By using the rule 

font-weight: 200; font-family: Roboto;
, we were able to get Firefox on Android to display the correct font version, as well as most major desktop browsers (if the font is available).

However, Chrome on Android seems to always default to the regular Roboto font.

We tried different syntax alternatives such as:

  • font-weight: lighter; font-family: Roboto;
  • font-family: 'Roboto Thin';
  • font-weight: 200; font-family: 'Roboto Thin';

Unfortunately, Chrome still prefers the regular version.

What about this approach?

@font-face {
    font-family: "Roboto";
    font-weight: 200;
    src: local("Roboto-Thin");
}

font-family: Roboto;
font-weight: 200;

It seems that this method resulted in a bug that won't be fixed: http://code.google.com/p/chromium/issues/detail?id=322658

The team suggested an alternative:

@font-face {
    font-family: "Roboto";
    font-weight: 200;
    src: local("sans-serif-thin");
}
font-family: Roboto;
font-weight: 200;

However, this solution didn't work on our testing devices (OS 4.1.2 with Chrome stable/beta) either.

The fallback option to web font does work on Chrome beta after being fixed in http://code.google.com/p/chromium/issues/detail?id=167557

Yet, using a web font fallback for a system font seems odd and can cause delays in content display due to extra downloads.

Do you have a better workaround for this issue?

Test cases:

androidcssgoogle-chromefont-facewebfonts

Answer №1

When incorporating Google Web Fonts into my design, I encountered no issues when utilizing the font-weight 300 with the 'Roboto' font:

You can find more information at http://www.google.com/fonts

<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500,700' rel='stylesheet' type='text/css'>

<style>
body {
    font-family: 'Roboto', sans-serif;
}
</style>

Answer №2

After much trial and error, I discovered that Roboto Thin does not actually exist on Android 4.1. In fact, I'm not even sure if it's available on 4.4 as there is no documentation mentioning it.

Do not be misled by http://developer.android.com/design/style/typography.html. The true font list can be found in the API documentation: http://developer.android.com/about/versions/android-4.1.html#Fonts, where Thin is noticeably absent.

Now that it's clear that only Roboto Light is available, I revisited the previously attempted solutions. It turns out that the suggestion from the Chromium team is the only effective solution:

@font-face {
    font-family: "Roboto";
    font-weight: 200;
    src: local("sans-serif-light");
}
font-family: Roboto;
font-weight: 200;

This method ensures that both Firefox and Chrome use the correct font without needing a webfont fallback.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Custom override of SX prop classes with Material-UI theme

I am currently working on customizing a component using the sx MUI prop. <Typography variant='h1' align='center' sx={{ fontSize: '24px', pb: '8px', fontWeight: '700' }} > ...

cssreactjsmaterial-ui

I positioned my popups at bottom:0, but strangely enough, they start moving up after being hovered over 2-3 times

Check out my blog where I'm having some trouble with popups. They start at the bottom but keep moving up each time they are hovered over more than once. Any suggestions on how to fix this issue? Edit: After some experimenting, it turns out that the " ...

javascripthtmlcss

The parameter type 'Contact' cannot be assigned to the argument type '{ [x: string]: any; }'

Issue: The argument of type '{ [x: string]: any; }' cannot be assigned to the 'Contact' parameter. The type '{ [x: string]: any; }' is missing properties such as id, contactType, and name ts(2345) const contact: { [x: stri ...

androidreactjstypescriptreact-nativeexpo

Android Splash Screen Animation without Buttons

Is there a way to start my animation rotation without using a button? I have the following lines of code: imageView = (ImageView) findViewById((R.id.imgSplash)); final Animation animRotate = AnimationUtils.loadAnimation(this,R.anim.rotate); ...

androidanimationbuttonscreensplash-screen

Utilize functions from any part of your program with ease on Android devices

Just diving into the world of Android system and Java in general. I have a background in VB, where I used a Module to create functions that could be accessed from different parts of my program. Is there a similar feature in Java and Android? Thank you! ...

androidmodule

SimpleAdapter and onItemClickListener in AlertDialog Using ListView

Struggling to understand how to retrieve checked items from an AlertDialog with a ListView. I have created the view in code within the AlertDialog and need assistance solving this issue. The correct operation of the AlertDialog is as follows: public ...

androidlistviewandroid-alertdialogonitemclicklistenersimpleadapter

Combining two "orderby" clauses in a compound query does not function properly in Firestore on an Android platform

I'm facing an issue while fetching the top posts from Firestore in Android within the last 24 hours. It seems like the second "orderby" clause in my compound query is not functioning as expected, causing the posts to be ordered based on time rather th ...

javaandroidfirebasegoogle-cloud-firestore

How to retrieve data from an SQLite database stored on an Android device

Currently, I am attempting to retrieve the sqlite database file located on the device. After launching the app on the device using adb, I am interested in downloading this file similar to how I did it on the emulator through DDMS. However, upon selecting t ...

androidsqlite

Stopping the broadcast receiver for SMS reception

After intercepting an SMS with my broadcast receiver, I face an issue where the message is still being sent to my inbox despite calling abortBroadcast(). This problem seems to occur only when I use unRegisterReceiver(). If I don't unregister, the abor ...

android

What is the process of utilizing jQuery to hover over a relevant cell?

I'm interested in learning how to implement jQuery to highlight related tables. Initially, I explored this JS fiddle and discovered a method for highlighting both vertically and horizontally. I conducted several searches to find a similar approach, ...

javascriptjqueryhtmlcsshtml-table

Can you explain the purpose of calling super.onSaveInstanceState() within an overridden onSaveInstanceState() method?

As a beginner in Android development, I recently implemented a custom version of onSaveInstanceState() to save data for my app. Interestingly, I realized that I forgot to include super.onSaveInstanceState(savedInstanceState) in my function, and surprisingl ...

javaandroidandroid-activity

Arrange containers into a tower?

Currently, I am exploring the concept of stacking boxes. While I have a solid grasp on how to stack them vertically from top to bottom, I find myself puzzled about how to stack them horizontally. Check out my vertical stacking method here See how I a ...

htmlcss

How can I increase the spacing between numbers in a sentence?

Is there a method to incorporate letter spacing to numerals while utilizing old style numerals through OpenType font feature settings on my website, without requiring each one to be enclosed in a span class? ...

cssfontsfont-facewebfontstypography

Do SQLite operations in Android store data in memory?

In my application, I am developing a data repository layer that retrieves data from either network API calls or local storage. When a request is made to the data repository layer, it must first check if the data is available in local storage. If not, an ...

androiddatabasesqlitememorydatabase-performance

Achieving proper alignment for the Mega Menu within the designated container

I have implemented a Mega Menu using Bootstrap 5. The menu is currently positioned on the left side due to the CSS styling: @media (min-width: 992px) .navbar-expand-lg .navbar-nav .dropdown-menu { position: absolute; } If you'd like to see t ...

csstwitter-bootstrapcss-positionbootstrap-5

A guide on filling an android spinner using a Java array of strings

I am a beginner in Android development and currently working on a project to learn the ropes. As part of my project, I have included a spinner in the user interface. <Spinner android:id="@+id/spinner1" android:layout_width="wrap_content" a ...

javaandroidandroid-spinner

Error on an Android TextView: Dealing with NullPointerException

I am facing a challenge that I cannot seem to overcome. I have declared and initialized several TextViews, but when I try to set their background color, I encounter a NullPointerException. Below is the relevant code snippet: public static ArrayList<In ...

javaandroidnullpointerexceptiontextview

Error encountered while deploying a Dojo application using the IBM Worklight platform at line 21 of the script

My first app was created to display some HTML content on IBM Worklight. Here's a brief overview of what I did: I started by creating a new project and added navigation, dojo views, and other necessary elements. After deploying the app, I preview ...

androiddojoibm-mobilefirst

Using an SVG filter to create a solid blue color overlay on an image

For a while now, I've been applying -webkit-filter: grayscale(100%); to render an image in grayscale. But recently, I've been wondering if it's possible to tint the image blue instead. My initial thought was to utilize an SVG filter and refe ...

csssvgfilter

Warning using FetchContent JavaScript

I have been attempting to create an alert for the "save" button after it is clicked, but so far I have not been successful. Perfil.html Profile.html is not the main page. It is part of a dashboard. <li class="nav-item"> <a class="nav-link" ...

javascriptjqueryhtmlcssajax