WEBフォントはcss3で簡単に使えた

公開日: : 最終更新日:2016/12/31 副業で稼ぐ仕組みの作り方 ,

WEBフォントを使って好きなフォントをWEB上に公開しよう

はじめに

最近クライアントから「丸っこいフォントで公開したい」と言う要望があり、調べてみたらWEBフォントが結構簡単に導入できるっぽかったのでご紹介させて頂きます。

注意事項

ローカルだと表示されません、WEB上で試してください

WEBフォントを用意する

webfont1

まずはWEBフォントを用意してください。
ttfしか持っていない場合はttfをwoffに簡単に変換できた!を参考にしてください。

そしてアップロードしておきます。

cssに書こう

では、早速作ってみましょう。

cssにはこのように書きます。

@font-face
{
    font-family:'webfont';
    src: url('eotファイルへのURL') format('eot'),
         url('woffファイルへのURL') format('woff'),
         url('truetypeファイルへのURL')  format('truetype');
 
}
.hui { font-family:webfont;}

@faceのfont-familyには好きな名前を付けてください。その場合は.huiのクラスで指定している部分も必ず変更しましょう。

html側はこんな感じです

<p class="hui">このテキストはWEBフォントを使っている</p>

たったこれだけでおk

実際に見てみてね

webfont

実際にどのように表示されるか確認してください。

WEBフォントのデモはこちら

どうでしょうか?
めっちゃ簡単ですよね。

以上でWEBフォントはcss3での使用方法の説明を終了いたします

さいごに

WEBフォントはデザインを1から

WEBフォントは同じフォントサイズを指定しても、サイズにかなり差があります。
なのでデザインを事前に使っていたら最初からやり直さないといけないのが正直面倒ですよね。

これさえクリアしていれば是非導入したいですよね。

但し、問題としては日本語に対応しているWEBフォントがやはり少ないのが欠点です。
英語と違い、日本語はひらがな、カタカナ、漢字、英数字などボリュームがあるのでなかなかできないのが現実です。

Googleさんオナシャス!

そうそう、過去にもWEBフォントに関して紹介した情報があるのでWEBフォントを無料で使えるタイプスクウェアも是非読んでくださいな。

広告

関連記事

カスタムフィールドをor条件で表示させる

AもしくはBの条件に当てはまる場合に表示させると言う分岐?のやり方がわかったのでご紹介いたします。

記事を読む

Contact Form 7で確認用メールアドレスを作ってみた

Contact Form 7ってメールアドレスの確認用って作れないの?と言う質問を頂きました。 は

記事を読む

画像を簡単に軽く出来るサイト

画像を軽くさせるために縮小したり解像度を低くするのは時代遅れです。 はじめに 大きなjpg画像を

記事を読む

ワードプレスで短縮URLが使えるPretty Link Lite

短縮URLって何かと必要ですよね?今回はワードプレスを使った短縮URLが簡単に使えるプラグインの紹介

記事を読む

Jetpackの通知機能

Jetpackのプラグインを導入する際に一つづつどういった機能なのかを調べてみています。最初は通知機

記事を読む

サクラサーバーに転入する方法2015

サクラサーバーの転入方法が少し変わっていたので、最新版をご紹介いたします。 はじめに 過去にさく

記事を読む

カスタム投稿タイプを簡単に作れるワードプレスプラグイン

ブログ記事以外に新着情報と言うのが出したいと言う方の為のカスタム投稿が簡単に作れるプラグインです。

記事を読む

ワードプレスでページごとにレイアウトを変える方法

ワードプレスでブログを運営中で特定のページだけカスタマイズしたいなんて事ありませんか? はじめに

記事を読む

Jetpackの統計情報

ワードプレスにJetpackを利用するきっかけとなった機能の一つがこの統計情報です。 はじめに

記事を読む

売れる商品画像は影が必須

ドロップシッピングやショッピングサイトを運営している方に一度やって頂きたい画像の作り方をご紹介いたし

記事を読む

広告

Message

広告

現在の総記事数: 280件

メルカリの出品から発送までの流れ

メルカリに出品してみて入金されるまでの流れをご紹介させて頂きます

WordPressで土日の色が違うスケジュールを表示させる方法

1週間のスケジュールをPHPで出すときに土日の色だけ変える方法

Googleアドセンスから警告がきました

Googleアドセンスを導入している方であれば誰しもがありえるんじゃな

スマホからパソコンを操作する方法

外出先のスマホから自宅のパソコンを操作できるので緊急時にもってこい

投稿のビジュアルにcssを反映させる

ビジュアルと実際のデザインが違うんだが・・・・ はじめに 自作のテ

→もっと見る


  • ここでは副業での稼ぎ方や、誰でも簡単に稼げる副業のジャンルなどを紹介しております。 今の所、平均して月に15,000円ほど副収入があります。
    • エステコスメ エステ化粧品やエステコスメの通販サイトです。一般の方でもエステサロンで使用しているコスメを激安価格で購入出来ます。
    • エステ用品 エステ用品のMOCOエステです。新規開業を考えているエステサロン様向けに卸価格でご提供させて頂きます。
    • サロン集客 サロン集客に悩んでいる人向けに完全無料で集客方法を公開しております。インターネットを使う事で0円でサロン集客する方法もお教えいたします。
    • ヒートマット 遠赤外線ヒートマットシリーズは入ると滝に打たれたような発汗を体験できます。サロン様から一般の方までご利用いただけます
    • フェイシャルスチーマー 業務用だけでなく、一般の方も使用出来るフェイシャルスチーマーを詳しく説明しているホームページです。
    • 美容室のホームページ制作 美容室やエステサロン、ネイルのホームページ制作です。3万円台から制作も出来るので予算のないサロン様にも対応しております。
PAGE TOP ↑