■

フォントをダウンロードしてwoffに変換する
変換したwoffを「font」フォルダにまとめてcss直下にいれる。
cssに以下のコードを記述

css

/* webフォント -源ノ角ゴシック- */
@font-face {  font-family: "genExtraLight";  src: url("font/SourceHanSansJP-ExtraLight.woff") format('woff');}
@font-face {  font-family: "genLight";  src: url("font/SourceHanSansJP-Light.woff") format('woff');}
@font-face {  font-family: "genNormal";  src: url("font/SourceHanSansJP-Normal.woff") format('woff'); }
@font-face {  font-family: "genRegular";  src: url("font/SourceHanSansJP-Regular.woff") format('woff');}
@font-face {  font-family: "genMedium";  src: url("font/SourceHanSansJP-Medium.woff") format('woff'); }
@font-face {  font-family: "genBold";  src: url("font/SourceHanSansJP-Bold.woff") format('woff');}
@font-face {  font-family: "genHeavy";  src: url("font/SourceHanSansJP-Heavy.woff") format('woff');}
 
.genExtraLight {  font-family: "genExtraLight";}
.genLight {  font-family: "genLight";}
.genNormal {  font-family: "genNormal";}
.genRegular {  font-family: "genRegular";}
.genMedium {  font-family: "genMedium";}
.genBold {  font-family: "genBold";}
.genHeavy {  font-family: "genHeavy";}

参考：源ノ角ゴシックをWebフォントとして使う方法　1080ry.com