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

広告

関連記事

無料ECサイトカスタマイズ

前回お話した無料でECサイトが3分で作れるのデザインなどのカスタマイズ方法についてご紹介いたします。

記事を読む

スマホでアクセスした時だけ違う内容を表示させる方法

スマホとパソコンだと広告サイズが違うのでそれぞれ違う物を表示させたい時のテクニックをご紹介いたします

記事を読む

ワードプレスの記事下に任意の情報を入れるプラグイン

ブログの最後に毎回同じ情報を入れている人にお勧めのプラグインを発見しました。毎回コピペして入力しなく

記事を読む

スパムコメントを自動で削除してくれるAkismet

ワードプレスをインストール時に最初からインストールされているAkismetの使い方をご紹介いたします

記事を読む

no image

ワードプレスのテーマを直接いじらない小テーマ

ワードプレスで直接テーマをいじってしまうとアップデートの際今までのデータが全て消えてしまいます。そこ

記事を読む

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

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

記事を読む

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

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

記事を読む

Gmailを使ったメールの振り分け方法

Gmailを使ったメールの振り分け方法をご紹介致します。 はじめに Gmailでメールの振り

記事を読む

JetpackのWP.me 短縮 URL

ブログ記事を紹介する時、長いURLをコピペするのが面倒な人もいらっしゃるでしょう。そんな人の為の機能

記事を読む

ECキューブの管理画面で商品画像がグレー

登録している商品を調べようとしたら商品画像が全てグレーの塗りつぶしになっていたので解決方法をご紹介い

記事を読む

広告

Message

広告

現在の総記事数: 306件

WordPressが書き換えられた時の対処方

アクセス先のサイトで「不正なソフトウェアを検出しました」と表示されると

さくらインターネットの請求書払い反映されるまで

さくらインターネットで支払い方法を請求書払い(コンビニ払い)にしている

HEIC形式を簡単にjpgにする方法

web上でクッソ簡単にjpgに戻せました はじめに ア

メルカリの売り上げを自分の口座に振込む方法

売り上げが上がるだけだと意味がありません。メルカリから自分の銀行に振り

お名前ドットコム
お名前.comのWhois情報公開代行のご案内が悪質すぎる

お名前.comでドメインを取得した人は気を付けてくださいね。 情弱な

→もっと見る


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