Unable to set font for Chart.js charts

zoidbergRSA

Hello, I've been struggling with this issue for hours and I hope somebody is able help me, I am able to set a custom font 'Rubik' from an asset reference and the report text renders correctly with the font. However, try as I may I'm unable to get my chart.js charts to use the same font. this is my report template:

<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <style>
        {#asset styles/styles.css @encoding=utf8}
        @font-face {
            font-family: 'Rubik';
            src: url({#asset /templates/shared/Rubik-VariableFont_wght.ttf @encoding=dataURI});
            format('truetype');
        }
        * {
            font-family: 'Rubik';
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/metro/4.1.5/css/metro.min.css">
    <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.min.js'></script>
  </head>

and I set the Chart global default font here before drawing the chart:

<script>
        // [data definitions here]
        
        Chart.defaults.global.defaultFontFamily = "Rubik";

        const quarterChartCanvas = document.getElementById('quarterChart').getContext('2d');

        new Chart(quarterChartCanvas, {
            type: 'bar',
            data: {
                labels: weeksLabels,
                datasets: [{
                    data: weeksValues,
                    backgroundColor: 'rgba(0, 56, 101, 1)',
                    borderColor: 'rgba(0, 191, 111, 1)',
                    pointStyle: 'line',
                    label: weeksAvgLabel
                }]
            },
            options: {
                animation: false,
                annotation: {
                    annotations: [{
                        type: 'line',
                        mode: 'horizontal',
                        scaleID: 'y-axis-0',
                        value: weeksAvg,
                        borderColor: 'rgba(0, 191, 111, 1)',
                        borderDash: [10, 10],
                        borderWidth: 2
                    }],
                },
                scales: {
                    yAxes: [{
                        scaleLabel: 
                        {
                            display: true,
                            labelString: weeksUnit,
                            fontSize: 16
                        },
                        ticks: 
                        {
                            beginAtZero: true,
                        }
                    }],
                    xAxes: [{
                        scaleLabel: {
                            display: true,
                            labelString: JSON.parse(weeksAxisLabel),
                            fontSize: 16,
                        },
                        gridLines: {
                            offsetGridLines: false
                        }
                    }]
                }
            }
        });
</script>

Any help will be greatly appriciated!

bjrmatos

hi! at first, this looks right, however maybe the Chartjs expects to have other fallbacks for the font, i'm not sure about it. or maybe the font needs to be set something like "'Rubik", i remember seeing this syntax somewhere

also Chartjs seems to have a section in docs about missing fonts, probably a good idea to spend some time searching for similar issues in the library, maybe the font needs to contains also other variables for bold text, etc