# Babylon React Native - Babylon GUI - Changing font size? **URL:** \ **Category:** Questions\ **Tags:** gui, babylon-native\ **Created:** [July 1, 2022, 1:00pm UTC](https://forum.babylonjs.com/t/babylon-react-native-babylon-gui-changing-font-size/31845 "2022-07-01T13:00:14Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![muta](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/muta/32/24813_2.png) [@muta](https://forum.babylonjs.com/u/muta)\ **Post date:** [July 1, 2022, 1:00pm UTC](https://forum.babylonjs.com/t/babylon-react-native-babylon-gui-changing-font-size/31845/1 "2022-07-01T13:00:14Z")
In Babylon React Native is it possible to set font size to TextBlock element? I am having trouble figuring if this isn’t a feature yet or if i am doing something wrong. On my device font is so small it’s unreadable. ---
**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\ **Post date:** [July 1, 2022, 3:05pm UTC](https://forum.babylonjs.com/t/babylon-react-native-babylon-gui-changing-font-size/31845/2 "2022-07-01T15:05:26Z")
cc @srzerbetto @bghgary ---
**Author:** ![srzerbetto](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/srzerbetto/32/20941_2.png) [@srzerbetto](https://forum.babylonjs.com/u/srzerbetto)\ **Post date:** [July 1, 2022, 3:25pm UTC](https://forum.babylonjs.com/t/babylon-react-native-babylon-gui-changing-font-size/31845/3 "2022-07-01T15:25:00Z")
Hey @muta, how are you doing? Unfortunately, GUI is under partial support on Babylon Native right now. Text rendering working for some scenarios like buttons and sliders as well as text rendering to a dynamic texture. However, the TextBlock component is currently not supported. ---
**Author:** ![muta](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/muta/32/24813_2.png) [@muta](https://forum.babylonjs.com/u/muta)\ **Post date:** [July 4, 2022, 9:30am UTC](https://forum.babylonjs.com/t/babylon-react-native-babylon-gui-changing-font-size/31845/4 "2022-07-04T09:30:09Z")
Hey @srzerbetto, doing very well, how about you? My scenario is measuring distances in AR session, any suggestions how to make this work? Can i display dynamic texture in a GUI element? Or should i try with buttons? ---
**Author:** ![srzerbetto](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/srzerbetto/32/20941_2.png) [@srzerbetto](https://forum.babylonjs.com/u/srzerbetto)\ **Post date:** [July 5, 2022, 12:30pm UTC](https://forum.babylonjs.com/t/babylon-react-native-babylon-gui-changing-font-size/31845/5 "2022-07-05T12:30:02Z")
Hey @muta , how are you doing? Sorry for the late reply. I’ve check other members of the team and it turns out that you can actually use `TextBlock` with Babylon Native. The only caveat is that Babylon Native does not load any fonts by default, so in order to do any text related rendering you first need to call `_native.Canvas.loadTTFAsync` and provide the font name and content of a ttf file as a byte array. I did a small sample on how to do it: ```auto BABYLON.Tools.LoadFileAsync("https://raw.githubusercontent.com/CedricGuillemet/dump/master/droidsans.ttf", true).then( (data) => { _native.Canvas.loadTTFAsync("droidsans", data); // GUI var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI", scene); var textblock = new BABYLON.GUI.TextBlock(); textblock.text = "Sample Text!"; textblock.fontSize = 24; textblock.top = -100; textblock.color = "white"; advancedTexture.addControl(textblock); }); ``` You will need to do this for any of the approaches (Dynamic texture or GUI). The GUI elements are not 100% feature complete on Babylon Native yet, the render but you might have some incorrect behavior in some cases. I believe that if you go for the dynamic texture, you should have a more stable experience. I would only use GUI elements if you really needed some of their features. ---
**Author:** ![muta](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/muta/32/24813_2.png) [@muta](https://forum.babylonjs.com/u/muta)\ **Post date:** [July 5, 2022, 2:46pm UTC](https://forum.babylonjs.com/t/babylon-react-native-babylon-gui-changing-font-size/31845/6 "2022-07-05T14:46:32Z")
Hey @srzerbetto, i gave it a try and can’t make it work. Font loads and i can use dynamic textures, but on TextBlock component only line `textblock.fontSize = 24;` doesn’t do anything. I also tried using your code in [BabylonReactNativeSample](https://github.com/BabylonJS/BabylonReactNativeSample), and still font size stays the same 😕 Could you forward me a minimum example where you made it work? ---
**Author:** ![srzerbetto](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/srzerbetto/32/20941_2.png) [@srzerbetto](https://forum.babylonjs.com/u/srzerbetto)\ **Post date:** [July 5, 2022, 7:11pm UTC](https://forum.babylonjs.com/t/babylon-react-native-babylon-gui-changing-font-size/31845/7 "2022-07-05T19:11:24Z")
@muta , sorry I think I miss understood your issue from the beginning. Unfortunately there seems to be an issue with fontSize property on Babylon Native right now. Using a dynamic texture you can control the size of the rendered text using the font parameter. However, in order for you to have something render as a GUI (in screen space and not in the 3D scene), I was able to make a workaround where you handle the rendering using the AdvancedDynamicTexture directly: ```auto function buildUI(scene: Scene): void { //Get access to the native runtime. AcquireNativeObjectAsync().then((native: INative) => { //Load .tiff font file Tools.LoadFileAsync("https://raw.githubusercontent.com/CedricGuillemet/dump/master/droidsans.ttf", true).then( (data: ArrayBuffer | string) => { //Requires data to be ArrayBuffer if (data instanceof ArrayBuffer) { native.Canvas.loadTTFAsync("droidsans", data); // GUI var advancedTexture = AdvancedDynamicTexture.CreateFullscreenUI("UI", true, scene); // Manually draw text in the AdvancedDynamicTexture using its context. advancedTexture.onEndRenderObservable.add( () => { var font = "110px droidsans"; var context = advancedTexture.getContext(); context.font = font; context.fillText("Sample Text", 75, 135); }); } }); }); } ``` By changing the number in the `font` variable you should be able to control the rendered text size (it worked on my local BRN projects). Its more manual than using the Text component but it should give you a workaround while we don’t fully support GUI Text. ---
**Author:** ![inteja](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/inteja/32/22553_2.png) [@inteja](https://forum.babylonjs.com/u/inteja)\ **Post date:** [February 6, 2024, 3:14am UTC](https://forum.babylonjs.com/t/babylon-react-native-babylon-gui-changing-font-size/31845/8 "2024-02-06T03:14:03Z")
@srzerbetto I’m having trouble getting this going in the BRN sample app. The font seems to load and there’s no other errors, but also no text is rendered. BRN 1.6.3 RN 0.71.7 and tried Babylon.js 5.42.2 and 6.14.0 ---
**Author:** ![inteja](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/inteja/32/22553_2.png) [@inteja](https://forum.babylonjs.com/u/inteja)\ **Post date:** [February 6, 2024, 3:28am UTC](https://forum.babylonjs.com/t/babylon-react-native-babylon-gui-changing-font-size/31845/9 "2024-02-06T03:28:28Z")
Strangely, if I create a `Button` first then a `TextBlock`, both work, but if I only create a `TextBlock`, it renders nothing 🤔 ---
**Author:** ![inteja](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/inteja/32/22553_2.png) [@inteja](https://forum.babylonjs.com/u/inteja)\ **Post date:** [February 6, 2024, 3:59am UTC](https://forum.babylonjs.com/t/babylon-react-native-babylon-gui-changing-font-size/31845/10 "2024-02-06T03:59:10Z")
Scrap that. Got it going 🙂