Webサイトを制作する上で、考えるものの一つである「フォントの種類」。
このサイトのフォントかっこいいな, 可愛いなと思いつつも自分の好きなフォントをダウンロードして、使う方法は??なんて思ったことはないでしょう
今回は、外部で公開されているフリーフォントをサイトへ適用させる方法について一緒にみていきましょう。
✅ 「めもわーる」というフォントをサイトに反映させる手順
✅ @font-face{}の定義方法
フリーフォントとは??
フリーフォントは、ネット上などで無料配布されているフォント集になります。
英語のみのものもあれば、ひらがな/カタカナ/漢字などに対応しているものまで、幅広く公開されてます。
主に提供しているサイトなどについては、以下のようなものが挙げられます。
FONT FREE : https://fontfree.me/
FONT BEAR : https://fontbear.net/
フロップデザイン : https://www.flopdesign.com/
ヤマナカデザインワークス : http://ymnk-design.com/font-2/
フリーフォントの使い方
今回は、FONTDASUというサイトにて掲載されているフォントを用いて、実際に使い方をみていきましょう。
ダウンロード
FONTDASUというサイトが開けたら、「めもわーる」という名前のフォントを探しましょう。
「めもわーる」を見つけたら、続きを読むをクリックしてください。
以下のように「めもわーる」の詳細ページに飛びますので、下にスクロールしていきましょう。
「配布サイトでダウンロード」というボタンが見えたら、クリックです。
配布サイトへ遷移したら、また下にスクロールしてください。
ダウンロードの文字が見えてきたら、クリックです。
ダウンロードが完了したら、お好きな場所に保存して頂ければと思います。
次の作業に移る前にzipファイルなので、解凍しておきましょう。
検証用のファイルを準備
ダウンロードの作業も終わりましたので、次は、実際にめもわーるを反映させる方法を確認していくためのHTML/CSSファイルを準備していきます。
HTML, CSS共に以下のコードをコピペして頂ければOKです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="font_test.css">
<title>フォントテスト</title>
</head>
<body>
<h1>フォント : めもわーるを適用</h1>
<p>アイウエオ, あいうえお, ABCDEF</p>
</body>
</html>
body {
margin:0px;
padding:0px;
}
保存場所は、解凍して頂いたフォルダ内でOKです。
現状のフォルダ内は、以下のようになっています。
フリーフォントを実装
ここまで準備が整ったら、いよいよ今回のメインをやりましょう。
まず、フォントを適用させていく上で、@font-face{}というものを使っていきます。外部からダウンロードしたものや公開されているフォントを扱う上で、必要になりますので、覚えていきましょう。
書き方としては、以下を参考にしてください。
書き方
実装
最後にベースとして準備したファイルへ追加記述していきます。
CSSファイル(font_test.css)を開き、次のコードを追加してください。
/* 使えるフォントとして、"めもわーる"を追加 */
@font-face {
/* 適用させるフォント名 → 間違っていると反映されないので注意 */
font-family: "めもわーる";
/* .otf, .ttfの拡張子がついているファイルがフォントファイルである。 */
/* フォントファイルが何処場所にあるのか : パスを書いてあげる */
src: url(memoir.otf);
}
p {
/* @font-face{}は、あくまで使用できるフォントを追加するのみ。
そのフォントを使いたい要素で定義することで、利用することができる */
font-family: "めもわーる";
font-size: 30px;
}
コードが追加できたら、反映されているか確認してみてください。
もし、変わっていない場合は、フォントファイルが読み込めていない可能性がありますので、配置場所を見直してみましょう。
DEMO
[実行結果]
ここまで、お疲れ様です。
今回は、めもわーるというフォントを用いて、外部フォントの使い方をみていきましたが、他にも様々なフォントが公開されていますので、好みのものを見つけてみて下さい。
最後に
ここまで読んで頂き、有り難う御座います。
プログラミングを学習している方やこれから始めようと考えている方にお知らせです。
⇩⇩⇩⇩⇩⇩
- 独学で学習を続けても中々、理解が定着しない..
- エラーが出てしまい、想定した結果が得られない…
- フリーランスとしてデビューしたいが何からやったらいいかわからない…
などの悩みがある方必見！
実は、以下の内容が全て月額定額のサブスクで利用できるサービスがあります。
- 話題のAWSから人気のプログラミング言語Pythonをはじめとする
様々な教材(HTML/CSS, JavaScript, jQuery, Ruby, Ruby on rails, PHP, Laravel, Django, Java, Spring, Git, 機械学習, Linuxなど50種類以上)が無制限で閲覧可能。 - オンラインで利用できるため、隙間時間で学習ができる。
- 質問掲示板も24時間活用することが出来るため、自己学習や教材を通した学習で詰まっても気軽に質問が出来る。(講師の方が回答してくれる時間帯は、10:00～22:00です。)
- 入会金不要で、あわないなと思ったらいつでも退会が可能。
- 実務経験が３年以上の選び抜かれたエンジニアが講師として多数在籍しているため、安心。
- 質問掲示板でも解決できない疑問や悩みは、プラン応じて月1回~受講できるオンラインレッスンで解決できる
最初から定額であると少し抵抗があるという方もフリープランからお試しが出来るので安心です。会員登録も無料！
詳しくは、以下のリンク先のページからチェック！
コメント