ジェネレーターを使用したwebフォント化

google font
google font(jp)
https://googlefonts.github.io/japanese/#mplus1phttps://googlefonts.github.io/japanese/#mplus1p

google font(en)
https://fonts.google.com/

google webfont以外も使いた時
フォントジェネレーターを使用するhttps://www.fontsquirrel.com/tools/webfont-generator

step1：Expert にチェックをいれる

step2：拡張子にチェックをいれる

step3：Agreementにチェックを入れてダウンロード
→webフォントキットファイルができる

step4：全てのファイルをindex.htmlの階層へ

step5：生成されたhtmlファイルとcssファイルの一部コードをコピーしindex.htmlとcss.styleに記述する
ex)
index.html
link rel=”stylesheet” href=”specimen_files/specimen_stylesheet.css” type=”text/css” charset=”utf-8″ /
link rel=”stylesheet” href=”stylesheet.css” type=”text/css” charset=”utf-8″ /

css
@font-face {
font-family: ‘makinasflat_3’;
src: url(‘makinas-flat-3-webfont.woff2’) format(‘woff2’),
url(‘makinas-flat-3-webfont.woff’) format(‘woff’);
font-weight: normal;
font-style: normal;
}

＼ That’s All：) ／

license　free font
・refarence1
・refarence2