CSS | 日本語に対応したGoogleフォントの表示サンプル一覧
![CSS | 日本語に対応したGoogleフォントの表示サンプル一覧](https://1-notes.com/wp-content/uploads/2021/02/日本語に対応したGoogleフォントの表示サンプル一覧.png)
日本語に対応しているGoogleフォントの表示サンプル一覧です。
フォント別に@importと、フォントファミリー指定のCSSも紹介しています。
最終更新日 2021/2/4
See the Pen CSS | How to use Google fonts by yochans (@yochans) on CodePen.
目次
Yusei Magic
![](https://1-notes.com/wp-content/uploads/2021/02/Yusei-Magic.png)
![](https://1-notes.com/wp-content/uploads/2021/02/Yusei-Magic.png)
@import url('https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap');
.Yusei-Magic {
font-family: 'Yusei Magic', sans-serif;
}
Noto Sans JP
![](https://1-notes.com/wp-content/uploads/2021/02/Noto-Sans-JP.png)
![](https://1-notes.com/wp-content/uploads/2021/02/Noto-Sans-JP.png)
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
.Noto-Sans-JP {
font-family: 'Noto Sans JP', sans-serif;
}
Potta One
![](https://1-notes.com/wp-content/uploads/2021/02/Potta-One.png)
![](https://1-notes.com/wp-content/uploads/2021/02/Potta-One.png)
@import url('https://fonts.googleapis.com/css2?family=Potta+One&display=swap');
.Potta-One {
font-family: 'Potta One', cursive;
}
Hachi Maru Pop
![](https://1-notes.com/wp-content/uploads/2021/02/Hachi-Maru-Pop.png)
![](https://1-notes.com/wp-content/uploads/2021/02/Hachi-Maru-Pop.png)
@import url('https://fonts.googleapis.com/css2?family=Hachi+Maru+Pop&display=swap');
.Hachi-Maru-Pop {
font-family: 'Hachi Maru Pop', cursive;
}
Noto Serif JP
![](https://1-notes.com/wp-content/uploads/2021/02/Noto-Serif-JP.png)
![](https://1-notes.com/wp-content/uploads/2021/02/Noto-Serif-JP.png)
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap');
.Noto-Serif-JP {
ffont-family: 'Noto Serif JP', serif;
}
M PLUS 1p
![](https://1-notes.com/wp-content/uploads/2021/02/M-PLUS-1p.png)
![](https://1-notes.com/wp-content/uploads/2021/02/M-PLUS-1p.png)
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p&display=swap');
.M-PLUS-1p{
font-family: 'M PLUS 1p', sans-serif;
}
M PLUS Rounded 1c
![](https://1-notes.com/wp-content/uploads/2021/02/M-PLUS-Rounded-1c.png)
![](https://1-notes.com/wp-content/uploads/2021/02/M-PLUS-Rounded-1c.png)
M PLUS Rounded 1c – Google Fonts
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap');
.M-PLUS-Rounded-1c {
font-family: 'M PLUS Rounded 1c', sans-serif;
}
Sawarabi Mincho
![](https://1-notes.com/wp-content/uploads/2021/02/Sawarabi-Mincho.png)
![](https://1-notes.com/wp-content/uploads/2021/02/Sawarabi-Mincho.png)
Sawarabi Mincho – Google Fonts
@import url('https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&display=swap');
.Sawarabi-Mincho {
font-family: 'Sawarabi Mincho', sans-serif;
}
Sawarabi Gothic
![](https://1-notes.com/wp-content/uploads/2021/02/Sawarabi-Gothic.png)
![](https://1-notes.com/wp-content/uploads/2021/02/Sawarabi-Gothic.png)
Sawarabi Gothic – Google Fonts
@import url('https://fonts.googleapis.com/css2?family=Kosugi&display=swap');
.Sawarabi-Gothic {
font-family: 'Sawarabi Gothic', sans-serif;
}
Kosugi Maru
![](https://1-notes.com/wp-content/uploads/2021/02/Kosugi-Maru.png)
![](https://1-notes.com/wp-content/uploads/2021/02/Kosugi-Maru.png)
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap');
.Kosugi-Maru {
font-family: 'Kosugi Maru', sans-serif;
}
Kosugi
![](https://1-notes.com/wp-content/uploads/2021/02/Kosugi.png)
![](https://1-notes.com/wp-content/uploads/2021/02/Kosugi.png)
@import url('https://fonts.googleapis.com/css2?family=Kosugi&display=swap');
.Kosugi {
font-family: 'Kosugi', sans-serif;
}
ディスカッション
コメント一覧
まだ、コメントがありません