CSS
CSS Custom Fonts and missing Unicode Ranges
The webfont that I was using displayed the wrong character - instead of the Greek Δ (delta) 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/Geogrotesque-Regular.woff2') format('woff2');
}
@font-face {
font-family: Geogrotesque-Regular;
src: local('Arial');
/* unicode range for greek alphabet */
unicode-range: U+03??;
}
/* <unicode-range> values */
unicode-range: U+26; /* single codepoint */
unicode-range: U+0-7F;
unicode-range: U+0025-00FF; /* codepoint range */
unicode-range: U+4??; /* wildcard range */
unicode-range: U+0025-00FF, U+4??; /* multiple values */
- https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range
- https://gist.github.com/marcus-at-localhost/72dc8aab70d2eff140d75e844dc7e01b
- https://en.wikipedia.org/wiki/List_of_Unicode_characters
CSS Grid
Break out of the grid
- Breaking Out With CSS Grid Layout - Cloud Four
- Breaking Out With CSS Grid Layout: Demo 4
- Breaking out with CSS Grid explained
