imported font doesn't support special characters in html - html

Question

i imported a custom font to my css. the problem is special characters like apostrophs and commas are not shown in html.
my idea was to make a fallback to another font for not supported characters, but have no clue how to.
Here is a piece auf my code
HTML
<h2>apostrophe isn't shown</h2>
CSS
#font-face { font-family: 'SunriseInternational';
src: url('fonts/SunriseInternational.otf') format('otf'),
url('fonts/SunriseInternational.ttf') format('truetype'); }
h1,
h2,
.h1,
.h2 {
font-family: 'SunriseInternational', 'Branding-Medium', sans-serif;
font-size: 8vw;
color: #ffffff;
letter-spacing:2px;
}
Branding-Medium is a font that supports special characters in the main text. But the fallback seems not to work.

Answer 1

If the SunriseInternational font is the same as this one, indeed it doesn't contain all the ASCII characters.
Now fonts are supposed to report which Unicode ranges they support, so that the browser (or any other program using the font) knows which characters can be displayed using them, but since "ASCII" is such a range, there is no way for the font itself to differentiate between which characters it supports in that range and which it doesn't. (Apparently the idea is that if a font supports ASCII, it's supposed to support all 95 ASCII characters, not just a handful of them.)
So you will have to tell the browser manually which characters are in the font.
#font-face {
font-family: 'SunriseInternational';
src: url('fonts/SunriseInternational.otf') format('otf'),
url('fonts/SunriseInternational.ttf') format('truetype');
unicode-range: U+20-21, U+3F, U+41-5A, U+61-7A;
}
h1,
h2,
.h1,
.h2 {
font-family: 'SunriseInternational', 'Branding-Medium', sans-serif;
font-size: 8vw;
color: #ffffff;
letter-spacing:2px;
}
Only then will the browser know which characters to use from this font and which to display in the next font (Branding-Medium).