CSS: display a single unicode character (like capital ẞ) with a different font

So you've just built a new website and you do your last fine tuning and your client asks you to have some of the headlines capitalized. No problem – at least, when you're not in Germany.

Since a while in Germany we have a new letter officially, the capital sharp s, which before was often written as (historically problematic) "SS", as a workaround. The capital sharp s letter has in fact been around for a long time but it took many years to make it official. Unfortunately, the font you chose for your client does not contain this letter. Yet, at least. So what to do?

The solution is to find an alternate, visually comparable font containing this letter, then to tweak the corresponding CSS @font-face style's unicode-range property and either copypaste this letter from one of those webbased utf-8 compendia to your document since you won't find it on your keyboard, or to write it as unicode representation directly into your HTML.

Here is a table with German Umlauts, corresponding unicode values and HTML-codes:

Character Unicode HTML-code
Ä U+00C4 &#00C4;
Ö U+00D6 &#00D6;
Ü U+00DC &#00DC;
ß U+00DF &#00DF;
ä U+00E4 &#00E4;
ö U+00F6 &#00F6;
ü U+00FC &#00FC;
U+1E9E &#1E9E;

Now in CSS, you'd write something like the following. I assume you upload your fonts to a directory on the same level as your CSS directory where you place the code below. I chose a free Google font for demonstration purposes and the free Liberation font for the capital sharp ẞ. Just for fun I did this exchange for the headline of this article, too.

@font-face { 
  /* this is the base */ 
  font-family: 'BASIC_FONT';
  src: url("../fonts/Arimo/ArimoRegular.ttf");
}
@font-face {
  /* following, replacing certain characters
   * first: capital ẞ
   */
  font-family: 'BASIC_FONT';
  src: url("../fonts/Liberation/LiberationSans-Regular.ttf");
  unicode-range: U+1E9E-1E9E; /* capital ẞ */
}
/**
 * giving more examples 
 */
@font-face {
  font-family: 'BASIC_FONT';
  src: url("../fonts/Liberation/LiberationSans-Regular.ttf");
  unicode-range: U+00C4-00FC; /* all Umlauts + ß */
}
@font-face {
  font-family: 'BASIC_FONT';
  src: url("../fonts/Arimo/ArimoRegular.ttf");
  unicode-range: U+00DF-00DF; /* small ß only */
}
/* this could be extended to e.g. numbers only */
@font-face {
  font-family: 'BASIC_FONT';
  src: url("../fonts/Liberation/LiberationSans-Regular.ttf");
  unicode-range: U+0030-0039; /* numbers only */
}
/**
 * overall styling of the font 
 */
h1.fontswap {
  display: block;
  font-family: "BASIC_FONT", sans-serif;
  font-weight: 300;
  font-size: 2.5em;
  letter-spacing: -0.03em;
  font-variant: small-caps;
  color: #333;
}

Go on styling your text as usual. New property values will apply to all of the font-face in question. This means it is not possible to display just certain characters in e.g. italics or bold with this technique.

Finally, your special characters will be displayed with a different font and it is possible to write Cẞ. Instead of CSS. Haha!

If this helped you or if you have questions or additions, feel free to leave a comment below, anonymous if you like.

Add new comment/ Neuen Kommentar schreiben

Weiteres
[Boah!
Haben Sie
einen großen
Bildschirm]