Monica Dinculescu

On multiple projects I've used a tool [1] to closely match a built-in font to a web font in order to present content faster and avoid avoid FOUC (Flash of Unstyled Content/Text). In one case, I replaced webfonts entirely with native platform fonts, purely for speed.

With this approach you can be more practical with your goals. If the design cannot be compromised, you can still get to initial paint quickly and let the WOFF files load in as needed.

Edit: If anyone is looking for more information about this, the post [2] from this tool's author from 2016 does a good job of discussing the tradeoffs.

[1] https://github.com/notwaldorf/font-style-matcher

[2] https://meowni.ca/posts/web-fonts/

TL;DR: This is pixel emoji font:

> 166 emoji in total, 12x12px each, in one of six colors

> If you want to use it, you can download the font here[TTF], and use it as a `font-face`:

@font-face
{
font-family: og-emoji;
src: url(/fonts/og-dcm-emoji.ttf);
}
.og
{
font-family: og-emoji, sans-serif;
}
<span class='og'>
{emoji_character}</span>

> If you’re going to use it, maybe give me some credit, because I spent an unhealthy amount of time on it

[TTF] https://meowni.ca/fonts/og-dcm-emoji.ttf

http://blog.codinghorror.com
http://lea.verou.me/
http://ejohn.org/
http://byfat.xxx/
http://www.windytan.com/
http://meowni.ca/
and many others