New Font UI [Live]

Tiffblocks · August 31, 2022, 11:15pm

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

Go to File → Beta Features.

1078×870 62.6 KB
Scroll until you see New Font Picker UI.

1818×1435 142 KB
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.

New property: TextLabel/TextButton/TextBox.FontFace
This serves as an alternative to the Font property, providing more functionality.
New data type: Font
Has properties like Weight and Style. This can also be used as an Attribute.
New method: TextService:GetTextBoundsAsync()
An alternative to GetTextSize() that uses the new Font type instead.
New method: TextService:GetFamilyInfoAsync()
Returns a dictionary which includes the name and list of available weights for the given font.
New RichText tags: <font family="..."> and <font weight="...">
Allows finer weight distinctions than only bold, providing more options when authoring rich text.

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.

system · August 31, 2022, 11:25pm

This topic was automatically opened after 10 minutes.

benpinpop · August 31, 2022, 11:25pm

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.

ReallyCyan · August 31, 2022, 11:25pm

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

imacodr · August 31, 2022, 11:26pm

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

jitlua · August 31, 2022, 11:26pm

(post deleted by author)

3rdhoan123 · August 31, 2022, 11:26pm

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.

Rexinator2400 · August 31, 2022, 11:26pm

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.

Ghostinee · August 31, 2022, 11:28pm

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.

Clojule · August 31, 2022, 11:29pm

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.

Abcreator · August 31, 2022, 11:35pm

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.

Elttob · August 31, 2022, 11:38pm

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.

SimonEnderB · August 31, 2022, 11:43pm

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.

B_TheDude1124 · August 31, 2022, 11:44pm

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

ValiantWind · August 31, 2022, 11:45pm

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?

LifeDigger · August 31, 2022, 11:51pm

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

SillyMeTimbers · August 31, 2022, 11:53pm

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?

porttoport · August 31, 2022, 11:55pm

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!

Jack2004UsaS · September 1, 2022, 12:04am

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.

arcabark · September 1, 2022, 12:19am

The ability to upload custom fonts as an asset (or maybe based off an image id) would be really nice coupled with this update. If it’s ever added, it’d be great if it also came with a previewer with the ability to check how the font looks in different weights and styles before uploading so you don’t fill your asset list with failed versions of the same font.

I also agree with this, would be nice to finally have built-in support for custom enums like they’re their own asset specifically only for the game (even better if scripts recognize these enums). Attributes are a nice update, but I always end up going back to using ValueObjects whenever I need to write a CFrame or Instance into memory for reasons like a checkpoint system or other. (Perchance I could also ask for Integer and Double support while I’m here too? It would be nice to have that feature for attributes that need to specifically be a whole number or can only have 2 decimal places.)

Another feature that really needs an update in my opinion is properties that use strings (and also attributes). Even just the text box expanding with the text or the ability to open a window to see what you’re writing would be nice. Sometimes I don’t want to write the text in code and sometimes one line isn’t enough to see what you’re writing. Obviously something like NPC Dialogue you have to write in code but I love using RichText so the strings can sometimes be longer than what they should be.

Edit: Whoops, forgot to remove the reply. Sorry