[GIS] Add halo to label in QGIS print composer with a specific font (using HTML)

htmllabelingprint-composerqgis

I am using HTML code to buffer a label in QGIS Print Composer, as described in Question 84324.

Sadly, this code also changes the font and I can´t change it back using the font size dialog. I´m not sure what it does, it might just add serifs that I can´t remove, since the font DOES change when I use the font size dialog, but still the output font in the label looks very different from the original "MS Shell Dlg 2" font (compare labels "1 Germany" and "2 and 3 Germany"). I have tried playing around with the code to change the font but couldn´t get the effect I want.

Example of the labels

What I actually want: Label "1 Germany", but with a white buffer and in this exact font (MS Shell Dlg 2, size 24)

Code for Label "2 Germany": <p style="-webkit-text-stroke: 8px white">2 - Germany</p>

Code for Label "3 Germany": <span style="color:black;text-shadow: 0px 0px 2px #4d2d4d, 0px 5px 10px #aefe00;">3 - Germany</span>

How do I set the specific font "MS Shell Dlg 2" with a white halo?

EDIT: Final code as suggested by Thomas:

<style>body {color: 'black';font-size: 50px;}.label1 {font-family: Tahoma;-webkit-text-stroke: 8px white}</style><span class="label1">Germany</span>

Best Answer

You may try to add a HTML <style> block. Normally, it's only HTML with some limitations due to QtWebKit html rendering (QGIS relies on it as confirmed with this discussion http://osgeo-org.1560.x6.nabble.com/QGIS-Developer-qgis2web-and-qtwebkit-td5378226.html#a5378445).

You can set the following in an HTML frame

<style>
body {
  color: 'black';
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
}
.otherfont {
  font-family: Tahoma, Times New Roman; /*Tahoma is an alias to find font. The real name is Tahoma. See https://docs.microsoft.com/en-us/windows/win32/intl/using-ms-shell-dlg-and-ms-shell-dlg-2*/
  font-size: 18px;
  -webkit-text-shadow: 0px 0px 2px #4d2d4d, 0px 5px 10px #aefe00;
  text-shadow: 0px 0px 2px #4d2d4d, 0px 5px 10px #aefe00;
}
</style>
<h1>My other title</h1>
<h1 class="otherfont">Alternative</h1>
<br>
my latest text

The above answer was generic. More specific now. So, if you have three styles you set below code

<style>
body {
  color: 'black';
  font-size: 14px;
}
.label1 {
  font-family: Tahoma;
  /*Add the style for the white halo here*/
}
.label2 {
  color: black;text-shadow: 0px 0px 2px #4d2d4d, 0px 5px 10px #aefe00;
}

.label3 {
 -webkit-text-stroke: 8px white;
}
</style>
<span class="label1">1 - Germany</span>
<p class="label2">2 - Germany</p>
<span class="label3">3 - Germany</span>
Related Question