Linux: Fix emojis not showing in the game log (vrcx-team#992)

* Fix emojis not showing in the game log on Linux * Download the font file using curl * Changed the emoji font to be a woff; Clarified font info
Natsumi-sama · Nov 26, 2024 · bd88b1d · bd88b1d
1 parent 3e2afde
commit bd88b1d
Show file tree

Hide file tree

Showing 11 changed files with 36 additions and 11 deletions.
diff --git a/Linux/fonts/README.md b/Linux/fonts/README.md
@@ -0,0 +1,2 @@
+### twemoji-color-font 
+- [https://github.com/13rac1/twemoji-color-font](https://github.com/13rac1/twemoji-color-font)
diff --git a/Linux/fonts/seguiemj.ttf b/Linux/fonts/seguiemj.ttf
diff --git a/Linux/install-vrcx.sh b/Linux/install-vrcx.sh
@@ -75,6 +75,14 @@ WINEPREFIX=$WINEPREFIX wine vrcx_setup.exe /S /SKIP_SHORTCUT=true
 rm vrcx_setup.exe
 
 
+# Install twemoji font as Segoe UI is proprietary and not included in wine
+echo "Download twemoji font."
+curl -L https://raw.githubusercontent.com/vrcx-team/VRCX/master/Linux/fonts/seguiemj.ttf -o seguiemj.ttf
+echo "Install twemoji font."
+cp seguiemj.ttf "$WINEPREFIX/drive_c/windows/Fonts"
+WINEPREFIX=$WINEPREFIX wine reg add 'HKLM\Software\Microsoft\Windows NT\CurrentVersion\Fonts' /v 'seguiemj' /t REG_SZ /d 'seguiemj.ttf' /f
+rm seguiemj.ttf
+
 echo "Install VRCX.png to $XDG_DATA_HOME/icons"
 curl -L https://raw.githubusercontent.com/vrcx-team/VRCX/master/VRCX.png -o "$XDG_DATA_HOME/icons/VRCX.png"
 

diff --git a/html/package-lock.json b/html/package-lock.json
diff --git a/html/package.json b/html/package.json
@@ -30,6 +30,7 @@
     "@fontsource/noto-sans-kr": "^5.0.19",
     "@fontsource/noto-sans-sc": "^5.0.20",
     "@fontsource/noto-sans-tc": "^5.0.20",
+    "@infolektuell/noto-color-emoji": "^0.2.0",
     "animate.css": "^4.1.1",
     "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^7.1.2",

diff --git a/html/src/app.js b/html/src/app.js
@@ -9,6 +9,7 @@ import '@fontsource/noto-sans-kr';
 import '@fontsource/noto-sans-jp';
 import '@fontsource/noto-sans-sc';
 import '@fontsource/noto-sans-tc';
+import '@infolektuell/noto-color-emoji';
 import Noty from 'noty';
 import Vue from 'vue';
 import VueLazyload from 'vue-lazyload';

diff --git a/html/src/app.scss b/html/src/app.scss
@@ -131,7 +131,7 @@ input,
 textarea,
 select,
 button {
-    font-family: 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans TC', 'Noto Sans SC',
+    font-family: 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans TC', 'Noto Sans SC', 'Noto Color Emoji',
         'Meiryo UI', 'Malgun Gothic', 'Segoe UI', sans-serif;
     line-height: normal;
 }

diff --git a/html/src/theme.material3.scss b/html/src/theme.material3.scss
@@ -55,49 +55,49 @@ body {
         ),
         rgb(var(--md-sys-color-surface));
     --md-sys-typescale-headline-medium-font: 'Google Sans', 'Noto Sans',
-        'Noto Sans TC', 'Noto Sans JP', 'Noto Sans SC', 'Roboto', sans-serif;
+        'Noto Sans TC', 'Noto Sans JP', 'Noto Sans SC', 'Noto Color Emoji', 'Roboto', sans-serif;
     --md-sys-typescale-headline-medium-line-height: 36px;
     --md-sys-typescale-headline-medium-size: 28px;
     --md-sys-typescale-headline-medium-weight: 500;
     --md-sys-typescale-headline-medium-tracking: 0;
     --md-sys-typescale-headline-small-font: 'Google Sans', 'Noto Sans',
-        'Noto Sans TC', 'Noto Sans JP', 'Noto Sans SC', 'Roboto', sans-serif;
+        'Noto Sans TC', 'Noto Sans JP', 'Noto Sans SC', 'Noto Color Emoji', 'Roboto', sans-serif;
     --md-sys-typescale-headline-small-line-height: 32px;
     --md-sys-typescale-headline-small-size: 24px;
     --md-sys-typescale-headline-small-weight: 500;
     --md-sys-typescale-headline-small-tracking: 0;
     --md-sys-typescale-title-medium-font: 'Google Sans', 'Noto Sans',
-        'Noto Sans TC', 'Noto Sans JP', 'Noto Sans SC', 'Roboto', sans-serif;
+        'Noto Sans TC', 'Noto Sans JP', 'Noto Sans SC', 'Noto Color Emoji', 'Roboto', sans-serif;
     --md-sys-typescale-title-medium-line-height: 24px;
     --md-sys-typescale-title-medium-size: 16px;
     --md-sys-typescale-title-medium-weight: 600;
     --md-sys-typescale-title-medium-tracking: 0.15px;
     --md-sys-typescale-label-large-font: 'Google Sans', 'Noto Sans',
-        'Noto Sans TC', 'Noto Sans JP', 'Noto Sans SC', 'Roboto', sans-serif;
+        'Noto Sans TC', 'Noto Sans JP', 'Noto Sans SC', 'Noto Color Emoji', 'Roboto', sans-serif;
     --md-sys-typescale-label-large-line-height: 20px;
     --md-sys-typescale-label-large-size: 14px;
     --md-sys-typescale-label-large-weight: 600;
     --md-sys-typescale-label-large-tracking: 0.1px;
     --md-sys-typescale-label-medium-font: 'Google Sans', 'Noto Sans',
-        'Noto Sans TC', 'Noto Sans JP', 'Noto Sans SC', 'Roboto', sans-serif;
+        'Noto Sans TC', 'Noto Sans JP', 'Noto Sans SC', 'Noto Color Emoji', 'Roboto', sans-serif;
     --md-sys-typescale-label-medium-line-height: 16px;
     --md-sys-typescale-label-medium-size: 12px;
     --md-sys-typescale-label-medium-weight: 600;
     --md-sys-typescale-label-medium-tracking: 0.5px;
     --md-sys-typescale-body-large-font: 'Google Sans', 'Noto Sans',
-        'Noto Sans TC', 'Noto Sans JP', 'Noto Sans SC', 'Roboto', sans-serif;
+        'Noto Sans TC', 'Noto Sans JP', 'Noto Sans SC', 'Noto Color Emoji', 'Roboto', sans-serif;
     --md-sys-typescale-body-large-line-height: 24px;
     --md-sys-typescale-body-large-size: 16px;
     --md-sys-typescale-body-large-weight: 400;
     --md-sys-typescale-body-large-tracking: 0.5px;
     --md-sys-typescale-body-medium-font: 'Google Sans', 'Noto Sans',
-        'Noto Sans TC', 'Noto Sans JP', 'Noto Sans SC', 'Roboto', sans-serif;
+        'Noto Sans TC', 'Noto Sans JP', 'Noto Sans SC', 'Noto Color Emoji', 'Roboto', sans-serif;
     --md-sys-typescale-body-medium-line-height: 20px;
     --md-sys-typescale-body-medium-size: 14px;
     --md-sys-typescale-body-medium-weight: 400;
     --md-sys-typescale-body-medium-tracking: 0.25px;
     --md-sys-typescale-body-small-font: 'Google Sans', 'Noto Sans',
-        'Noto Sans TC', 'Noto Sans JP', 'Noto Sans SC', 'Roboto', sans-serif;
+        'Noto Sans TC', 'Noto Sans JP', 'Noto Sans SC', 'Noto Color Emoji', 'Roboto', sans-serif;
     --md-sys-typescale-body-small-line-height: 16px;
     --md-sys-typescale-body-small-size: 12px;
     --md-sys-typescale-body-small-weight: 400;

diff --git a/html/src/theme.pink.scss b/html/src/theme.pink.scss
@@ -14,7 +14,7 @@
     --lighter-lighter-lighter-lighter-bg: #857070;
     --lighter-border: #aa6065;
     --font: 'Poppins', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans TC',
-        'Noto Sans SC', sans-serif;
+        'Noto Sans SC', 'Noto Color Emoji', sans-serif;
 }
 body,
 button,

diff --git a/html/src/vr.js b/html/src/vr.js
@@ -8,6 +8,7 @@ import '@fontsource/noto-sans-kr';
 import '@fontsource/noto-sans-jp';
 import '@fontsource/noto-sans-sc';
 import '@fontsource/noto-sans-tc';
+import '@infolektuell/noto-color-emoji';
 import Noty from 'noty';
 import Vue from 'vue';
 import VueI18n from 'vue-i18n';

diff --git a/html/src/vr.scss b/html/src/vr.scss
@@ -175,7 +175,7 @@ input,
 textarea,
 select,
 button {
-    font-family: 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans TC', 'Noto Sans SC',
+    font-family: 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans TC', 'Noto Sans SC', 'Noto Color Emoji',
         'Meiryo UI', 'Malgun Gothic', 'Segoe UI', sans-serif;
     line-height: normal;
     text-shadow:
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		### twemoji-color-font
		- [https://github.com/13rac1/twemoji-color-font](https://github.com/13rac1/twemoji-color-font)