副業で稼ぐ仕組みの作り方

WEBフォントを無料で使えるタイプスクウェア

日本語の無料で使えるWEBフォントってあまりありませんよね。→見つけました!

はじめに

クライアントからよく言われる質問で、フォントを変えたいと言われた時に探し出した無料で使えるWEBフォントをご紹介いたします。

注意事項

フォントによってはデザインが崩れる可能性がございますのでホームページを制作する場合は始めの段階から申しこむようにしましょう。

登録しよう

まずはお申込みから

こちらのサイトにアクセスして下さい。

logo

タイプスクウェアのホームページ

左側にお申込みページへのリンクがありますがデザイン変更などで変わる場合がございますのでお申込みフォームへのリンクを貼り付けて置きます。

お申込みページはこちら

font0

ご利用申込みのボタンをクリックします。

font1

上記の利用規約に同意するにチェックを入れて次へのボタンをクリックします。

font2

次は利用者情報の入力です。利用される方のお名前、ご住所、お電話番号、メールアドレス、ログイン用パスワードを入力して次へボタンをクリックしましょう。

font3

確認画面です。問題なければ次へをクリックしましょう。

font4

この段階では受付が完了しただけですので、まだWEBフォントを利用する事が出来ませんのでご注意下さい。

メールを確認しよう

先ほど登録したメールアドレス宛にメールが届いているので確認して下さい。

font5

メールの中に記載されているURLをクリックして下さい。

font6

これで入会が完了しました。次はいよいよWEBフォントを選んでいきます。

フォントの設定をしよう

まずはログインしましょう

font7

 

まずは、先ほど登録したメールアドレスとパスワードを入力してログインします。

font8

 

次に無料で利用される方は「スタンダード無料プラン」をご利用の場合は、こちらからプラン設定詳細に進んでください。のこちらをクリックします。

利用書体を選ぶ

font9

 

新規利用書体登録の青いボタンをクリックして書体を登録します。

ちなみに無料プランであれば選べるフォントは1つになります。

font10

 

私は変化がわかりやすいように丸くて太めのWEBフォントを選んでみました。最後に決定ボタンをクリックします。

利用サイトを登録する

font11

 

新規利用サイト登録と言う青いボタンをクリックしてサイトを登録します。

ちなみに無料プランであれば登録出来るサイトは1つになります。

font12

 

とりあえず副業ブログのサイト内で利用してみるのでこのサイトのURLを登録しました。最後に決定ボタンを押してください。

font13

 

最後に必ず変更内容を確認ボタンを押してください。

font14

 

そして、保存実行ボタンを押すとWEBフォントを利用する為の設定が完了しました。

フォントを変えたいファイルを用意しよう

テストページで実験

まず、適当にフォントを変えたいファイルを用意します。

font16

 

今現在はフォントに何の変化もありませんよね。

では、早速WEBフォントを使用する設定をしていきましょう。

font15

 

プラン・オプション設定をクリックして下さい。

font17

 

次に確認・編集ボタンをクリックします。

2箇所コピーしておきましょう

まず初めはこのjsをコピーしておきます。

font18

 

次はcssをコピーします。

font19

 

ヘッダーに入れよう

先ほどコピーした2つをヘッダーに入れます。

font20

 

この辺りは基本的なcssの知識があれば問題なく出来るでしょう。

こんな感じに変化しちゃいます

いよいよお待ちかねの

ヘッダーに先ほどの情報を入れて保存し、アップロードするとこのように変化しています。

font21

 

どうでしょう?フォントが全然違った感じになっていますよね。

ちなみにテストサイトはこちらになります。

https://www.moco358.com/sample/font.html

以上で、WEBフォントを無料で使えるタイプスクウェアの説明を終了させて頂きます。

さいごに

ブランディングの強化にも

たかがフォントですが、されどフォントです。ブランディングを意識したりSEO対策を意識したデザイン性のあるホームページを制作するするのにはフォントの影響もあると思います。

私自身も色々とホームページを見てきましたがフォントが違うと目がとまってじっくり見てしまったり。(これは職業病なのかもしれませんが笑)

または、他の人と違った事をしたいとお考えの方にオススメなので是非副業でブログをするのであれば一度使ってみては如何でしょうか?

関連記事

  1. ワードプレスがアップデートできない&通知がこない時

  2. 稼げるサブキーワードの探し方

  3. EC-CUBEでPHPを使う方法

  4. 一つのプラグインで最低限の機能が揃うJetpack

  5. 無料のお問合せフォームの作り方【FC2】

  6. contact form 7で自動返信メールのカスタマイズ

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

コメントするためには、 ログイン してください。
PAGE TOP