ROROのWEB技術・子育て・ガジェット通信

本WEBページは2児の息子を持つROROの子育てに伴うメリット・デメリットを丸裸にしていきます。例えば旅行であったり家系であったり、どんな生活をしているのかをお楽しみください。また子育ての便利グッズの紹介、ROROの趣味であるガジェットやゲーム情報や勉強なども紹介します。色んなコンテンツをお楽しみくださいね！

webページに独自のフォントを利用する

date:2018/8/18



本日はWEBページで外部フォントを利用する方法です。任意の位置に、自分のコードを導入することが出来ます。
例えば以下のようにフォントを変更することが可能です。

Let's use Original font


@font-faceで外部フォントを利用する

独自のフォントを使うには@font-faceを使います。
各設定方法は、「 font-familyで利用したいfontの名前を定義」「srcでフォントの保存場所を設定」「formatはフォントの形式を設定します」となります。



@font-face {
    font-family: AlexBrush-Regular_font;  /* フォントに名前を付ける */
    src: url('/fonts/AlexBrush-Regular.ttf') format('truetype');  /* フォントのURLを指定する */
}

フォントは今後の利便性も含めて特定のフォルダにまとめておく事をオススメします。
例えば私のWEBサイトではfontsフォルダにまとめています。


formatの設定



truetype一般的なフォント形式（拡張子：.ttf）
opentypeOpenTypeフォントです。（拡張子： .ttf, .otf）
woffWeb用の新しいフォント形式です。特徴はデータが軽いことです。（拡張子：.woff）
embedded-opentypeInternet Eplorer 8以前で必要とされた形式です。（拡張子：.eot）
svgSVGフォントです。（拡張子：.svg, .svgz）


指定タグに該当フォントを適用する


cssの記載方法です。font-familyで@font-faceのfont-familyで定義した名前で記載します。



.menu_title{
    font-size:30px;
    font-family:AlexBrush-Regular_font;
    color:#173c77;
    margin:0 0 5px 0;
    font-weight:bold;
}

HTMLの記載方法です



<span class=menu_title>Let's use Original font</span>

動作結果は以下の通りです。

Let's use Original font


外部フォントを取得・ダウンロードする

本フォントは以下を利用しています。
fontsquirrel

その他にも沢山のフォントが無料で公開されていますので、取得してみて下さいね！


関連記事

Category

Latest Game News

▪️【Amazon予約数ランキング】体験版が話題の『Anthem』が1位に！ 発売間近の『JUMP FORCE』も急上昇【1/27～2/2】@ファミ通(2019/02/06  16:00)▪️“ファミコン Switch Online”に『スーパーマリオUSA』、『つっぱり大相撲』、『星のカービィ　夢の泉の物語』が2月13日から追加@ファミ通(2019/02/06  16:00)▪️『チームソニックレーシング』ソニックとシャドウのデザインをあしらったロックグラスなど、限定グッズが多数付属の“DXパック”が登場@ファミ通(2019/02/06  16:00)▪️『アルケミックダンジョンズDX』が2月14日より配信開始、やりこみ要素満載のローグライクRPGがDXにパワーアップ！@ファミ通(2019/02/06  16:00)▪️『ワイルドアームズ』のヴォーカル曲がここに！ 『milestone〜ワイルドアームズ・ヴォーカルコレクション2』が本日（2月6日）発売@ファミ通(2019/02/06  16:00)▪️『ファークライ ニュードーン』ミッキー＆ルー姉妹が、本編さながらの激しい銃撃戦をくり広げる実写版トレーラーが公開！@ファミ通(2019/02/06  16:00)▪️『殺人探偵ジャック・ザ・リッパー』がエビテンで予約開始、限定特典は山根知氏の描きおろしイラストを使用したB3タペストリー@ファミ通(2019/02/06  16:00)▪️『キャサリン・フルボディ』より羊人間をモチーフとしたグッズ“Colorful Sheeple × Sweets！”シリーズがお目見え@ファミ通(2019/02/06  16:00)▪️『DOAX3 スカーレット』かすみ＆あやね＆ヒトミがバカンスを楽しむイメージビデオが公開@ファミ通(2019/02/06  16:00)▪️『ドラゴンボール ファイターズ』“人造人間21号”のフィギュアが2月7日より予約受付開始、挑発的なポージングとボディラインが魅惑する@ファミ通(2019/02/06  16:00)▪️『キルラキル ザ・ゲーム -異布-』“鬼龍院羅暁”と“針目縫”の性能が公開！ サントラなどがセットになった限定版BOXも発売決定@ファミ通(2019/02/06  16:00)▪️『FFXIV: 漆黒のヴィランズ』Loppi・HMV限定特典はオリジナルデザインのA4クリアファイル！@ファミ通(2019/02/06  12:00)▪️『PSO2』に二つ名付きの【仮面】が登場！　劇場版『魔法少女リリカルなのは』コラボスクラッチも開始！@ファミ通(2019/02/06  12:00)▪️『ポケモンGO』メルタンの色違いが2月6日～3月5日に登場。“ふしぎなはこ”再使用の期間が3日間に短縮され、ゲットの大チャンス！@ファミ通(2019/02/06  12:00)▪️『JUMP FORCE』に参戦決定の『ジョジョの奇妙な冒険』のショートPVが公開！ 承太郎とDIOのバトルがすさまじい@ファミ通(2019/02/06  12:00)▪️DLC福袋で『ブレイブルー セントラルフィクション SE』、『ディシディアFF』などのアイテムをゲット！【先出し週刊ファミ通】@ファミ通(2019/02/05  20:00)▪️『FFXIV』のキャラクターや衣装はこうやって作られる！　『FFXIV』ファンフェス 開発パネルリポート@ファミ通(2019/02/05  20:00)▪️『キングダム ハーツIII』全世界出荷・ダウンロード本数が500万本を突破！ シリーズ作の記念セールも開催@ファミ通(2019/02/05  20:00)▪️『キャサリン・フルボディ』人前では堂々と読みにくい？ 魅惑の特製バレンタインカードと情報総まとめ特集をお届け！【先出し週刊ファミ通】@ファミ通(2019/02/05  20:00)▪️『カードファイト!! ヴァンガード エクス（EX）』がPS4/Switch向けに2019年秋発売決定。テレビアニメシリーズが題材のヴァンガードシミュレーターゲーム@ファミ通(2019/02/05  20:00)▪️『Days Gone』新トレーラー“『Days Gone』の世界 ～ドリフターバイク～”が公開！　唯一の移動手段であるバイクを紹介@ファミ通(2019/02/05  20:00)▪️『EDF: IR』オンライン対戦モード“マーセナリー”実装が判明！　4対4のチームで戦え!!【先出し週刊ファミ通】@ファミ通(2019/02/05  20:00)▪️キャラが変わればゲームが変わる？ 2DアクションRPG『Dragon Marked For Death』プレイレビュー@ファミ通(2019/02/05  16:00)▪️新ゲームバラエティ“YATTE-MIKKA!”が配信！ 第1回はインパルス・板倉らお笑い芸人が『CoD ブラックオプス 4』に挑戦@ファミ通(2019/02/05  16:00)▪️『グランブルーファンタジー Relink』プラチナゲームズとの開発契約が終了、今後はサイゲームス一社での開発体制に移行しプロジェクトは継続@ファミ通(2019/02/05  16:00)▪️PS4/PS Vita『バレットガールズ ファンタジア』のBEST版が3月28日に発売決定、DL版『バレットガールズ2』も価格を改定@ファミ通(2019/02/05  16:00)▪️『仁王』が全世界250万本突破！ 本編とDLCを収録した『仁王 Complete Edition』が50％OFFになる突破記念セールを開催@ファミ通(2019/02/05  16:00)▪️2019年1月ソフト・ハード売上ランキング速報、『キングダム ハーツIII』が月間ランキング1位！Switchは11か月連続首位に@ファミ通(2019/02/05  12:00)▪️12機の個性的なメカが大乱闘をくり広げるアクションゲーム『オーバーライド 巨大メカ大乱闘』がPS4で4月18日に発売決定@ファミ通(2019/02/05  12:00)▪️タイタンフォール世界の基本プレイ無料バトルロイヤルゲー『APEX LEGENDS』が発表＆PS4/XB1/PCで本日サービス開始！@ファミ通(2019/02/05  08:00)

Latest Post

4061views

クリスマスプレゼントの購入

育児シンカリオン

さてもう直ぐクリスマスですね。早速ですが、既に購入してしまいました。何を購入したかというと・・・シンカリオンの「ブラックシンカリオン」のプラレールです！！これの何がすごいって？それは何と言っても、先頭車両に動力がなくても動く代物です！！。他のシンカリオンはそもそも動かないんですよね。動いて返信してっ...2018/8/19

201506views

webページに独自のフォントを利用する

ホームページ作成PHPのTIPS＆便利な利用方法htmlCSSTips@font-facefont-familyフォント

本日はWEBページで外部フォントを利用する方法です。任意の位置に、自分のコードを導入することが出来ます。例えば以下のようにフォントを変更することが可能です。Let's use Original font@font-faceで外部フォントを利用する独自のフォントを使うには@font-face...2018/8/18

14460views

2020年度のプログラム必修化に備える！子供向けパソコンの選び方とは

育児プログラム必修化プログラムパソコン

記事は製作中です。下記はhttps://dot.asahi.com/aera/2016102800135.html?page=1からの紹介です。　今年3月に発表された新学習指導要領で、2020年度から小学校でプログラミング教育が必修化されることが明示されました。数年前からプログラミング教育への関心は...2018/8/8

4072views

年代別！2018年度の子供のクリスマスプレゼントのオススメ

育児クリスマスプレゼント

この記事は作成中です。また今年もやってきたクリスマス。お子さんにはどんなプレゼントを上げますか？悩ましい問題ですよね。皆さんに年代別で今年の流行りも含めながらオススメのプレゼントを紹介していきますので、ぜひ参考にして頂ければと思います。0〜1才★男の子編2才★男の子編第一位２才になって来たらそろそろ...2018/8/6

216083views

NEOGEO miniを買うなら楽天に急げ！

育児ゲームガジェットネオジオミニ

【aff：2,1】NEOGEO miniを買うなら楽天に急げ！楽天ならまだまだ在庫がありますよ。しかも・・・自分の場合はamazonで予約して入荷予定が８末で予約してしまいました・・・なので首を長〜くして待っています。さてネオジオミニ ですがどんなソフトが収集されているのでしょうか？ネオジオミニ に...2018/8/6

4112views

preタグ内のコードのタグをそのまま表示させる方法

育児PHPのTIPS＆便利な利用方法htmlPHP正規表現preg_match_allstr_replaceprecode

例えばホームページを作成する際にプログラムコードをそのまま表示させたい場合、preタグ内であってもタグは表示できません。あくまでpreタグ内は改行・空欄がそのまま表示されるだけです。なので、preタグ内をプログラムで表示させたい場合、HTMLの特殊文字を変換しないといけません。いちいち面倒なので指定...2018/8/6

4246views

PHPで配列のキーと値を取得する

ホームページ作成PHPのTIPS＆便利な利用方法TipsPHPforeachexplode

PHPの配列のキーと値を同時に取得することで、BLOGサイトのように、URLではカテゴリーのID（配列のキー）で、リンクの形式は配列の値で同時に表示することができます。実施したい内容は以下のイメージです。foreachの構文を見てみましょう。foreach(変数 as キー => 値){ pri...2018/8/5

754502views

徹底解剖！Whatsko 3022種ゲーム贈 ポータブルゲーム機 16G拡張バージョンのリスト FC MDレトロ懐かしゲーム機を紹介

GAMEエミュレータガジェット

さて前回紹介を行った「Goolsky Retromini ゲーム コンソール 32ビットポータブル ミニ ハンドヘルド ゲーム プレーヤー 内蔵40ゲーム 子供向け GBA クラシック ゲーム ベスト ギフト(多言語対応 日本語 中国語 英語 韓国語)」でしたがなかなか面白いものでしたので、今度はW...2018/8/5

7084views

徹底解剖！Goolsky Retromini ゲーム コンソール 32ビットポータブル ミニ ハンドヘルド ゲーム プレーヤー 内蔵40ゲーム 子供向け GBA クラシック ゲーム ベスト ギフト(多言語対応 日本語 中国語 英語 韓国語)

GAMEエミュレータガジェット

amazonで怪しい商品を買ってみました。それはこれです。Goolsky Retromini ゲーム コンソール 32ビットポータブル ミニ ハンドヘルド ゲーム プレーヤー 内蔵40ゲーム 子供向け GBA クラシック ゲーム ベスト ギフト(多言語対応 日本語 中国語 英語 韓国語)このゲームは...2018/8/5

5443views

真・女神転生４北米版のプレイ日記４

GAME真・女神転生４プレイ日記ゲーム英語北米版ゲーム中継

さて、メインクエストをどんどん進めていきます。するとNavarreが行方不明ということで助けに行きます。先の展開的に多分危ない方向になるんだろうなぁと思いつつクエストを進めます。真・女神転生４では、複数の敵が連なったバトルがあります。全体魔法で一気に片付けないと全滅の恐れがあります！敵が叫び声をあげ...2018/2/4

PAGE TOP

(C)ROROのWEB技術・子育て・ガジェット通信