2

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.

fbrs
  • 27
  • 1
  • 8
  • 1
    Possible duplicate of [Fallback fonts on special characters](http://stackoverflow.com/questions/11395584/fallback-fonts-on-special-characters) – Dryden Long Mar 06 '17 at 19:26
  • this didn't worked for me. with branding-medium i also have declared a fallback, that supports commas and apostrophes – fbrs Mar 06 '17 at 19:50
  • Did you try the unicode range like the accepted answer suggests? – Dryden Long Mar 06 '17 at 19:57
  • Sure, i added unicode-range: U+26; and it partially worked - it got the fallback to Branding-Medium and the appostrophe appeared. But the whole headline is now in Branding-Medium, but it should only be the apostrophe – fbrs Mar 06 '17 at 20:10
  • hmm, you might have your selection inverted, and `unicode-range: U+26;` selects only ampersand. You'll want `unicode-range: U+27;` to hit just the apostrophe. Try it with a crazy different font so it's really obvious that you are getting the right `unicode-range`. – cloudworks Mar 06 '17 at 20:14
  • i have a little workaround now: , not very comfortable but i have it to use only at two locations – fbrs Mar 06 '17 at 20:35
  • @fbrs That's going the wrong way about it. What you need to do is use unicode-range to tell the browser which exact characters to use from the Sunrise font, and then it will use Branding automatically for the other characters. – Mr Lister Mar 07 '17 at 09:10

1 Answers1

4

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).

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
  • Didn't know about any of this myself. Definitely something to keep in mind, thanks! – domsson Mar 07 '17 at 10:00
  • nice, this works great! i also found out, that there's a premium version of the font. I think it contains special characters. maybe i will buy it so the font is consistent. Thanks for your help, i really got it now with the range – fbrs Mar 07 '17 at 14:41
  • How would I get it to support numbers (digits) as well? I'm having an issue where numbers seems to be ignoring the font. I'm using American Purpose Casual 02 – Carl Du Plessis Dec 28 '20 at 04:57