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フォントを無料で使えるタイプスクウェアも是非読んでくださいな。

広告

関連記事

twitterをHPに埋め込みしてみたよ

twitterの埋め込みって昔よりも簡単になってました はじめに 今「twitter 埋め込み」

記事を読む

カスタムメニューのナビゲーションラベル文字化け

カスタムメニューを利用しようとしたら文字化けで使えなかった件 はじめに ワードプ

記事を読む

ワードプレスに任意の画像サイズを追加する方法

2種類のサムネイル画像を表示させたいなぁって時に使えた技です。 はじめに ワードプレスだと元々サ

記事を読む

amazonのインスタントストアの作り方

誰でも簡単にamazonの商品を使ってECサイトを作る事が出来ます。今回はインスタントストアの作り方

記事を読む

Gmailとサクラのメールの連携する方法

Gmailとさくらサーバのメールを連携させる方法のご紹介です。 はじめに 普段からGma

記事を読む

ワードプレスの記事やカテゴリなどの各IDを調べる方法

ワードプレスには記事やカテゴリ、タグなどそれぞれIDがございます。 はじめに プラグインの設定を

記事を読む

コンタクトフォーム7からの迷惑メールを防ぐ方法

コンタクトフォーム7を入れたけど、今度はここから迷惑メールが来ることが増えます。迷惑メールをブロック

記事を読む

Jetpackの統計情報

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

記事を読む

no image

記事や固定ページにパスワードを設定する

ワードプレスの記事や固定ページにパスワードを設定する方法をご紹介いたします。 はじめに

記事を読む

お名前.comのドメインをさくらサーバーで使用する方法

サーバーの最安値とドメインの最安値を一緒に利用出来ます はじめに サーバーとドメインってどうして

記事を読む

広告

Message

広告

現在の総記事数: 288件

yahooリスティング広告で広告を作るまでの流れ

yahooリスティング広告でキャンペーンの作成から広告の登録までをご紹

yahooリスティング広告のキーワード単価を調べる方法

そのキーワードにいくら支払えばクリックが見込めるのかわかりやすツールで

yahooリスティング広告の広告費の決め方

広告費用って毎月いくら必要なのか?いろいろなパターンを考えてみました

yahooリスティング広告のキーワードを設定する際の考え方

yahooリスティング広告のキーワードを間違えると全然効果がないので気

yahooリスティング広告らくアドの利用方法

yahooリスティング広告の使い方がわからない方はらくアドを利用してみ

→もっと見る


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