Webfont without umlaut

Question

I recently bought a font and wanted to embed it into my website using web fonts.

Now the problem is: After buying it, I realized that the font is missing the umlauts, such as ä, ü and ö, so it shows an empty space instead of the (missing) character.

Is there a way to prevent this? Like tell the css to use another font for the missing characters? Or would I have to edit the font itself?

Answer 1

There is no acceptable way to prevent this. Use a different font. (It is possible that there is an extended version, with higher fee, of the font you bought.) The font should be selected so that it contains all characters, at least all letters, that you may need in the text.

It is possible to use different fonts for different letters in a word, using various techniques (@font-face with range settings being the most elegant, but with limited browser support). However, it means a typographic disaster. Especially if the text contains e.g. both “ü” and “u”, there is usually a striking mismatch.

Editing the font itself is technically possible using a font editor, but normally illegal unless permitted in the font license or in exemptions to copyright in applicable legislation.

Answer 2

Because there is no "easy", or clean way around this except remodeling the font files, here's a small JS script to replace extended ASCII chars with a <span>. (One could only do this for the exact, required characters, but you'll propably end up asking yourself the same question again once you accidentally come across another character that's not supported.)

JS only on example text:

"Hêllo wörld. ÄÖÜßäöü".replace(/([\x80-\xff])/gi, '<span class="arial">$&</span>')

Result:

H<span class="arial">ê</span>llo w<span class="arial">ö</span>rld. <span class="arial">Ä</span><span class="arial">Ö</span><span class="arial">Ü</span><span class="arial">ß</span><span class="arial">ä</span><span class="arial">ö</span><span class="arial">ü</span>

jQuery:

$('.webfont').each(function(){
    this.innerHTML = this.innerHTML.replace(/([\x80-\xff])/gi, '<span class="arial">$&</span>')
});

The nodes with .webfont should only contain text, although it should also work in most other cases.