Read the statement by Michael Teeuw here.
Change Fontsize
-
Hello everyone,
can I change the fontsize in general? I have a lot of modules but not enougth space on the screen. Thanks a lot.
-
@reaper81 yes you can
.xsmall { font-size: 15px; line-height: 20px; } .small { font-size: 20px; line-height: 25px; } .medium { font-size: 30px; line-height: 35px; } .large { font-size: 65px; line-height: 65px; } .xlarge { font-size: 75px; line-height: 75px; letter-spacing: -3px; }
put that in your custom.css file, change the numbers to your liking and you will cover most of the modules which uses those css classes
or what @j-e-f-f suggested in the other thread https://forum.magicmirror.builders/post/25506 to scale everything in the same portion
-
thanks, i will try it. strange that nobody asked this before.
-
This post is deleted! -
Do I need to past all of the above in CSS file?
Is this redefine what the preset fonts already are?
-
@anustart if you simply paste the above you’ll have no change, as I believe these are the defaults for these classes. Modify the values for
font-size
andline-height
to your liking. You may also want to addletter-spacing
properties to decrease space between letters in order to fit more on one line. Example:.medium { font-size: 26px; line-height: 30px; letter-spacing: -2px; }
If you really want to get your hands dirty, you may want to consider switching to a narrow font. (I believe RobotoCondensed is already included by default):
.medium { font-family: 'RobotoCondensed'; font-size: 26px; line-height: 30px; letter-spacing: -2px; }
-
@j.e.f.f that work!
-
@j.e.f.f said in Change Fontsize:
RobotoCondensed
But that leads to a general question about the fonts :
RobotoCondensed is not in the fonts directory, they all have an addition, like RobotoCondensed-light, etc…
Does that matter ?
The main.css uses ‘Roboto Condensed’.
Again, is that difference important ?
Thanks -
@howi42 it just means that there are several weights available. When you use the font in your CSS, you can specify the weight as follows:
font-family: "Roboto Condensed"; font-weight: normal; /* bold, 300, 100, etc. */