<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<p><br>
</p>
<div class="moz-cite-prefix">On 29/05/2025 18:23, Dirk Lemmermann
wrote:<br>
</div>
<blockquote type="cite"
cite="mid:41D3226C-3A6A-4C5A-B9DA-0F1565DA06E1@gmail.com">
<pre class="moz-quote-pre" wrap="">Hi everyone,
Is there any chance we can get font weight working properly so that I can use a font with medium boldness and use it by declaring: -fx-font-weight: bolder; or by declaring -fx-font-weight: 600;? I know I can work around it by using the font family name, e.g. „Rubik Medium“ but this makes it impossible to replace the font at runtime, which is a requirement I am facing right now in order to support users with dyslexia. I was also considering using a variable but this is not supported for font family names (e,g, „-my-font; „Rubik Medium“).</pre>
</blockquote>
Just curious, how would a variable help here for the problem having
the font selectable at runtime?<br>
<blockquote type="cite"
cite="mid:41D3226C-3A6A-4C5A-B9DA-0F1565DA06E1@gmail.com">
<pre class="moz-quote-pre" wrap="">Any other work arounds I am missing?</pre>
</blockquote>
<p>I don't have any easy solutions here, and I'm unsure what is
involved in actually making -fx-font-weight work better.<br>
</p>
<p>So, all I can offer is something very ugly like having the user
select a font, then generating a CSS file, and setting that on the
root node; if you keep the styles for font selection separate it
may be doable as you'd probably could get away with just replacing
a single stylesheet then (ie. mark a TextField with ".font-large"
specifically and define what that means in the custom CSS file).
This is a bit anti-CSS as you'd prefer to mark such nodes only
with their intended function, and determine a suitable font based
on that, but styles in FX don't compose.<br>
</p>
<p>If you're willing to go in the direction of generating all CSS
files based on LESS or SCSS (at runtime mind you, I hate doing
this during a build), more is possible:<br>
</p>
<p>What I've been doing myself (although I don't allow runtime
selection) is to allow users to modify CSS files; using LESS or
SCSS one can neatly pack all font related stuff into a single
file, so I've sort of solved this by having a `fonts.less` (see
below). I then mark styles with one of the custom styles (.light,
.regular, etc) to indicate what final font they'll be using.
However, to make this work even at run time, I'd have to
regenerate all derived CSS files (but as I said, I can do this at
runtime anyway) -- so the effort is in then primarily in
auto-generating a base fonts CSS file given some user selection,
then replacing all stylesheets that were set throughout the
application (or just restarting the application).</p>
<p>For now a user could do this manually by only editing
`fonts.less` and then (re)starting the application.<br>
</p>
<p>Here is the fonts.less file I was talking about (note: there is
also a Linux variant as fonts work differently on different
platforms as well... perhaps MacOS needs a modified one also, but
I never tried there)</p>
<p>fonts.less:<br>
</p>
<div style="background-color:#ffffff;padding:0px 0px 0px 2px;">
<div
style="color:#000000;background-color:#ffffff;font-family:"Consolas";font-size:11pt;white-space:pre;"><p
style="margin:0;">/*</p><p style="margin:0;"> * The <span
style="text-decoration:underline;text-decoration-color:#ff8040;text-decoration-style:wavy;">Noto</span> <span
style="text-decoration:underline;text-decoration-color:#ff8040;text-decoration-style:wavy;">Sans</span> font supports many variations. To get the correct variation</p><p
style="margin:0;"> * in JavaFX, select them as follows:</p><p
style="margin:0;"> * </p><p style="margin:0;"> * - Black = <span
style="text-decoration:underline;text-decoration-color:#ff8040;text-decoration-style:wavy;">Noto</span> <span
style="text-decoration:underline;text-decoration-color:#ff8040;text-decoration-style:wavy;">Sans</span> <span
style="text-decoration:underline;text-decoration-color:#ff8040;text-decoration-style:wavy;">Blk</span></p><p
style="margin:0;"> * - Bold = <span
style="text-decoration:underline;text-decoration-color:#ff8040;text-decoration-style:wavy;">Noto</span> <span
style="text-decoration:underline;text-decoration-color:#ff8040;text-decoration-style:wavy;">Sans</span> + font-weight: bold</p><p
style="margin:0;"> * - <span
style="text-decoration:underline;text-decoration-color:#ff8040;text-decoration-style:wavy;">Semi</span> Bold = <span
style="text-decoration:underline;text-decoration-color:#ff8040;text-decoration-style:wavy;">Noto</span> <span
style="text-decoration:underline;text-decoration-color:#ff8040;text-decoration-style:wavy;">Sans</span> SemBd</p><p
style="margin:0;"> * - Medium = <span
style="text-decoration:underline;text-decoration-color:#ff8040;text-decoration-style:wavy;">Noto</span> <span
style="text-decoration:underline;text-decoration-color:#ff8040;text-decoration-style:wavy;">Sans</span> Med</p><p
style="margin:0;"> * - Regular = <span
style="text-decoration:underline;text-decoration-color:#ff8040;text-decoration-style:wavy;">Noto</span> <span
style="text-decoration:underline;text-decoration-color:#ff8040;text-decoration-style:wavy;">Sans</span> + font-weight: normal</p><p
style="margin:0;"> * - Light = <span
style="text-decoration:underline;text-decoration-color:#ff8040;text-decoration-style:wavy;">Noto</span> <span
style="text-decoration:underline;text-decoration-color:#ff8040;text-decoration-style:wavy;">Sans</span> Light</p><p
style="margin:0;"> *</p><p style="margin:0;"> * Note that these names are for Windows. Other platforms can use</p><p
style="margin:0;"> * slightly different names.</p><p
style="margin:0;"> */</p><p style="margin:0;">
</p><p style="margin:0;">.light {</p><p style="margin:0;"> -fx-font-family: "<span
style="text-decoration:underline;text-decoration-color:#ff8040;text-decoration-style:wavy;">Noto</span> <span
style="text-decoration:underline;text-decoration-color:#ff8040;text-decoration-style:wavy;">Sans</span> Light";</p><p
style="margin:0;"> -fx-font-weight: normal;</p><p
style="margin:0;">}</p><p style="margin:0;">
</p><p style="margin:0;">.regular {</p><p style="margin:0;"> -fx-font-family: "<span
style="text-decoration:underline;text-decoration-color:#ff8040;text-decoration-style:wavy;">Noto</span> <span
style="text-decoration:underline;text-decoration-color:#ff8040;text-decoration-style:wavy;">Sans</span>";</p><p
style="margin:0;"> -fx-font-weight: normal;</p><p
style="margin:0;">}</p><p style="margin:0;">
</p><p style="margin:0;">.medium {</p><p style="margin:0;"> -fx-font-family: "<span
style="text-decoration:underline;text-decoration-color:#ff8040;text-decoration-style:wavy;">Noto</span> <span
style="text-decoration:underline;text-decoration-color:#ff8040;text-decoration-style:wavy;">Sans</span> Med";</p><p
style="margin:0;"> -fx-font-weight: bold;</p><p style="margin:0;">}</p><p
style="margin:0;">
</p><p style="margin:0;">.semi-bold {</p><p style="margin:0;"> -fx-font-family: "<span
style="text-decoration:underline;text-decoration-color:#ff8040;text-decoration-style:wavy;">Noto</span> <span
style="text-decoration:underline;text-decoration-color:#ff8040;text-decoration-style:wavy;">Sans</span> SemBd";</p><p
style="margin:0;"> -fx-font-weight: bold;</p><p style="margin:0;">}</p><p
style="margin:0;">
</p><p style="margin:0;">.bold {</p><p style="margin:0;"> -fx-font-family: "<span
style="text-decoration:underline;text-decoration-color:#ff8040;text-decoration-style:wavy;">Noto</span> <span
style="text-decoration:underline;text-decoration-color:#ff8040;text-decoration-style:wavy;">Sans</span>";</p><p
style="margin:0;"> -fx-font-weight: bold;</p><p style="margin:0;">}</p><p
style="margin:0;">
</p><p style="margin:0;">.black {</p><p style="margin:0;"> -fx-font-family: "<span
style="text-decoration:underline;text-decoration-color:#ff8040;text-decoration-style:wavy;">Noto</span> <span
style="text-decoration:underline;text-decoration-color:#ff8040;text-decoration-style:wavy;">Sans</span> <span
style="text-decoration:underline;text-decoration-color:#ff8040;text-decoration-style:wavy;">Blk</span>";</p><p
style="margin:0;"> -fx-font-weight: bold;</p><p style="margin:0;">}</p><p
style="margin:0;">
</p><p style="margin:0;">fonts-linux.less:
</p><p style="margin:0;">
</p><p style="margin:0;">.light {
-fx-font-family: "Noto Sans Light";
-fx-font-weight: normal;
}
.regular {
-fx-font-family: "Noto Sans";
-fx-font-weight: normal;
}
.medium {
-fx-font-family: "Noto Sans Medium";
-fx-font-weight: normal;
}
.semi-bold {
-fx-font-family: "Noto Sans SemiBold";
-fx-font-weight: normal;
}
.bold {
-fx-font-family: "Noto Sans";
-fx-font-weight: bold;
}
.black {
-fx-font-family: "Noto Sans Black";
-fx-font-weight: normal;
}
And using it for some arbitrary style is then done (also with LESS) like:</p><p
style="margin:0;">
</p><div style="background-color:#ffffff;padding:0px 0px 0px 2px;"><div
style="color:#000000;background-color:#ffffff;font-family:"Consolas";font-size:11pt;white-space:pre;"><p
style="margin:0;">.style-p3-extra-light {</p><p style="margin:0;"> -fx-font-size: 15;</p><p
style="margin:0;"> .light;</p><p style="margin:0;">}</p><p
style="margin:0;">
</p><p style="margin:0;">Not what you hoped for I think :)</p><p
style="margin:0;">
</p><p style="margin:0;">--John
</p></div></div><p style="margin:0;"></p></div>
</div>
<p></p>
<blockquote type="cite"
cite="mid:41D3226C-3A6A-4C5A-B9DA-0F1565DA06E1@gmail.com">
<pre class="moz-quote-pre" wrap="">
Dirk
</pre>
</blockquote>
</body>
</html>