docs: use noto for custom font demo (#432)

nolanlawson · Aug 4, 2024 · b0c189d · b0c189d
1 parent 2195440
commit b0c189d
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 29 deletions.
diff --git a/README.md b/README.md
@@ -135,7 +135,7 @@ This will log:
 - [Button with tooltip/popover](https://nolanlawson.github.io/emoji-picker-element/demos/tooltip/index.html) ([source](https://github.com/nolanlawson/emoji-picker-element/blob/master/docs/demos/tooltip/index.html))
 - [Inserting emoji into a text input](https://nolanlawson.github.io/emoji-picker-element/demos/input/index.html) ([source](https://github.com/nolanlawson/emoji-picker-element/blob/master/docs/demos/input/index.html))
 - [In a React app](https://nolanlawson.github.io/emoji-picker-element/demos/react/index.html) ([source](https://github.com/nolanlawson/emoji-picker-element/blob/master/docs/demos/react/index.html))
-- [Custom emoji font](https://nolanlawson.github.io/emoji-picker-element/demos/twemoji-mozilla/index.html) ([source](https://github.com/nolanlawson/emoji-picker-element/blob/master/docs/demos/twemoji-mozilla/index.html)) 
+- [Custom emoji font](https://nolanlawson.github.io/emoji-picker-element/demos/custom-font/index.html) ([source](https://github.com/nolanlawson/emoji-picker-element/blob/master/docs/demos/custom-font/index.html))
 - [Fallback for missing flag emoji on Windows](https://nolanlawson.github.io/emoji-picker-element/demos/flags/index.html) ([source](https://github.com/nolanlawson/emoji-picker-element/blob/master/docs/demos/flags/index.html))
 
 ### Emoji support
@@ -154,7 +154,7 @@ emoji-picker {
 }
 ```
 
-Then, specify the maximum emoji version supported by the font (see [Emojipedia](https://emojipedia.org/emoji-versions/) for a list of versions).
+Then, specify the maximum emoji version supported by the font. (See [Emojipedia](https://emojipedia.org/emoji-versions/) for a list of versions.)
 
 In HTML:
 

diff --git a/docs/demos/custom-font/index.html b/docs/demos/custom-font/index.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang=en>
+<head>
+  <title>emoji-picker-element: using Noto Color Emoji font</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Noto+Color+Emoji" rel="stylesheet">
+  <style>
+      emoji-picker {
+          --emoji-font-family: "Noto Color Emoji";
+      }
+  </style>
+</head>
+<body>
+<h1>emoji-picker-element: using Noto Color Emoji font</h1>
+<p>
+  This demo shows how to use emoji-picker-element with <a href="https://fonts.google.com/noto/specimen/Noto+Color+Emoji">Google Noto Color Emoji</a> as a custom emoji font.
+</p>
+<p>
+  Note that this carries a performance cost due to downloading the additional font file. Also note that alignment may be off in Safari due to <a href="https://bugs.webkit.org/show_bug.cgi?id=249943">a WebKit bug</a>, and
+  that <a href="https://caniuse.com/?search=colr">not all browsers support COLR fonts</a>.
+  Use this approach with care.
+</p>
+<p>
+  Also note that the emoji version is pinned to 15.1 because this is the latest version supported by Google Noto Color Emoji as of this writing (August 2024).
+</p>
+<emoji-picker emoji-version="15.1"></emoji-picker>
+<script type="module" src="https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/index.js"></script>
+</body>
+</html>
diff --git a/docs/demos/twemoji-mozilla/index.html b/docs/demos/twemoji-mozilla/index.html