Improve: フォントを改善 (VOICEVOX#1103)

Co-authored-by: Hiroshiba <[email protected]>

.gitattributes

@@ -1,2 +1,3 @@
 src/openapi/**/* linguist-generated=true
 openapi.json linguist-generated=true
+*.woff2 linguist-vendored=true

docs/フォントについて.md

@@ -0,0 +1,32 @@
+# フォントの作り方
+
+VOICEVOX では改変したRounded M+ 1pを使用しています。  
+具体的には、
+- ヒント情報の削除
+- ttfからwoff2への変換
+を行っています。
+
+## 手順
+
+1. [自家製 Rounded M+ とは](http://jikasei.me/font/rounded-mplus/about.html)からRounded M+をダウンロードします。
+
+2. [ttfautohint](https://freetype.org/ttfautohint/)をインストールします。
+> **Note**
+> [ttfautohint-py](https://pypi.org/project/ttfautohint-py/)を使用しました。
+
+3. [woff2](https://github.com/google/woff2)をビルドします。
+
+4. `rounded-mplus-20150529.7z`から`rounded-mplus-1p-(ウェイト).ttf`を全て`src/fonts`に解凍します。
+5. ttfautohintを使用して、Rounded M+のヒント情報を削除します。名前は`Unhinted Rounded M+ 1p`とします。
+6. woff2を使用して、ttfからwoff2へ変換します。
+
+[#1103](https://github.com/VOICEVOX/voicevox/pull/1103)の作成には以下のスクリプトを使用しました（PowerShell 7.3.1）
+
+```pwsh
+# cwd：src/fonts
+foreach ($f in gci("./*.ttf")){
+  py -m ttfautohint -dF " Unhinted" $f.name "unhinted-$($f.name)"
+  woff2_compress.exe "unhinted-$($f.name)"
+}
+```
+

src/styles/_index.scss

@@ -13,7 +13,7 @@ body:not(#dummy) {
 }
 
 body[data-editor-font="default"] {
-  font-family: "Rounded M+ 1p", sans-serif;
+  font-family: "Unhinted Rounded M+ 1p", sans-serif;
 }
 
 img {

src/styles/fonts.scss

@@ -1,13 +1,13 @@
 @font-face {
-  font-family: "Rounded M+ 1p";
-  src: url("../fonts/rounded-mplus-1p-regular.ttf");
+  font-family: "Unhinted Rounded M+ 1p";
+  src: url("../fonts/unhinted-rounded-mplus-1p-regular.woff2");
 
   font-weight: normal;
 }
 
 @font-face {
-  font-family: "Rounded M+ 1p";
-  src: url("../fonts/rounded-mplus-1p-bold.ttf");
+  font-family: "Unhinted Rounded M+ 1p";
+  src: url("../fonts/unhinted-rounded-mplus-1p-bold.woff2");
 
   font-weight: bold;
 }