はてなブログで Webフォント

カテゴリー:  Tech タグ:  web/tech

以前購入したWebフォントの設定をはてなブログで行ってみました。印象が柔らかくなって良い感じです。

はてなブログのWebフォント導入の制約

以前 MovableTypeでブログを運用していた際には、Webフォントを購入しブログに導入していました。

はてなブログの場合、画像以外をアップロードしてブログのリソースとすることができません。従って、現時点で昔のブログで借りていたさくらインターネットのサーバーと直接FontをBase64でエンコードしたものを設定しています。

    @font-face {
        font-family: 'fgflopweb';
        url('https://hogehoge.sakura.ne.jp/fonts/flopdesign-web/flopdesign-kana.eot'),
      }

    @font-face {
        font-family: 'fgflopweb';
          src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAJ9cABMAAAAA76AAAQAAAAAAAAA
                      〜中略〜
                     NTLKfEb7inh3FF1xynkuo4CUzZhm7pqyuMF8zznEUzbVcsiihKq0ihqmgdw9UmqJ4AAAAAAFUCRgrAAA=) format('woff'),
        url('https://hogehoge.sakura.ne.jp/fonts/flopdesign-web/flopdesign-kana.ttf') format('truetype'); 
         font-weight: normal;
         font-style: normal;
     }

これでWebフォントを新しいフォントファミリーとして使えます。 以下のようにフォントで使用されるよう、設定しています。

```css body , h1 , h2 , h3 , h4 , h5 , h6 { font-family:"fgflopweb","Source Sans Pro" , "Yu Gothic" , "游ゴシック" , "ヒラギノ角ゴ ProN W3" , "Hiragino Kaku Gothic ProN", Arial , Verdana , Helvetica , "メイリオ", Meiryo , sans-serif; } ````

コメント

Comments powered by Disqus