How change & add fonts that is at TextBlock

Questions
1

Here’s how I found.
PG : https://www.babylonjs-playground.com/#XCPP9Y#1608

  1. Where is ‘arial’ font?

  2. Please know me, another useable fonts.

  3. How add new font files?

Thank you :pray:

2

hi. you can add font face in html or css in the usual way e.g. google fonts and write font face name in text1.fontFamily = “open sans”; or maybe babylon has more smarter way for load web fonts? arial font is standart system font

3

Thank you.
What should I do before ‘text1.fontFamily = font name’?
Google fonts’s font was not feedback in this PG :
[ https://www.babylonjs-playground.com/#XCPP9Y#1609 ]

4

for playground install font on local machine and try

5

Um… How install font? :cold_sweat:

e.g.)
I got that ‘megrim-v10-latin-regular.tff’.
And i’m made MyFonts.css file.

@font-face {
    font-family: 'Megrim';
    font-style: normal;
    font-weight: 400;
    src: local('Megrim'),
    url('static/resources/fonts/megrim-v10-latin-regular.ttf') format('truetype'), 
}

Now, how doing for change my TextBlock’s fontFamily?

6

ah ha ha … try installing the font on your local computer. For Windows, double-click the font file and click Install Font. and write the name fontFace in PG text1.fontFamily = ‘Megrim’ after loading the page your browser looks for the font on the local computer and if the font is found use the local file. if locally the font is not found, the browser uses webfont or uses a standard font, such as Arial. so after installing the font on the local machine, you can use it in PG, but I don’t know how to share the fonts in PG

8

https://www.babylonjs-playground.com/#J3X1EJ#2

2 Likes
9

I know, my question was too easy.
And my english was idiot.
But i’m happy.

um… right is ‘import’.

import .scss file.
input name.
the end.

import ../Ref../MyFonts.css
const tBlock = new TextBlock('test');
tBlock.fontFamily = 'font name';

thank you!

10

if you have font locally you dont need use css or if you load font from web you need waiting for font file(not css file) is load and after font is load create gui element. otherwise you face with problem when you create gui text before font is load fontface not apply and you get default system font. your css file contain url with font and you load font in browser cache and reuse loaded font after reload page and all looks great but if you clear cache you get problems. you don’t know when font is load and no guarantee what font load before you create gui element so for production you solution is bad

1 Like