The webfont that I was using displayed the wrong character - instead of the Greek Δ (delata) it showed a middot.
A look into the font file revealed that the unicode range for Greek characters was filled with other characters.
Thanks to css we can set the attribute unicode-range
and specify a single character in a different font or whole ranges.
This is helpful if you use a different font for cyrillic or greek text.
@font-face {
font-family: 'Geogrotesque-Regular';
src: url('fonts/webfonts/2E61E6_2_unhinted_0.woff2') format('woff2'), url('fonts/webfonts/2E61E6_2_unhinted_0.woff') format('woff'), url('fonts/webfonts/2E61E6_2_unhinted_0.ttf') format('truetype');
}
@font-face {
font-family: Geogrotesque-Regular;
src: local('Arial');
/* unicode range for greek alphabet */
unicode-range: U+03??;
}