Improving Triton theme font-weight: 300 being light on projectors?

[estesbubba]

Our custom theme extends Triton and the 300 and 400 font weights look fine on desktops but the 300 font is light and pixelated when connected to a projector. Anyone have suggestions on how to make the 300 weight bolder when doing a demo using a projector?

I changed the zoom to 125% which helped but then the app looks big and screen real estate is lost.

I tried adding 'font-weight: 400 !important' to body and x-body but grids, labels, etc. still render as 300.

I could make a theme just for projector presentations but that adds to build times and more files.

Is there a Chrome extension that will just make fonts bolder without changing the size of everything else? I can't find one. Any other suggestions?

[mitchellsimoens]

Have you tried using the $font-weight (and $font-weight-bold) or individual vars (like $form-label-font-weight) to change the weight?

[estesbubba]

I could make a separate theme changing to these values but I would prefer to be able to do it at run time instead of build time.

$font-weight: dynamic(400);
$font-weight-bold: dynamic(600);

My first thought was to add ?projector to the query string and have the code add a x-projector class to the body but trying font-weight: 400 !important on the body in dev tools didn't change grids, labels, etc. I could have the x-project class override everywhere needed but then that would be tricky tracking down each class needed to do that.

[estesbubba]

Looks like I need the * as this worked in dev tools. Now I'm going to try and implement it into my code.

body * {
    font-weight: 400;
}

[estesbubba]

Ended up being simple once I figured out the selector - here is my GSP code. All I need to do is put ?projector on the query string and it works.

<g:if test="${params.projector != null}">
    <style type="text/css">
    body * {
        font-weight: 400 !important;
    }
    </style>
</g:if>