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

via

/* <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 */

CSS Grid

Break out of the grid

Grid in Grid

• #programming, #css, #fonts, #grid