AAまとめブログがスマートフォンで見れるようになるkeageさんのSaitamaarフォント設定のまとめとおまけと追記

まとめた後にkeageさんから具体的な導入方法を教えていただいたので追記します

リンク先に飛べないため以下はDMでの会話内容です
スクリーンショットと会話内容のコピペを併記します。
（keageさんの了承済み）

以下DMでのkeageさんの発言転載

長いので文字数制限のゆるい DM で全文転載します
kæge

いずれ自分のブログに書こうかと思いますが，
Google+ にやる夫コミュニティが開設されたことですので，
一足先にこちらで告知します．

スマートフォンでアスキーアートを見るためのフォントとして，
てくすたさん作の Textar Font，拙作の Kuma_Lite が現在存在しますが，
このたびスマートフォン用の AA フォントとして，
新たに Saitamaar フォントを制作いたしました．

Saitamaar フォントはスマートフォンでも Windows 環境と同等の
AA 表示のクオリティを実現するために制作したフォントです．

表示サンプルはこちらになります．
http://keage.sakura.ne.jp/test/Saitamaar/sample.html …

（スクリーンショット https://lh5.googleusercontent.com/-NFKch38mtMI/UMwttSuwG4I/AAAAAAAAA1o/shUs2hlYWW8/s960/2012-12-15 16.53.40.png … ）

利用方法はまず CSS ファイルに，
@font-face{
font-family: 'Saitamaar';
src: local('Saitamaar'),
url('http://keage.tokyo/fonts/Saitamaar.eot?') format('eot'),
url('http://keage.tokyo/fonts/Saitamaar.woff2') format('woff2'),
url('http://keage.tokyo/fonts/Saitamaar.woff') format('woff'),
url('http://keage.tokyo/fonts/Saitamaar.ttf') format('truetype');
font-weight: normal;
font-style: normal; }

※「 …」がないスクショと一部違う点はkeageさんから修正を依頼された部分です、このままコピペして下さい

と記述し，次いで Saitamaar フォントを利用したいタグ・クラスの
font-family に "Saitamaar" を追加することで利用できます．

例：font-family: 'ＭＳ Ｐゴシック', 'MS PGothic', 'MS Pｺﾞｼｯｸ', 'MS Pゴシック', ＭＳＰゴシック, MSPゴシック, IPAMonaPGothic, 'IPA モナー Pゴシック', 'IPA mona PGothic', 'IPA MONAPGOTHIC', Mona, Monapo, Saitamaar, sans-serif;

なお，Saitamaar フォントのサイズは約 650 KB （gzip 圧縮済み）です．

以上です．お目汚し失礼しました．

参考までに、まとめている私のブログhttp://aatool.blog.fc2.com/
で導入時には
@font-face{
font-family: 'Saitamaar';
src: local('Saitamaar'),
url('http://keage.tokyo/fonts/Saitamaar.eot?') format('eot'),
url('http://keage.tokyo/fonts/Saitamaar.woff2') format('woff2'),
url('http://keage.tokyo/fonts/Saitamaar.woff') format('woff'),
url('http://keage.tokyo/fonts/Saitamaar.ttf') format('truetype');
font-weight: normal;
font-style: normal; }

@charset "utf-8";

と、スタイルシートの編集エリアの最初「@charset "utf-8";」があった前にコピペ（スクショと一部違う点はkeageさんから修正を依頼された部分です、このままコピペして下さい）

font-family: 'ＭＳ Ｐゴシック', 'MS PGothic', 'MS Pｺﾞｼｯｸ', 'MS Pゴシック', ＭＳＰゴシック, MSPゴシック, IPAMonaPGothic, 'IPA モナー Pゴシック', 'IPA mona PGothic', 'IPA MONAPGOTHIC', Mona, Monapo, Saitamaar, sans-serif;

これは元からあるbody {font-family:～に挿入し
さらに、今回のツイートにはありませんが、横幅が足りずに起こる輪切り防止としてkeageさんのブログにある記事
やる夫系まとめサイトのスマートフォン対応には text-size-adjust の設定が肝心でしたり
http://keagelog.blogspot.jp/search?updated-min=2012-12-31T07:00:00-08:00&updated-max=2013-03-31T12:35:00+09:00&max-results=7&start=4&by-date=false

この記事を参考に

-moz-text-size-adjust: none;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;

この４行を
}
dd {margin-left: 40px !important;}
の前に挿入し、最終的に

body {
font-family: 'ＭＳ Ｐゴシック', 'MS PGothic', 'MS Pｺﾞｼｯｸ', 'MS Pゴシック', ＭＳＰゴシック, MSPゴシック, IPAMonaPGothic, 'IPA モナー Pゴシック', 'IPA mona PGothic', 'IPA MONAPGOTHIC', Mona, Monapo, Saitamaar, sans-serif;
font-size:16px;
line-height:1.125em;
color: #333333;
text-align: center;
background: #FFF;
margin: 0 auto;
padding: 0;
-moz-text-size-adjust: none;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
dd {margin-left: 40px !important;}

このような形になりました。
確認したのは
機種：iPhone5S
OS：ios9.3.2
ブラウザ：Safari

良かったら参考にしてください。