Search

Reinhart Previano K.

Do you love to Ctrl-K, Ctrl-/, or / ? Now you can do three of them (>_ )!

No results so far...

Contact Information

• (Updated )

How to use One UI Sans on your website.

Reinhart Previano Koentjoro's profile picture

Reinhart Previano Koentjoro (@reinhart)

Published on tales from the roothouse

Share Copy Link Print PDF Embed Share to Email Share to SMS Yahoo! Share to Yahoo! Mail Mastodon Share to Mastodon Share to KakaoStory Messenger Share to Messenger Pocket Share to Pocket Flipboard Share to Flipboard Pinterest Share to Pinterest Reddit Share to Reddit Y Combinator Share to Hacker News Odnoklassniki Share to Odnoklassniki Blogger Share to Blogger Pleroma Share to Pleroma Share to Friendica Share to KakaoTalk 1Artboard 1 copy 2 Share to Snapchat Xing Share to Xing Share to Misskey LINE Share to LINE Evernote Share to Evernote WhatsApp Share to WhatsApp LiveJournal Share to Livejournal Diaspora Share to Diaspora Share to Gmail Threads Share to Threads Threema Share to Threema Share to X Tumblr Share to Tumblr Buffer Share to Buffer LinkedIn Share to LinkedIn Mail.Ru Share to mail.ru VK Share to VKontakte Trello Share to Trello Facebook Share to Facebook Bluesky Share to Bluesky Skype Share to Skype Hatena Bookmark Share to Hatena Bookmark! Share via MastodonShare Telegram Share to Telegram WordPress Share to WordPress.com

Embed

This website supports oEmbed. To quickly use oEmbed, just copy this site's link to your oEmbed-supported apps and websites like WordPress.

Alternatively, copy and paste the HTML code below to embed this post in your website.

($_ )! We have made this thing responsive, but recommend at least 512x512 pixels for best results.
<iframe src="https://reinhart1010.id/blog/2023/12/04/how-to-use-one-ui-sans-on-your-website?embed" height="512" width="512" style="border:none;"><a href="{{ $canonical }}">https://reinhart1010.id/blog/2023/12/04/how-to-use-one-ui-sans-on-your-website</a></iframe>
Preview
Cover image for 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.

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?

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.

Share Copy Link Print PDF Embed Share to Email Share to SMS Yahoo! Share to Yahoo! Mail Mastodon Share to Mastodon Share to KakaoStory Messenger Share to Messenger Pocket Share to Pocket Flipboard Share to Flipboard Pinterest Share to Pinterest Reddit Share to Reddit Y Combinator Share to Hacker News Odnoklassniki Share to Odnoklassniki Blogger Share to Blogger Pleroma Share to Pleroma Share to Friendica Share to KakaoTalk 1Artboard 1 copy 2 Share to Snapchat Xing Share to Xing Share to Misskey LINE Share to LINE Evernote Share to Evernote WhatsApp Share to WhatsApp LiveJournal Share to Livejournal Diaspora Share to Diaspora Share to Gmail Threads Share to Threads Threema Share to Threema Share to X Tumblr Share to Tumblr Buffer Share to Buffer LinkedIn Share to LinkedIn Mail.Ru Share to mail.ru VK Share to VKontakte Trello Share to Trello Facebook Share to Facebook Bluesky Share to Bluesky Skype Share to Skype Hatena Bookmark Share to Hatena Bookmark! Share via MastodonShare Telegram Share to Telegram WordPress Share to WordPress.com

Embed

This website supports oEmbed. To quickly use oEmbed, just copy this site's link to your oEmbed-supported apps and websites like WordPress.

Alternatively, copy and paste the HTML code below to embed this post in your website.

($_ )! We have made this thing responsive, but recommend at least 512x512 pixels for best results.
<iframe src="https://reinhart1010.id/blog/2023/12/04/how-to-use-one-ui-sans-on-your-website?embed" height="512" width="512" style="border:none;"><a href="{{ $canonical }}">https://reinhart1010.id/blog/2023/12/04/how-to-use-one-ui-sans-on-your-website</a></iframe>
Preview

Reinhart Previano Koentjoro
Reinhart Previano Koentjoro
Citra Manggala Dirgantara
Citra Manggala Dirgantara

A Reinhart company

Products

Company