https://github.com/infolektuell/noto-color-emoji

Self-hosted Noto Color Emoji font for Chrome and Edge
https://github.com/infolektuell/noto-color-emoji

browser chrome color colrv1 css edge emoji font web

Last synced: 2 months ago
JSON representation

Self-hosted Noto Color Emoji font for Chrome and Edge

• Host: GitHub
• URL: https://github.com/infolektuell/noto-color-emoji
• Owner: infolektuell
• License: ofl-1.1
• Created: 2024-07-12T12:41:13.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-09-28T05:42:35.000Z (3 months ago)
• Last Synced: 2024-09-30T17:01:20.914Z (3 months ago)
• Topics: browser, chrome, color, colrv1, css, edge, emoji, font, web
• Language: CSS
• Homepage: https://infolektuell.github.io/noto-color-emoji/
• Size: 5.37 MB
• Stars: 6
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Noto Color Emoji

[![npm version](https://badge.fury.io/js/@infolektuell%2Fnoto-color-emoji.svg)](https://badge.fury.io/js/@infolektuell%2Fnoto-color-emoji)

This npm package contains my solution to use Noto Color Emoji font in browsers with COLRv1 requirements (Chrome, Edge).

It's just css with font-face declarations and respective font files, install and import it in vite projects and alike.

## Why this package?

- [@fontsource/noto-color-emoji][fontsource] [does not work in Edge or Chrome, just in Safari][issue].

- In Safari on iOS, the font doesn't work reliably and disappears on zooming or after waiting for a moment.

  This can be tested on the [Google Fonts] page.

- For color fonts, there are two competing standards (COLRv1 and OpenType-SVG),

  and none of them is supported in all browsers.

- Chrome, Edge, and friends want COLRv1, Safari wants SVG, Firefox is ok with both of them.

- [Google Fonts] dynamically generates the css containing compatible font-face declarations based on user agent.

  But I want to host the files statically.

- The fontsource package only ships font files with SVG tables, no COLRv1.

- This package ships the COLRv1 font files in woff2 format.

  They were downloaded from [Google Fonts] using Firefox.

- The css declarations in this package use the [New font-face syntax] with the `tech` function,

  so browsers with COLRv1 support can load the font files and others can use their system font.

  Apple already has beautiful icons, others get the Noto icons.

- I'd like to use this font on all devices, but this seems not possible in the current situation.

## Install

```sh

npm i @infolektuell/noto-color-emoji

```

## Usage

If you're using vite or vite-based bundler, import this package in your css and set your font family:

```css

@import '@infolektuell/noto-color-emoji';

:root {

  font-family: Inter, Noto Color Emoji, system-ui, Avenir, Helvetica, Arial, sans-serif;

}

```

[issue]: https://github.com/fontsource/fontsource/issues/588

[google fonts]: https://fonts.google.com/noto/specimen/Noto+Color+Emoji

[fontsource]: https://fontsource.org/fonts/noto-color-emoji

[new font-face syntax]: https://fullystacked.net/new-font-face-syntax/