But how can a font render colors and shapes?
Rendering shapes
Cypher Code is based on Fira Code. It supports something called ligatures. They allow certain combinatinos symbols to render as a single larger symbol although underlying text remains the same:
Ligatures are not limited to two characters, so here the whole pattern is a ligature:
And what about the colors?
The same engine can do syntax highlighting. It turns out the font format, OpenType, has contextual substitution powerful enough to express most of the TextMate regex-based grammar for syntax highlighting.
Then OpenType has built in support for color fonts, although it's regularly ignored by code editors, as it's better done by a proper syntax highlighter after rendering of the font.