# Babylon GUI Preview throws error on getFontOffset

**URL:** <https://forum.babylonjs.com/t/babylon-gui-preview-throws-error-on-getfontoffset/21627>\
**Category:** Bugs\
**Tags:** gui\
**Created:** [June 12, 2021, 11:53am UTC](https://forum.babylonjs.com/t/babylon-gui-preview-throws-error-on-getfontoffset/21627 "2021-06-12T11:53:08Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Aus\_Karlos](https://avatars.discourse-cdn.com/v4/letter/a/a3d4f5/32.png) [@Aus\_Karlos](https://forum.babylonjs.com/u/Aus_Karlos)\
**Post date:** [June 12, 2021, 11:53am UTC](https://forum.babylonjs.com/t/babylon-gui-preview-throws-error-on-getfontoffset/21627/1 "2021-06-12T11:53:09Z")

</div>

Hey guys i’ve been making a small program with Babylon for a few months now. Today the preview cdn for the GUI build has broken as far as i can tell.

Even if i copy a basic playground sample with a single button with text it will throw the following error. `Uncaught TypeError: i.getFontOffset is not a function`.

Im very new to Babylon and nodejs, so it was an easy way to just include the cdn scripts in the html and write what i need in another script.  
(Can’t seem to figure out how to serve it with Express + webpack).

Is anyone else able to confirm that the min GUI package is broken?  
[https://preview.babylonjs.com/gui/babylon.gui.min.js](https://preview.babylonjs.com/gui/babylon.gui.min.js)

html

```auto
<head>
    <meta charset="utf-8"/>
    <title>System</title>
    <style>
        html, body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
        #fps {
                position: absolute;
                background-color: black;
                border: 2px solid red;
                text-align: center;
                font-size: 16px;
                color: white;
                top: 15px;
                right: 10px;
                width: 60px;
                height: 20px;
            }
    </style>
</head>
<body>
    <script src="https://cdn.babylonjs.com/babylon.max.js"></script>
    <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
    <script src="https://preview.babylonjs.com/gui/babylon.gui.js"></script>
    <canvas id="renderCanvas"></canvas>
    <div id="fps">0</div>
    <script src="test.js"></script>
</body>
</html>

```

test.js

```auto
window.addEventListener('DOMContentLoaded', async () => {
	const canvas = document.getElementById('renderCanvas');
	const engine = new BABYLON.Engine(canvas, true);
    // This creates a basic Babylon Scene object (non-mesh)
    var scene = new BABYLON.Scene(engine);

    // This creates and positions a free camera (non-mesh)
    var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);

    // This targets the camera to scene origin
    camera.setTarget(BABYLON.Vector3.Zero());

    // This attaches the camera to the canvas
    camera.attachControl(canvas, true);

    // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
    var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);

    // Default intensity is 1. Let's dim the light a small amount
    light.intensity = 0.7;

    // Our built-in 'sphere' shape.
    var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2, segments: 32}, scene);

    // Move the sphere upward 1/2 its height
    sphere.position.y = 1;

    // Our built-in 'ground' shape.
    var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 6, height: 6}, scene);
	
	// GUI
    var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");

    var button1 = BABYLON.GUI.Button.CreateSimpleButton("but1", "Click Me");
    button1.width = "150px"
    button1.height = "40px";
    button1.color = "white";
    button1.cornerRadius = 20;
    button1.background = "green";
    button1.onPointerUpObservable.add(function() {
        alert("you did it!");
    });
    advancedTexture.addControl(button1); 

	//Start Render Loop
	engine.runRenderLoop( () => {
        scene.render();

        //-----------------------Debug FPS----------------------------//
   		var divFps = document.getElementById('fps');
		divFps.innerHTML = engine.getFps().toFixed() + " fps";
		//-----------------------------------------------------------//
    });
})

```

Omit the advancedTexture and button and it will work.

Thanks

---

<div class="post-metadata">

**Author:** ![Patrik](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/patrik/32/16721_2.png) [@Patrik](https://forum.babylonjs.com/u/Patrik)\
**Post date:** [June 14, 2021, 8:39am UTC](https://forum.babylonjs.com/t/babylon-gui-preview-throws-error-on-getfontoffset/21627/2 "2021-06-14T08:39:10Z")

</div>

I have the same problem. I came back to my project after few days and all my GUI elements are gone… Have you find any solution?

 ![Screenshot 2021-06-14 103843](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/2/7/2766dec5572f813354eec48b6a3597e1cd045079.png)

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [June 14, 2021, 10:40am UTC](https://forum.babylonjs.com/t/babylon-gui-preview-throws-error-on-getfontoffset/21627/3 "2021-06-14T10:40:13Z")

</div>

You should not mix cdn and preview to retrieve packages.

Your sample does work in the PG (I copy/pasted your code):

[https://playground.babylonjs.com/#TJPM7U](https://playground.babylonjs.com/#TJPM7U)

---

<div class="post-metadata">

**Author:** ![Aus\_Karlos](https://avatars.discourse-cdn.com/v4/letter/a/a3d4f5/32.png) [@Aus\_Karlos](https://forum.babylonjs.com/u/Aus_Karlos)\
**Post date:** [June 14, 2021, 10:43am UTC](https://forum.babylonjs.com/t/babylon-gui-preview-throws-error-on-getfontoffset/21627/4 "2021-06-14T10:43:15Z")

</div>

Is there a CDN version of the GUI? I’ve been looking. Once i figure out how to utilize Webpack with Express to compile and serve the npm version of babylonjs to the browser i’ll be switching.

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [June 14, 2021, 10:44am UTC](https://forum.babylonjs.com/t/babylon-gui-preview-throws-error-on-getfontoffset/21627/5 "2021-06-14T10:44:49Z")

</div>

Yes, simply replace `preview` by `cdn` in the url:

https:// ~~preview~~ [cdn.babylonjs.com/gui/babylon.gui.js](http://cdn.babylonjs.com/gui/babylon.gui.js)

---

<div class="post-metadata">

**Author:** ![Aus\_Karlos](https://avatars.discourse-cdn.com/v4/letter/a/a3d4f5/32.png) [@Aus\_Karlos](https://forum.babylonjs.com/u/Aus_Karlos)\
**Post date:** [June 14, 2021, 10:49am UTC](https://forum.babylonjs.com/t/babylon-gui-preview-throws-error-on-getfontoffset/21627/6 "2021-06-14T10:49:34Z")

</div>

Yeah, i feel like an idiot. I glanced over it lastnight. I revisited the cdn page and it was staring me in the face. I thought it was strange before that there were cdn’s for everything but the gui.  
Thanks for your help anyway.