FancyText | A flexible text rendering module with custom fonts, effects, and inline icons

FancyText

v1.1.0

GitHub 

Marketplace

What is it?


FancyText is a text rendering module for Roblox that supports custom fonts, text effects, inline icons, and rich formatting through tags.
It’s built for dynamic UI text, animations, colors, and special effects, so you don’t have to hand-roll character-by-character tweening every time you want text to shake, wave, or type itself out.
The github repo goes into a lot more detail than this post, so check it out if you want the full picture.

:warning: Important: This model does not include the TTFToRoblox tool for generating custom fonts.
The executable and Python source code are only available via the GitHub repository linked above.

Demo



PlayEffect Demo

Usage


local ft = require(path.to.FancyText)

local text = "<shadow 5 5><wave><typewrite><rainbow>This is FancyText"
local cleanup_trove = ft.MakeText(container, text, {
    FontFace = Font.new("rbxassetid://fonts/families/Inconsolata.json"),
    FontSize = 80,
    VerticalAlign = "Center"
})

-- cleanup when done..
task.delay(10, function()
    cleanup_trove:Clean()
end)

You can also swap a Studio-designed TextLabel for FancyText at runtime with FromLabel, then trigger effects on demand - e.g. a click-triggered exit transition - with :PlayEffect:

-- design titleLabel visually in Studio, then upgrade it at runtime
local trove = ft.FromLabel(titleLabel, { FontSize = 40 }, "<shadow><gradientWave>")

closeButton.MouseButton1Click:Once(function()
    trove:PlayEffect("fade", {"0", "1"}, true) -- auto-cleans when the fade finishes
end)

Features


  • Custom Fonts via TTFToRoblox, plus support for Roblox’s built-in Font/FontFace
  • 15+ built-in text effects (shake, wave, rainbow, typewriter, animated gradients, etc.), all stackable
  • Inline icons embedded directly in text
  • Left, Right, and Center text alignment
  • Automatic UI scaling relative to 1920x1080
  • Intelligent word wrapping with custom fonts
  • BBCode-style tags to toggle effects on/off
  • Easy to extend with your own custom effects
  • Swap a design-time TextLabel for FancyText at runtime with FromLabel
  • Trigger effects like fall/fade on demand from any event, not just a tag-driven timer

Build


You can get FancyText either from the model above or from the GitHub releases.
Please note that the GitHub releases will likely be more up to date than the model.

Support


Any feedback is appreciated. Please report bugs in this thread.
If you’d like to support me, just leave a like on this post and star the github repo! :smiley:


A note on custom fonts: FancyText doesn’t ship with any bundled fonts, you convert and add your own via TTFToRoblox. Before using a converted font in your game, make sure you actually have the rights to it: most free fonts (e.g. Google Fonts, SIL Open Font License) are fine, but many “premium”/marketplace fonts only license you to use them, not to redistribute a converted copy. That’s on you to check per font, not something FancyText enforces.

17 Likes

Sorry, it looks like the model has been taken down for “Misuse of Roblox Systems”, I have appealed this, in the meantime please use the Github download or release.

There is a place file under the Github Releases.

You can also easily add it to your game by making a new ModuleScript, syncing it to file and adding another module under it so that it becomes a folder under your filesystem. Then, drag everything from FancyText into that folder.

2 Likes

Does this have proper support for differently scaled screens? One issue I always come across in text systems like this is that the text almost never looks the same on every screen, and it’s effort I don’t want to spend a whole lot of time on

2 Likes

Yes it does.
30charlimit30charlimit

1 Like

The documentation says it handles scaling relative to 1920x1080, so as long as you aren’t using weird custom scale logic elsewhere, it should be fine. Just make sure your containers are actually using Scale instead of Offset.

1 Like

[v1.1.0] - Performance & Effect changes


  • ~40% faster per-frame update cost; renderer now skips characters with no active effect entirely instead of walking every character every frame
  • New smash effect
  • Fixed a handful of effect-stacking bugs (transparency getting stuck when combining gradientWave with other effects, clickpop drifting if you click it rapidly, shadow not tracking typewrite’s reveal correctly)

Thanks to @anon21097601 for the performance work and the new effect.

this looks good :eyes::eyes::eyes::eyes::eyes::eyes:
one problem i’ve had with other custom font systems like Text+ is that the scale on other devices is just not consistent, hope this works out for me!!

1 Like

I struggled with scaling my text with Text+, but found out how to do it with ScaleText and Dynamic. I’ll delete the message if it got too off-topic.

is there a chance for you add a way to add effects to specific parts of the text?
like this is a test, where only “a test” has the wave effect? would be really goated
(i wanted to add it myself but i suck at editing resources)

1 Like

Yes, this is possible by closing the tag, so for example in the string “Hello this is a test”, if you wanted only “this is a” (in the middle of the string) to wave you would do “Hello <wave>this is a<wave> test”

1 Like

woahhh this is so cool…
is there a plan to add character spacing and line height in configs?

oh awesome, i didn’t know it was added
thank you so much!!! module is goated

1 Like