OpenLayers – Setting FontFamily in Text Label

fontopenlayers

Changing the font-Family of a style objects' text label does not have an impact – it always looks the same, no matter what font-family I set. Do I have to provide the respective fonts to openlayers somehow or do I have to do something else? 

            var fontFamily = "Arial"; // "Verdana" // "Courier New";
            style.setText(new ol.style.Text({
                text: 'my-label',
                font: '12px bold '+fontFamily,
                overflow: true,
            }));

Funnily, fontFamily = "Helvetica, sans-serif"; works, while fontFamily = "Helvetica"; and fontFamily = "sans-serif"; do not work (i.e. is displayed with the default serify font). Any explanation for that?

Best Answer

Searching for the same reasons, I found this to be a good solution: https://stackoverflow.com/questions/24459826/how-to-get-a-label-bold-in-open-layers-3

Basically Mike's solution in the comments on your question.

I've verified that this works for OpenLayers 6.5 as well. So apparently, the syntax is very sensitive. Bold must be lowercase (bold) and must be followed by the other two parameters, separated by one space. E.g.:

var fontFamily = "Arial, Verdana, Courier New";
style.setText(new ol.style.Text({
  text: 'my-label',
  font: 'bold 12px ' + fontFamily,
  overflow: true,
}));

This doesn't work, because it's missing the 2nd and 3rd parameters: font: 'bold'

And this breaks entirely if I don't have access to font family in the given context, e.g.: font: 'bold 12px Open Sans'. Not even the bold or 12px will have any effect, because the inclusion of an invalid font breaks the whole line.

So a safe bet is something like this, which uses system fonts (unless you've correctly provided other fonts within the context): font: 'bold 12px Arial, Verdana, Courier New'

Or something more general like this works as well: font: 'bold 12px sans-serif'

Related Question