Add Noto Color Emoji font support

This is a font from [Google](https://www.google.com/get/noto/).

Arch Linux [has a recommendation of it](https://wiki.archlinux.org/index.php/fonts#Emoji_and_symbols).

Add info about this into `docs/user/markdown.md#emoji`

5 files changed, 12 insertions, 3 deletions

diff --git a/app/assets/javascripts/emoji/support/unicode_support_map.js b/app/assets/javascripts/emoji/support/unicode_support_map.js
index 8c1861c56db..651169391fe 100644
--- a/app/assets/javascripts/emoji/support/unicode_support_map.js
+++ b/app/assets/javascripts/emoji/support/unicode_support_map.js
@@ -86,7 +86,7 @@ function generateUnicodeSupportMap(testMap) {
   canvas.height = numTestEntries * fontSize;
   ctx.fillStyle = '#000000';
   ctx.textBaseline = 'middle';
-  ctx.font = `${fontSize}px "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`;
+  ctx.font = `${fontSize}px "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`;
   // Write each emoji to the canvas vertically
   let writeIndex = 0;
   testMapKeys.forEach(testKey => {
diff --git a/app/assets/stylesheets/framework/emojis.scss b/app/assets/stylesheets/framework/emojis.scss
index 3cde0490371..a8ec1e1145a 100644
--- a/app/assets/stylesheets/framework/emojis.scss
+++ b/app/assets/stylesheets/framework/emojis.scss
@@ -2,7 +2,7 @@ gl-emoji {
   font-style: normal;
   display: inline-flex;
   vertical-align: middle;
-  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 1.5em;
   line-height: 0.9;
 }
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index efc54196b75..baae4772708 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -374,7 +374,7 @@ $diff-jagged-border-gradient-color: darken($white-normal, 8%);
 $monospace-font: 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas', 'Ubuntu Mono',
   'Courier New', 'andale mono', 'lucida console', monospace;
 $regular-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
-  'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 
 /*
 * Dropdowns
diff --git a/changelogs/unreleased/add_google_noto_color_emoji_font.yml b/changelogs/unreleased/add_google_noto_color_emoji_font.yml
new file mode 100644
index 00000000000..9ba46262767
--- /dev/null
+++ b/changelogs/unreleased/add_google_noto_color_emoji_font.yml
@@ -0,0 +1,5 @@
+---
+title: Add Noto Color Emoji font support
+merge_request: 19036
+author: Alexander Popov
+type: changed
diff --git a/doc/user/markdown.md b/doc/user/markdown.md
index bd199b55a61..ea6acecc387 100644
--- a/doc/user/markdown.md
+++ b/doc/user/markdown.md
@@ -234,6 +234,8 @@ https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md#emoji
 
 	Consult the [Emoji Cheat Sheet](https://www.emojicopy.com) for a list of all supported emoji codes. :thumbsup:
 
+	Most emoji are natively supported on macOS, Windows, iOS, Android and will fallback to image-based emoji where there is lack of support. On Linux, you can download [Noto Color Emoji](https://www.google.com/get/noto/help/emoji/) to get full native emoji support.
+
 Sometimes you want to :monkey: around a bit and add some :star2: to your :speech_balloon:. Well we have a gift for you:
 
 :zap: You can use emoji anywhere GFM is supported. :v:
@@ -244,6 +246,8 @@ If you are new to this, don't be :fearful:. You can easily join the emoji :famil
 
 Consult the [Emoji Cheat Sheet](https://www.emojicopy.com) for a list of all supported emoji codes. :thumbsup:
 
+Most emoji are natively supported on macOS, Windows, iOS, Android and will fallback to image-based emoji where there is lack of support. On Linux, you can download [Noto Color Emoji](https://www.google.com/get/noto/help/emoji/) to get full native emoji support.
+
 ### Special GitLab References
 
 GFM recognizes special references.