WEB FONTをつかう

» Google Fonts（日本語抜粋） …他の言語書体もこちらから

» Google Fonts（日本語）

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;500&display=swap');

body {
	font: normal 300 1.6rem/1.8 'Noto Sans JP', sans-serif;
	}

<div>
	<p>あいうえお愛薔薇丼ABCDEabcde <span>…この日本語と英字は【Noto Suns JP】フォント</span></p>
</div>

あいうえお愛薔薇丼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;
	}

あいうえお愛薔薇丼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>