New Font UI [Beta]

This is a beta feature for a new editor in the Properties Panel for changing fonts of GUI instances like TextLabel, TextButton, and TextBox.

How to enable the beta
  1. Go to File → Beta Features.

  2. Scroll until you see New Font Picker UI.

  3. After you enable the checkbox, you will be prompted to restart Studio.

Overview

Currently, when selecting fonts, you have to choose from a dropdown with more than 50 options, with some fonts being listed more than once because of having a bold or italic version. There is no preview of what these fonts look like, and some of the names are also generic and do not match the original name of the font, which can make it hard to work in external tools like Photoshop. Quickly toggling bold and italic is also a pain, sometimes requiring RichText.

The new UI displays a preview and is more organized. In addition, it provides access to more weights than before. This is possible through a new API that we’ve added for fonts that is now live everywhere - no beta needed.

This feature has been requested many times by developers and was made more necessary when we added 25 new fonts back in 2020. In the future, we plan to offer even more fonts, adding search and favorite functionality.

Additional Info

Renamed Fonts

Some fonts display under a different name with the new font UI. You can find this information in the dropdown table below. A full list of all available fonts can be found in the documentation. The old names refer to Enum.Font values which will stay the same.

Renamed fonts
Enum name Displays as Asset ID
Legacy Arial (Legacy) rbxasset://fonts/families/LegacyArial.json
SourceSans Source Sans Pro rbxasset://fonts/families/SourceSansPro.json
Bodoni Accanthis ADF Std rbxasset://fonts/families/AccanthisADFStd.json
Garamond Guru rbxasset://fonts/families/Guru.json
Cartoon Comic Neue Angular rbxasset://fonts/families/ComicNeueAngular.json
Code Inconsolata rbxasset://fonts/families/Inconsolata.json
Highway Highway Gothic rbxasset://fonts/families/HighwayGothic.json
SciFi Zekton rbxasset://fonts/families/Zekton.json
Arcade Press Start 2P rbxasset://fonts/families/PressStart2P.json
Fantasy Balthazar rbxasset://fonts/families/Balthazar.json
Antique Roman Antique rbxasset://fonts/families/RomanAntique.json
Gotham Gotham SSm rbxasset://fonts/families/GothamSSm.json

Tips

You can right-click on items in the dropdown to copy their asset ID for use in scripts.

Rollout Plan

If no major blocking issues come up during this beta, we plan to enable the feature live for everyone in a few weeks.

After that, we’ll be working on the next step for this feature. In the future, we plan to add support for picking fonts in the Script Editor similar to the color picker widget, as well as integrating it with the toolbox so that we can offer a much larger catalog of free fonts. The toolbox integration was previously announced at RDC 2021.

New API

This API is already live and you can start using it right now. The beta feature is only for the Studio UI.

Note when the beta feature is off, some fonts will show up as Unknown in the old font picker UI. These fonts were previously not available.

With this new API, some fonts are downloaded from the cloud similar to textures and sounds, instead of built into into the client. As a result, ContentProvider:PreloadAsync() can now be used on text objects to ensure that the fonts have loaded.


Credit goes to all these people: @Tiffblocks, @Rototally, @uiuxartist, and everyone else who contributed!

Thanks for reading.

515 Likes

This topic was automatically opened after 10 minutes.

This is an absolutely amazing quality of life update for developers, UI designers, and more. Every time I created a UI, it took me at least 5 minutes to find which font I wanted. This is going to make life so much easier for everyone.

The next level for this would be to allow importing custom fonts, (a feature, me and many others have been wanting) and would take ROBLOX to another level when it comes to UI. Is the team ever interested in doing this?

Thank you for all your hard work, we all appreciate it.

93 Likes

this is a very nice quality of life change, especially with all the recent changes - one thing I really want to see is the ability to upload custom fonts to use in the game, this is something that would help /w UI design and take it a step further

26 Likes

Any news on when we will be allowed to do custom fonts?

53 Likes

THIS IS AWESOME, long overdue, but still very cool!
Can’t wait to be able to make my fonts look even better…

11 Likes

As someone who designs UIs alot in studio (very little in external programs) and relies on seeing the preview of what the texts look like, this is a 100/10 addition that was long due, very nice.

5 Likes

This is a really good update! but I feel like there should be ways to upload your own personal font and have it reviewed for approval.

10 Likes

This is a very nice update that we wanted for a long time!

-Would also be great to make it so that you are able to add your own fonts to ROBLOX studio.

12 Likes

As a UI designer, this is a cool update. It’s nice to not have to use rich text because it would sometimes go to SourceSansBlack for all games. Can’t wait to see custom fonts so I don’t have to upload images of them.

9 Likes

Could we have a list of these fonts? Also, if a font fails to load, will it default to a font-file on the device instead or become invisible?

Which of the fonts are new? Also, having ‘unknown’ show for people without the beta is really bad UX as most people will have the beta disabled…

This could cause some confusion amongst newer-developers confused on why a font has a different name in code, this doesn’t look too forwards-compatible.

6 Likes

Great change! It’d be even better if hovering over a font would preview the change being applied. I often find myself trying several different fonts, and having to repeatedly click, scroll, and click is slower than it could be.

2 Likes

This is great! But I would perhaps appreciate having a larger preview - you can barely see any details of any of the fonts at 16px:

Also, it’d be nice if GetTextBoundsAsync supported line height as a configurable parameter. The lack of that feature is something we ran into during the recent RDC game jam while doing UI work.

29 Likes

I imagine the ability to import fonts would be a moderation nightmare. Users could import fonts that have letters switched around in order to bypass filters. If they could find a workaround to this, importing fonts would be amazing.

6 Likes

This is a great update, now I don’t need to go through every font to see which one fits the best.

2 Likes

This is a great QoL change.

But as 99% of the others in the thread said, when will we be able to import our own custom fonts?

4 Likes

I love that now we don’t need to look up what a font looks like. It just makes life easier.

3 Likes

I’m sure you guys aren’t the ones who worked on attributes originally but if a new attribute type for fonts can be added whats holding up some of the more desired attributes such as instances or dropdowns?

10 Likes

Great feature! It was needed for a very long time and now will make UI creation much easier!
Can’t wait to try it out!

The idea of a font marketplace is also great, cannot wait to see that in studio as well!

Thank you! :yum:

2 Likes

This is one of the best features that Roblox has added to Roblox Studio and it’s totally helping a LOT of devs out there trying to find the right font for their UI.

I can’t wait for other features to be added to Roblox Studio, mostly custom fonts will be a huge update for Roblox developers.

2 Likes