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

▪️『星のカービィ　ディスカバリー』変幻自在なカービィのアクションに夢中になること間違いナシ！【おすすめゲームレビュー】@ファミ通(2022/05/03  20:00)▪️『エルデンリング』1700人の“褪せ人”が参加したアンケートの結果を公開！ プレイ時間やゲームの魅力、好きな武器種に選んだ素性などが明らかに【ELDEN RING 中間報告 第1弾】@ファミ通(2022/05/03  20:00)▪️2022年注目Switchタイトル21選。『モンハンライズ：サンブレイク』や『スプラトゥーン3』など秋までに発売予定のタイトルをピックアップ@ファミ通(2022/05/03  16:00)▪️『スプラトゥーン3』従来のメインウェポン基本形はすべて発売当日から登場予定。シューターからスシ、わかば、96の正式発表も@ファミ通(2022/05/03  08:00)▪️『Apex Legends』シーズン13の最新情報。改変されたストームポイントではトレーラーで倒した怪物がスポットに。ジブの調整やクラフト武器変更などもお届け！@ファミ通(2022/05/03  04:00)▪️横スクゲーム好きは必見の『コーゲン: 大鳥こはくと刻の剣』は時間逆行で思うがままに暴れられる極上の剣戟アクション【おすすめゲームレビュー】@ファミ通(2022/05/03  00:00)▪️『エルデンリング』“松明”全6種の性能や入手場所まとめ。特殊効果などにも注目（ファミ通 攻略ch）@ファミ通(2022/05/03  00:00)▪️『ソウルハッカーズ2』ミレディを中心としたキャラクター相関図やダンジョン探索の詳細をお届け@ファミ通(2022/05/03  00:00)▪️『PSO2 ニュージェネシス』リバイバルACスクラッチ3種が配信。ヴォルフェンマスク、アンギュラーウィングなどが再登場@ファミ通(2022/05/02  20:00)▪️Xboxをイメージした新作ネイルコレクションが日本でも5月2日から発売開始。Xboxの人気ゲームの世界観をイメージした12色の新作カラーがお目見え@ファミ通(2022/05/02  20:00)▪️【PS5】ドンキ公式アプリで抽選販売を実施中。エントリー受付は5月6日23時59分まで@ファミ通(2022/05/02  20:00)▪️『AI: ソムニウムファイル ニルヴァーナ イニシアチブ』現在と過去が交差するストーリーや捜査パートの追加要素、新キャラクターなどが公開@ファミ通(2022/05/02  16:00)▪️『リーガルダンジョン』で試されるプレイヤーの良心。警察の仕事は犯人逮捕ではなく書類作成――【おすすめゲームレビュー】@ファミ通(2022/05/02  12:00)▪️『Behind the Frame 〜とっておきの景色を〜』ひとりの画家の物語を追体験する心温まる謎解きアドベンチャー【とっておきインディー】@ファミ通(2022/05/02  12:00)▪️【Apex】世界大会ALGSの優勝はREIGNITE（リイグナイト）！ 日本チームのUNITEは3位、GameWithは9位でフィニッシュ。注目のTSMは6位に！@ファミ通(2022/05/02  04:00)▪️エルデの王になった？ つぎは『Sifu』を遊んで水になれ【おすすめゲームレビュー】@ファミ通(2022/05/01  20:00)▪️『WWE 2K22』プロレスを知らなくても楽しめる！時間泥棒なクリエイトモードもとにかく楽しいプロレスゲームにハマろう！【おすすめゲームレビュー】@ファミ通(2022/05/01  16:00)▪️『アイケンフェル』少しの勇気で世界は変わる！魔法で戦うRPG！【とっておきインディー】@ファミ通(2022/05/01  12:00)▪️『アンパッキング』引っ越しを通じて人生の断片を見つめ、物語を読み解いていく忘れがたいパズルゲーム【おすすめゲームレビュー】@ファミ通(2022/04/30  20:00)▪️ディースリー・パブリッシャーがPS4向けタイトルを対象とした“Golden Week Sale”を開催。『地球防衛軍5』は56%オフの3495円@ファミ通(2022/04/30  20:00)▪️Switch『ワールドネバーランド エルネア王国の日々』DL版が51%オフの1980円。エルネア王国の日々 生誕7周年セール開催中@ファミ通(2022/04/30  20:00)▪️『FFオリジン』は初代『FF』の新解釈で、ガーランドがさらに好きになる！“死にゲー”というほど難しくないよ！【おすすめゲームレビュー】@ファミ通(2022/04/30  16:00)▪️『ドラゴンクエストX　オンライン』プレイ日記　バトマス片手剣二刀流パーティなら30分で260万越えの経験値を獲得！ これはスゴイ（第375回）@ファミ通(2022/04/30  16:00)▪️THQ Nordic GWセール開催中。『デスペラードス3』『キングダムズ オブ アマラー』『ダークサイダーズ』シリーズなど通好みタイトルがお買い得【Swich/PS4】@ファミ通(2022/04/30  12:00)▪️アベイルで『Dead by Daylight』のTシャツ、下着、バッグ、クッションなどのアイテムが本日4/30より発売！ オンラインストアでの予約販売もあり@ファミ通(2022/04/30  12:00)▪️『うたわれるもの 散りゆく者への子守唄』思い出に残り続けるキャラの掛け合い、物語、戦闘。いま『うたわれ』を遊ぶべき理由【おすすめゲームレビュー】@ファミ通(2022/04/30  00:00)▪️青木瑠璃子、福原綾香、渕上舞が『マリパ』で遊ぶ生放送が5月2日（月）19時より放送開始【青木瑠璃子のアイコン】@ファミ通(2022/04/30  00:00)▪️『マイ・ラブリー・ドーター』『ドリームアローン』などがお買い得な“ワーカービー GWセール”が開催【最大63％OFF】@ファミ通(2022/04/30  00:00)▪️『地球防衛軍6』の発売日が8月25日に決定。『お姉チャンバラ』コラボのネタ武器やホロライブ・大神ミオの戦闘用デコイなど各種特典が公開@ファミ通(2022/04/30  00:00)▪️『エルデンリング』“青色の秘雫”修正などが施された最新アップデート情報、遺灰全レビュー第3弾や“死術師ガレス”討伐などの攻略動画をピックアップ【今週のエルデンリング】@ファミ通(2022/04/30  00:00)

Latest Post

25205views

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

育児シンカリオン

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

352880views

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

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

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

27759views

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

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

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

13652views

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

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

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

421319views

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

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

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

11092views

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

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

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

52664views

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

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

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

952405views

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

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

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

29559views

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

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

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

10827views

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

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

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

PAGE TOP

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