Material Typography + WebFont Checker

index.html

<!-- Material Design Components for the WebのCDNの読み込み 
https://github.com/material-components/material-components-web/tree/master/packages/mdc-typography
-->
<h1 class="mdc-typography--display1">マテリアルデザインTypography</h1>
<!-- Tool -->
<hr>
<div class="tool">
 Select a font from the list below:
 <select id="font-select">
  <option value="未設定">未設定</option>
  <option value="Inter + Noto">Inter + Noto</option>
  <option value="roboto + Noto">Roboto + Noto</option>
  <option value="open-sans + Noto">Open Sans + Noto</option>
  <option value="Inter + Biz UDP Gothic">Inter +　Biz UDP Gothic</option>
 </select>
</div>
<hr>
<!-- Wrap -->
<div class="wrap">
 <h1 class="mdc-typography--headline1">見出し 1 日本語EnglishABCabc123 ここには50文字の日本語ダミーテキストが入ります。テキストの意味はありません </h1>
 <h2 class="mdc-typography--headline2">見出し 2 日本語EnglishABCabc123 ここには50文字の日本語ダミーテキストが入ります。テキストの意味はありません </h2>
 <h3 class="mdc-typography--headline3">見出し 3 日本語EnglishABCabc123 ここには50文字の日本語ダミーテキストが入ります。テキストの意味はありません </h3>
 <h4 class="mdc-typography--headline4">見出し 4 日本語EnglishABCabc123 ここには50文字の日本語ダミーテキストが入ります。テキストの意味はありません </h4>
 <h5 class="mdc-typography--headline5">見出し 5 日本語EnglishABCabc123 ここには50文字の日本語ダミーテキストが入ります。テキストの意味はありません </h5>
 <h6 class="mdc-typography--headline6">見出し 6 日本語EnglishABCabc123 ここには50文字の日本語ダミーテキストが入ります。テキストの意味はありません </h6>
 <p class="mdc-typography--subtitle1">サブタイトル 1 日本語EnglishABCabc123 ここには50文字の日本語ダミーテキストが入ります。テキストの意味はありません </p>
 <p class="mdc-typography--subtitle2">サブタイトル 2 日本語EnglishABCabc123 ここには50文字の日本語ダミーテキストが入ります。テキストの意味はありません </p>
 <p class="mdc-typography--body1">本文 1 日本語EnglishABCabc123 ここには50文字の日本語ダミーテキストが入ります。テキストの意味はありません</p>
 <p class="mdc-typography--body2">本文 2 日本語EnglishABCabc123 ここには50文字の日本語ダミーテキストが入ります。テキストの意味はありません </p>
 <p class="mdc-typography--caption">キャプション 日本語EnglishABCabc123 ここには50文字の日本語ダミーテキストが入ります。テキストの意味はありません </p>
 <p class="mdc-typography--overline">オーバーライン 日本語EnglishABCabc123 ここには50文字の日本語ダミーテキストが入ります。テキストの意味はありません </p>
 <button class="mdc-typography--button">ボタン 日本語EnglishABCabc123</button>
</div>
<!-- Table -->
<h2 class="mdc-typography--display2">Mock Table</h2>
<table class="table">
 <thead>
  <tr>
   <th>名前</th>
   <th>年齢</th>
   <th>性別</th>
   <th>出身地</th>
   <th>職業</th>
   <th>Email</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>山田 太郎</td>
   <td>25</td>
   <td>男性</td>
   <td>東京都</td>
   <td>エンジニア</td>
   <td>yamada.yamada-yamada.taro@example0123456789.com</td>
  </tr>
  <tr>
   <td>田中 花子</td>
   <td>32</td>
   <td>女性</td>
   <td>神奈川県</td>
   <td>デザイナー</td>
   <td>tanaka.tanaka-tanaka.hanako@example0123456789.com</td>
  </tr>
  <tr>
   <td>鈴木 一郎</td>
   <td>41</td>
   <td>男性</td>
   <td>大阪府</td>
   <td>営業</td>
   <td>suzuki.suzuki-suzuki.ichiro@example0123456789.com</td>
  </tr>
  <tr>
   <td>佐藤 恵子</td>
   <td>27</td>
   <td>女性</td>
   <td>北海道</td>
   <td>事務員</td>
   <td>sato.sato-sato.keiko@example0123456789.com</td>
  </tr>
  <tr>
   <td>木村 俊介</td>
   <td>36</td>
   <td>男性</td>
   <td>沖縄県</td>
   <td>会社経営者</td>
   <td>kimura.kimura-kimura.shunsuke@example0123456789.com</td>
  </tr>
  <tr>
   <td>佐々木 真美</td>
   <td>29</td>
   <td>女性</td>
   <td>京都府</td>
   <td>翻訳者</td>
   <td>sasaki.sasaki-sasaki.mami@example0123456789.com</td>
  </tr>
 </tbody>
</table>

material-typography-webfont-checker.markdown

Material Typography + WebFont Checker

A Pen by Pistol on CodePen.

License.

script.js

// フォント選択肢が変更されたときに、選択されたフォントを取得する
const fontSelect = document.getElementById("font-select");
fontSelect.addEventListener("change", () => {
 const selectedFont = fontSelect.value;

 // 選択されたフォントに対応するfont-familyを設定する
 if (selectedFont === "Inter + Noto") {
  document.body.style.fontFamily = '"Inter", "Noto Sans JP", sans-serif';
 } else if (selectedFont === "open-sans + Noto") {
  document.body.style.fontFamily = '"Open Sans", "Noto Sans JP", sans-serif';
 } else if (selectedFont === "roboto + Noto") {
  document.body.style.fontFamily = '"Roboto", "Noto Sans JP", sans-serif';
 } else if (selectedFont === "Inter + Biz UDP Gothic") {
  document.body.style.fontFamily = '"Inter", "Biz UDP Gothic", sans-serif';
 } else if (selectedFont === "未設定") {
  document.body.style.fontFamily = "sans-serif";
 }
});

style.scss

/* https://cdn.jsdelivr.net/npm/@material/typography@13.0.0/dist/mdc.typography.min.css */
/* Google Fontsを読み込む */
// Open Sans
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap");
// Robot
@import url("https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap");
// Inter
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
// Noto
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700&display=swap");
// Biz
@import url("https://fonts.googleapis.com/css2?family=Biz+UDPGothic&display=swap");

* {
 // margin: 0;
 // padding: 0;
 box-sizing: border-box;
}

body {
 margin: 0;

 /* デフォルトのフォント */
 font-family: sans-serif;
 /*  Mac Chrome Weightバグ対応 */
 -webkit-font-smoothing: antialiased;
 color: #272b30;
}
.wrap {
 padding: 20px;
}
/* Material Design */
.mdc-typography--headline1 {
 font-size: 24px;
 line-height: 1.2;
 font-weight: 700;
}

.mdc-typography--headline2 {
 font-size: 22px;
 line-height: 1.2;
 font-weight: 700;
}

.mdc-typography--headline3 {
 font-size: 20px;
 line-height: 1.2;
 font-weight: 700;
}

.mdc-typography--headline4 {
 font-size: 18px;
 line-height: 1.2;
 font-weight: 700;
}

.mdc-typography--headline5 {
 font-size: 16px;
 line-height: 1.2;
 font-weight: 500;
}

.mdc-typography--headline6 {
 font-size: 14px;
 line-height: 1.2;
 font-weight: 500;
}

.mdc-typography--subtitle1 {
 font-size: 16px;
 line-height: 1.5;
 font-weight: 400;
}

.mdc-typography--subtitle2 {
 font-size: 14px;
 line-height: 1.5;
 font-weight: 400;
}

.mdc-typography--body1 {
 font-size: 16px;
 line-height: 1.5;
 font-weight: 400;
}

.mdc-typography--body2 {
 font-size: 14px;
 line-height: 1.5;
 font-weight: 400;
}

.mdc-typography--caption {
 font-size: 12px;
 line-height: 1.2;
 font-weight: 400;
}

.mdc-typography--overline {
 font-size: 12px;
 line-height: 1.5;
 font-weight: 400;
}

.mdc-typography--button {
 font-size: 14px;
 line-height: 1.5;
 font-weight: 400;
 text-transform: uppercase;
}

// Tool
select#font-select {
 padding: 6px 12px;
 font-size: 18px;
 margin: 8px;
}

hr {
 border: none;
 border-top: 1px solid #ddd; /* グレーに設定 */
}

table {
 border-collapse: collapse;
 width: 100%;
}

table,
th,
td {
 border: 1px solid #ddd;
}

th,
td {
 text-align: left;
 padding: 8px;
}

.tool {
 position: sticky;
 top: 0;
 background-color: #fff;
 z-index: 100;
 box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);
 margin: 0　20px;
}

.table {
 position: sticky;
 bottom: 0;
 background-color: rgba(255, 255, 255, 0.8);
 z-index: 100;
 box-shadow: 0px -3px 5px rgba(0, 0, 0, 0.1);
}

.tool {
 position: sticky;
 top: 0;
 background-color: #fff;
 z-index: 100;
 box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);
 margin: 0 20px;
 padding: 4px 20px;
}

.table {
 position: sticky;
 bottom: 0;
 background-color: #fff;
 z-index: 100;
 box-shadow: 0px -3px 5px rgba(0, 0, 0, 0.1);
 margin: 20px;
}