webフォント化する方法まとめメモ

# webフォント
インターネットを介してフォントを配信し、Webブラウザで表示させる仕組み。

## 解決できる問題
従来のやり方は、webサーバー側でフォントを指定して、
閲覧者側のPCがインストールしているフォントを参照するやり方だった。

ただ、このやり方だと
指定したフォントが閲覧者のPCにインストールされていないと、
別のフォントが代用されてしまい、
制作者が意図しない見え方になってしまう問題が発生していた。

webフォント化することで、webサーバー側で解決するので
フォントが異なることがなくなる。

# IconMoonを使用して、webフォント化する
フリーで使えるIconMoonを使うと楽

https://icomoon.io/app/#/select

## 基本的な使い方
### 1. 画面を開いたら、必要なアイコンを選択する
![スクリーンショット 2022-07-31 14.37.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2701305/7cc27107-2156-fb9e-1829-297133f4ce12.png)

### 2.選択肢終えたら、右下のGenerate Font をタップする。遷移後、以下画面が表示される
![スクリーンショット 2022-07-31 14.37.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2701305/8ace871c-1490-992e-9a1d-9164f28e68c6.png)

### 3. Preferencesをタップして、フォントの名前などを決める
![スクリーンショット 2022-07-31 14.37.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2701305/5c6d1576-6b36-d099-55e3-f94945f4c4b4.png)

### 4. 画面右下のFont Dowonloadをタップする。
![スクリーンショット 2022-07-31 14.42.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2701305/b44ac3ad-90fa-546b-8d24-6f804ecaf9dd.png)

### 5.ダウンロードしたファイルは以下。
![スクリーンショット 2022-07-31 14.38.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2701305/ee35f41e-870f-50d5-5020-65a6228c4d48.png)

必要なファイルは、
・fontsディレクトリ内のファイル全て
・style.css（別のCSSファイルにコピペでもOK）
・selection.json（後から、iconの追記や編集がしたい場合に使用する。git管理すると良い）

### 例. 上記ファイルを表示する
#### ディレクトリ構造
任意のディレクトリに以下内容で作成
fontsディレクトリはそのままコピペ
sample.htmlは後ほど記載。
＊selection.jsonはなくても良い（表示時には別に使ってない）
![スクリーンショット 2022-07-31 14.45.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2701305/c06e41c0-8ff9-a388-2cd1-9b396656a226.png)

#### sample.htmlの中身
bodyの中身は、アイコンを表示するだけ。

肝は、styleのcssの部分。
ダウンロードした、style.cssの中身をコピペしただけ。
つまり、自分の開発している任意のcssファイルにコピペすれば良い。

```
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>IcoMoon Demo</title>
<body>
    <i class="icon-pacman"></i>
</body>
</html>
<style type="text/css">
  @font-face {
  font-family: 'Test-icon';
  src:
    url('fonts/Test-icon.ttf?8lmfpg') format('truetype'),
    url('fonts/Test-icon.woff?8lmfpg') format('woff'),
    url('fonts/Test-icon.svg?8lmfpg#Test-icon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

i {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'Test-icon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-pacman:before {
  content: "\e916";
}

</style>

```

#### 表示内容
ただ、アイコン表示しているだけ
![スクリーンショット 2022-07-31 14.49.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2701305/35c48798-a93f-fa71-9537-a72de3214829.png)


## 追記、編集など
### 後から、iconの編集をしたい場合
左上の「import icons」から、ダウンロードしたselection.jsonを読み込ませる。
![スクリーンショット 2022-07-31 14.50.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2701305/7a6aa189-0eb2-464e-0c78-394747199e7c.png)

設定内容をロードしますか？と聞かれるので、yesで。
![スクリーンショット 2022-07-31 14.50.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2701305/d05ce632-ff4d-d47b-f0ae-7403417da3c7.png)

あとは、好き内容にiconの追加、編集や設定の変更などをして、
再度ダウンロードすればOK。

ダウンロードしたファイルは、上記と同じ手順で上書きすればOK

### iconの編集
Freeのアイコンにオリジナルな要素を加えたい場合

上部の真ん中あたりにある、鉛筆マークを選択して編集したいアイコンをタップする
![スクリーンショット 2022-07-31 14.53.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2701305/8ae8158b-5db7-cd66-9965-eac8bb09b749.png)

こちらの画面から、要素を追加したり色々編集できる
![スクリーンショット 2022-07-31 14.53.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2701305/def86f03-bad4-99c6-8168-ccc00b16aca5.png)

特に使うのは、サイズ！
32 * 32 に変える場合などは、右上から変更可能
32 * 30 など微妙に調整したい場合は、真ん中のところで左右のgridを調整できるのこちらから調整可能

![スクリーンショット 2022-07-31 14.54.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2701305/c922902e-2eae-47aa-9c69-60e639c16829.png)


以上です。
社内のwebデザイナーの方に教えて頂いた内容を、
さらに自分なりにまとめてます。

感謝！！