Google FONTを使用する例
» Google Fonts(日本語抜粋) …他の言語書体もこちらから
» Google Fonts(日本語)
あいうえお愛薔薇丼ABCDEabcde …この日本語と英字は【Noto Suns JP】フォント(当サイトのデフォルト)
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;500&display=swap');
<div>
<p>あいうえお愛薔薇丼ABCDEabcde <span>…この日本語と英字は【Noto Suns JP】フォント</span></p>
</div>
body {
font: normal 300 1.6rem/1.8 'Noto Sans JP', sans-serif;
}
フォントセットを入手して自サーバにアップして使用する例
あいうえお愛薔薇丼ABCDEabcde …この日本語と英字は【あんずもじ】フォント
あいうえお愛薔薇丼ABCDEabcde …この日本語は【あんずもじ】フォント、英字は【Chunk】フォント
<p class="anzu">あいうえお愛薔薇丼ABCDEabcde …この日本語と英字は【あんずもじ】フォント</p>
<p>
<span class="anzu">あいうえお愛薔薇丼<span class="chunk">ABCDEabcde</span>
…この日本語は【あんずもじ】フォント、英字は<span class="chunk">【Chunk】</span>フォント</span>
</p>
/*フォント例:あんずもじ の場合*/
@font-face {
font-family: 'anzu';
src: url('path/to/font/APJapanesefont.ttf') format("truetype");
}
.anzu {
font-family: 'anzu';
font-size: 2.5rem;
}
/*複数のフォント形式の指定の例 フォント例:Chunk */
@font-face {
font-family: 'chunk';
src: url('path/to/font/Chunkfive-webfont.eot?') format('oldIE'),
url('path/to/font/Chunkfive-webfont.woff') format('woff'),
url('path/to/font/Chunkfive-webfont.ttf') format('truetype');
}
.chunk {
font-family: 'chunk';
font-size: 2.5rem;
}
DEMO
APIの指定の例 (フォント例:M+ の場合)
あいうえお愛薔薇丼ABCDEabcde …この日本語と英字は【M+】フォント
» M+ WEB FONTS…他の太さもこちらから
<link rel="stylesheet" type="text/css" href="http://mplus-fonts.sourceforge.jp/webfonts/basic_latin/mplus_webfonts.css">
<link rel="stylesheet" type="text/css" href="http://mplus-fonts.sourceforge.jp/webfonts/general-j/mplus_webfonts.css">
<style>
.mplus{
font-family:
'M+ C Type-1 (basic latin) Regular',
'M+ Type-1 (general-j) Regular',
sans-serif;
}
</style>
<p class="mplus">あいうえお愛薔薇丼ABCDEabcde …この日本語と英字は【M+】フォント</p>
自サーバにアップするフォントの入手先(例)