DEV Community

Cover image for How to use One UI Sans on your website.
Reinhart Previano K.
Reinhart Previano K.

Posted on • Originally published at reinhart1010.id

How to use One UI Sans on your website.

Here’s some notes:

Use `font-family: "One UI Sans App VF" before any other system font stack (including system-ui).
This trick currently only works on Firefox running on One UI 6.0 (Android 14).

Samsung’s One UI 6.0 introduces a whole new font, One UI Sans. And that means Samsung joins the list of other Android manufacturers to intentionally ditch the classic Roboto from their Android system apps.

No, I’m not joking. But Samsung has quite a long history to introduce their custom system font for the Galaxy line of devices, from SamsungSans to Breeze Sans (Tizen-exclusive) to SamsungOne, and now, One UI Sans. It’s interesting to see that Samsung finally adopts a grotesque sans-serif, instead of humanist, into their own products.

And what’s more interesting, is that you can now use this font on your system font stack. Like us, and we’re just implement it right here.

Searching for the correct font name.

FX File Manager

On third-party file managers like FX, you can check out a list of all installed system fonts by checking out / (system/root) /system/fonts. After finding the font file, we found out that the font name is OneUISans-VF.ttf and OneUISansKR-VF.ttf (for Korean, as the font name suggests). So, the CSS font-face should have been "OneUISans-VF", right?

Well, no. And that’s the problem. Our site’s font stack already used "SamsungColorEmoji" instead of "Samsung Color Emoji" to forcibly render Samsung Color Emoji before falling back to Noto Color Emoji, the usually-default Android one.

The official name of the font turns out to be One UI Sans APP VF, which is quite a weird name because, sure, VF stands for variable font, but APP? Will there be dedicated versions of the font, such as one for web and Galaxy Wearable?

One UI Sans on Windows Explorer

At the meantime, that means you can now use this font by including "One UI Sans APP VF" into your CSS font stack. Note that Android browsers will still treat "system-ui" as Roboto.

Top comments (0)