Truly cross-browser/cross-platform font-rendering web embedded fonts? Does it all come to images? [closed]

1. Why do fonts render differently in different browsers?
2. How does the browser render text?
3. What fonts are supported by all browsers?
4. How are fonts rendered?

Why do fonts render differently in different browsers?

If you notice that your text fonts look different on different browsers, it is because different browsers and devices use different rendering engines, and therefore may result in minor differences. Sometimes these minor differences can have a domino effect.

How does the browser render text?

A simple text and image are rendered on the screen. From previous explanations, the browser reads raw bytes of the HTML file from the disk (or network) and transforms that into characters. The characters are further parsed into tokens. As soon as the parser reaches the line with <link rel="stylesheet" href="style.

What fonts are supported by all browsers?

All major browsers support WOFF/WOFF2 (Web Open Font Format versions 1 and 2). Even older browsers such as IE9 (released in 2011) support the WOFF format. WOFF2 supports the entirety of the TrueType and OpenType specifications, including variable fonts, chromatic fonts, and font collections.

How are fonts rendered?

The process of transforming font outlines into pixels is called rasterization. The operating system's text-rendering engine places the outline (ie the shape) of each character at the desired font size on a pixel grid. Next, it colours all the pixels whose centre is inside the outline (see image below).