UI font size

Questions
#1

Guys, is there any way to increase font size in UI? It would be really helpful when introducing Defold for larger audiences.
Thanks.

Customing .css dosen't work (CLOSED)
UI font size in windows-10
Zoom or Font-Size in EDITOR?
#2

Hi!

You can set the size of the font in the .font file in the editor if that is what you mean?

#3

Not really. I meant Defold UI itself - menu font size etc.

#4

Aha I see :smile:

Editor1 is based on eclipse so you should be able to customise in Preferences->General->Appearance->Color&Fonts

The UI in Editor 2 is based on stylesheets which I think are editable. @Erik_Angelin and @Ragnar_Dahlen can weigh
in maybe?

3 Likes
#5

Yes, create a file ~/.defold/editor.css

The whole thing is undocumented at the moment but I have this to get larger font in the source view:

.styled-text-area .source-segment, .styled-text-area .plain-source-segment {
    -fx-font-size: 12pt;
}
8 Likes
#6

You can reload css changes in the editor: “Help > Reload stylesheet”

4 Likes
#7

Ohhhh nice! Was going to ask for it too!

Any documentation or a sample sheet with all the keys?

For editor 2 it would be cool to be able to CTRL+wheel to increase/decrease the font size

3 Likes
#8

Currently the font size for the defold UI is very very small on my display. The CSS suggested for editor2 works, but that is only one piece of the UI. Is there a CSS file which control overall font size for editor2?

#9

Not sure. @Erik_Angelin, @Ragnar_Svensson?

#10

Sorry, no not really. There are several font-size settings in the css, and we also restructure it now and then, creating/renaming style classes. Also, just changing the font-size makes the ui look well… ugly :slight_smile:
That said, for now you can try changing specific element types. It’s not pretty but might help a bit.

.root {
    -fx-font-size: 20px;
}

.button {
    -fx-font-size: 20px;
}

The css variant used in javafx is documented here: https://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html

7 Likes
#11

How do I make this work on Windows?

#12

I’m assuming that the ~/.defold/editor.css file is located in the same place as other applications would be saving per-user settings on Windows. @Erik_Angelin, do you know where the css file is stored on Windows?

1 Like
#13

This feature is still half baked so the css must be located in C:\Users\your.name\.defold\editor.css when you start the editor.

2 Likes
#14

Thank you so much guys I took a long time to try it cause I couldn’t work on my windows pc (I mainly work on a notebook with Linux Mint and the old editor), and now I was able to find it.

2 Likes
#15

Same problem for me, windows 10 64 system. Can’t find where can I create the editor.css file? There is C:\Users[name]\AppData\Local\Defold folder, but editor.css in this doesn’t make changes in the program.

1 Like
#16

If you only need to modify font size then it should be enough to use cmd + plus/minus.

1 Like
#17

On Windows it’s Ctrl and then either the + or - to change text size in the text editors/

4 Likes
#18

where is the “.defold” folder in windows?

#19

Try:

#20

Thanks for the reply,
I checked that but “.Defold” folder is not there, but “Defold” folder is there in “C:\Users\myName\AppData\Local”, so i had created “editor.css” and wrote the code as you mentioned in comments, and clicked the option “help–> reload style sheet” , but it is not working.