Skip to content

Instantly share code, notes, and snippets.

@marcus-at-localhost
Last active June 16, 2020 08:03
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save marcus-at-localhost/72dc8aab70d2eff140d75e844dc7e01b to your computer and use it in GitHub Desktop.
[Selective Webfonts with Unicode Range] #css #unicode #webfonts

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??; 
}

via

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment