Androidアプリ開発

KotlinでAndroidアプリのフォントを変更する方法を現役エンジニアが解説【初心者向け】

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　調査手法：インターネット調査

KotlinでAndroidアプリのフォントを変更する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

初心者向けにKotlinの入門向けサイトをまとめた記事もありますので読んでみてください。

なお本記事は、TechAcademyのオンラインブートキャンプ、Androidアプリ開発講座の内容をもとに作成しています。

今回は、Androidアプリ開発に関する内容だね！

どういう内容でしょうか？

アプリのフォントを変更する方法について詳しく説明していくね！

お願いします！

デフォルトフォントについて

Kotlin で Android のアプリを作成した場合、標準では Android OS のデフォルトフォントが使用されます。

[PR] Androidアプリの開発で挫折しない学習方法を動画で公開中

好きなフォントのインストール手順

フォントファイルをダウンロードしたら、Android Studio に取り込むことでインストールを行うことができます。はじめに res の上でマウスを右クリックし「New > Directory 」の順に選択し「font」フォルダを作成します。

Project 表示に切り替えて、フォントファイルを font フォルダにドラッグ&ドロップします。この際、フォント名は「アルファベット小文字とハイフン」で命名するようにします。これで準備は完了です。

無料で利用できるおすすめフォント

インターネット上では無料で利用できるフォントが数多く流通しています。おすすめは「Google Noto Fonts」です。

Google Noto Fonts

Google が Adobe と共同開発したオープンソースのフォントです。以下からダウンロードできます。

https://www.google.com/get/noto/

この他にもフォントをダウンロードできるサイトが多く存在します。フォントを利用する際はライセンスに注意しましょう。特にアプリを配布する際には注意が必要です。

コラム

コスパとタイパ、両方結果的に良くなる良くなる学び方とは？

「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。

コスパ・タイパ最適化の参考として、テックアカデミー卒業生がスクールを選んだ理由をご紹介します。

・困ったときに、質問や相談できる相手がいるため挫折しなかった
・プロとして必要なスキルのみを深く学べたので無駄がなかった
・副業案件の提供と納品までのサポートがあったので目的を達成できた

安価・短期間で広く浅く学んでも意味がありません。本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に無料相談に参加してみませんか？

カウンセラー・現役のプロへ、何でも気軽に無料相談可能。 30分か60分お好きな時間が選べて、かつ3回まですべて無料でご利用できます。
無理な勧誘は一切ないので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き！無料相談はこちら

フォントを読み込み処理を書いてみよう

インストールしたフォントを利用するには2種類の方法があります。

アプリ全体で使用する方法

アプリの style ファイルで「android:fontFamily」で指定します。 style ファイルは「res > values」フォルダにある styles.xml です。例えば以下は alexbrush フォントを指定しています。

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:fontFamily">@font/alexbrush</item>
    </style>

</resources>

要素ごとに指定する方法

フォントを要素ごとに指定するには、要素の fontFamily 属性に指定します。以下は TextView に指定した例です。

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:fontFamily="@font/alexbrush"
    android:text="Hello World!"
    android:textSize="32dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

実行結果は以下のとおりです。

まとめ

今回の記事では Android アプリのデフォルトのフォントと、フォントの変更方法について学びました。

筆者プロフィール

太田和樹（おおたかずき）

ITベンチャー企業のPM兼エンジニア

普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。

開発実績：画像認識技術を活用した駐車場混雑状況把握（実証実験）、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント。

地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。

内容分かりやすくて良かったです！

ゆかりちゃんも分からないことがあったら質問してね！

分かりました。ありがとうございます！

TechAcademyでは、初心者でも最短4週間で、Kotlinの技術を使ってAndroidアプリ開発を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

プログラミングを独学で学習していて、このように感じた経験はないでしょうか？

・調べてもほしい情報が見つからない
・独学のスキルが実際の業務で通用するのか不安
・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるようカウンセラーやエンジニア・デザイナーがあなたの相談に真摯に向き合います。

「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。

無理な勧誘は一切ありませんので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！無料相談を予約する

Androidアプリ開発でRadioButton(ラジオボタン)を追加する方法

Androidアプリ開発では、アプリのパーツを簡単に追加できるGUIコンポーネントが数多く用意されています。今回はそのなかの1つである、RadioBut...

Androidアプリ開発

Kotlinのcompanion objectの基礎について現役エンジニアが解説【初心者向け】

Kotlinのcompanion objectの基礎について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。...

Androidアプリ開発

Kotlinのwhen式で条件処理分岐を実行する方法【初心者向け】

Kotlinのwhen式の使い方について解説します。これからKotlinを学ぼうと考えている方はぜひチェックしておきましょう。 ...

Androidアプリ開発

Androidアプリ開発でRatingBarを追加する方法【初心者向け】

Androidアプリ開発では、アプリのパーツを簡単に追加できるGUIコンポーネントが数多く用意されています。今回はそのなかの1つである、RatingBa...

Androidアプリ開発

Androidアプリ開発でBitmapクラスを使って画像を表示させる方法

Androidアプリを開発では、Bitmapクラスを使って画像を表示したり変更したりすることができます。そこで今回はBitmapクラスを使って画像を表示...

Androidアプリ開発

Androidアプリ開発でログ(Log)を出力する方法【初心者向け】

Androidアプリを開発するときに便利な、[LogCat]ビューにログを出力（取得）する方法をご紹介します。 Androidアプリ開発でログ(Log)を...

Androidアプリ開発

あわせてよく読まれている記事

今年のトレンド！2016年最も売れたフォント、トップ50を集めてみた

本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。また、本記事は、Doru Ciobanu氏によって投稿されました。タイポグラフィは、独自の世界観、テクニック、統一感を組み合わせたアートです。素晴らしいデザインには、素晴らしいタイポグラフィがあります。 Webデザインまたは出版物のデザインでも、パンフレットやユーザーインターフェースのデザインでも、ロゴのデザインでも、プロジェクトを成功させるために重要な鍵となるものの1つはフォントです。フォント、色、その他デザインをどのように組み合わせるかという選択が、成功と失敗の分岐点となります。こうした細部に十分な注意を払わないがために、優れた製品を生み出すために費やした全ての努力が無駄になることもあります。しかし幸いなことに、優れたタイポグラフィのためのガイドとなるリソースは、豊富に存在しています。そして、これから紹介するのは、2016年に最も売れた50のフォントです。 1. FF DIN デザイナー：Albert-Jan Pool デザインされた年：1995 発行者：FontFont FF Dinは、1995年から2009年にかけて、オランダのデザイナーAlbert-Jan Poolｚ氏によって制作されたフォントです。FF Dinには、20のウェイト（フォントの太さ）があります。編集、出版物、広告、パッケージ、ブランディング、クリエイティブ産業（creative industries：知的財産権に関わるデザイン）、ポスター、看板、Webや画面の設計に適しています。なお、キリル文字とギリシャ語の書記体系については、サポートが限られています。 2. Brandon Grotesque デザイナー：Hannes vonDöhren デザインされた年：2010 発行者：HVD Fonts Brandon Grotesqueは、6つのウェイトとそれに対応する6つのイタリック体から成る、有名なサンセリフのフォントです。このフォントは、可読性を高めるために光学的な修正を加えた幾何学的形状から、インスピレーションを受けています。 Brandon Grotesqueは機能的かつエレガントなフォントです。ウェイトの太さをthinで色をブラックにすると、展示デザインに適しています。 Brandon Grotesqueは、洗練されたプロフェッショナルな印象を与えるデザインを生み出すには良い選択です。また、西ヨーロッパ言語だけでなく、中欧および東ヨーロッパ言語をサポートする拡張文字のセットもあります。 [PR] Androidアプリの開発で挫折しない学習方法を動画で公開中3. Century Gothic デザイナー：Monotype Design Studio　Sol Hess　Morris Fuller Benton デザインされた年：1990-1995-2007 発行者：Monotype Century Gothicは、Futuraフォントの競合他社の2つの書体から派生したフォントですが、Futuraフォントの影響も強く受けています。軽くて広々とした印象の書体であり、クリーンな縁取りを備えた、細部まで完璧なフォントです。見出しや大きな看板のデザインには理想的です。 4. Proxima Nova デザイナー：Mark Simonson デザインされた年：2005 発行者：Mark Simonson Proxima Novaのフォントファミリーは、有名なProxima Sansフォントの完全な復古版です。OpenTypeフォント機能は48個に拡張されました。 3つの幅には、それぞれ16のフォントが対応しています。人間的な比率と幾何学的なデザインを組み合わせた、スタイリッシュなフォントです。ほとんどのラテン語系言語の文字をサポートしています。コラムコスパとタイパ、両方結果的に良くなる良くなる学び方とは？「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。もちろん、時間も費用もかかることは間違いありません。

Webデザイン

Androidアプリ開発のGridLayoutの使い方【初心者向け】

Androidアプリ開発では、アプリの画面を簡単に作成できるレイアウトが数多く用意されています。今回はそのなかの1つである、GridLayout（グリッドレイアウト）を追加する方法と基本的な使い方をご紹介します。本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。大石ゆかり田島メンター！！電卓アプリを作っているんですけど、ボタンを等間隔に設置する方法ってないですか〜？田島悠介それならGridLayoutがいいよ。格子状にパーツを並べることができるんだ。大石ゆかりあ、どうやって使うんですか〜？ GridLayoutとは GridLayoutとは、パーツを格子状に並べるときに使用するレイアウトです。TableLayoutと似ていますが、GridLayoutでは列をまたいでパーツを配置することができます。 Android4.0で公開された比較的新しいレイアウトです。 GridLayoutを配置する今回は、GridLayoutを使用してこの画像のような画面を作成してみます。 GridLayoutはレイアウトエディタのパレットの「レイアウト」から配置できます。パレット内のGridLayoutを、プレビュー画面までドラッグしましょう。次に、GridLayoutの列数を指定します。列数は、プロパティの「ColumnCount」で指定できます。今回は5列必要なので、「ColumnCount」の値を「5」にします。 [PR] Androidアプリの開発で挫折しない学習方法を動画で公開中GridLayoutにパーツを配置する GridLayoutにパーツを配置するには、レイアウトエディタのパレットから配置したいパーツを選択し、プレビュー画面へドラッグします。ボタンを画面に配置したら、ボタンを配置するセルを指定しましょう。セルの指定はプロパティの「Layout Parameters – Row」で、配置する行を指定できます。また、「Layout Parameters – Column」で、配置する列も指定できます。上から2行目の3列目に配置したい場合は、layout_rowを「1」、layout_columnを「2」といった具合に指定していきましょう。また、複数のセルをまたぐ場合は、「android:layout_rowSpan」「android:layout_columnSpan」を指定します。「CE」ボタンや「0」ボタンのように、横にまたぐ場合は「android:layout_columnSpan」を「2」にします。同じように、「+」ボタンのように縦にまたぐ場合は「android:layout_rowSpan」を「2」にします。すべてのボタンが配置できたら実行して、画面を確認してください。 GridLayoutのコードを確認する XMLタブでコードを確認すると、下記のようになっています。 <GridLayout xmlns:android=”http://schemas.android.com/apk/res/android” android:layout_width=”fill_parent” android:layout_height=”fill_parent” android:columnCount=”5″ > <Button android:id=”@+id/button1″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”0″ android:layout_row=”0″ android:text=”7″ /> <Button android:id=”@+id/button2″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”1″ android:layout_row=”0″ android:text=”8″ /> <Button android:id=”@+id/button3″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”2″ android:layout_row=”0″ android:text=”9″ /> <Button android:id=”@+id/button4″ android:layout_width=”120dp” android:layout_height=”60dp” android:layout_column=”3″ android:layout_columnSpan=”2″ android:layout_row=”0″ android:text=”CE” /> <Button android:id=”@+id/button5″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”0″ android:layout_row=”1″ android:text=”4″ /> <Button android:id=”@+id/button6″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”1″ android:layout_row=”1″ android:text=”5″ /> <Button android:id=”@+id/button7″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”2″ android:layout_row=”1″ android:text=”6″ /> <Button android:id=”@+id/button8″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”3″ android:layout_row=”1″ android:text=”×” /> <Button android:id=”@+id/button9″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”4″ android:layout_row=”1″ android:text=”÷” /> <Button android:id=”@+id/button10″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”0″ android:layout_row=”2″ android:text=”1″ /> <Button android:id=”@+id/button11″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”1″ android:layout_row=”2″ android:text=”2″ /> <Button android:id=”@+id/button12″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”2″ android:layout_row=”2″ android:text=”3″ /> <Button android:id=”@+id/button13″ android:layout_width=”60dp” android:layout_height=”120dp” android:layout_column=”3″ android:layout_row=”2″ android:layout_rowSpan=”2″ android:text=”+” /> <Button android:id=”@+id/button14″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”4″ android:layout_row=”2″ android:text=”1″ /> <Button android:id=”@+id/button15″ android:layout_width=”120dp” android:layout_height=”60dp” android:layout_column=”0″ android:layout_columnSpan=”2″ android:layout_row=”3″ android:text=”0″ /> <Button android:id=”@+id/button16″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”4″ android:layout_row=”3″ android:text=”=” /> </GridLayout> 今回の記事は以上です。さらに他のレイアウトを試したい場合はFrameLayoutの使い方も合わせてご覧ください。大石ゆかり GridLayout、とても便利ですね〜♪ 田島悠介そうだね。Androidは色々なレイアウトが用意されているから、他のレイアウトも使ってみると良いよ♪ 大石ゆかりはい♪ [お知らせ]TechAcademyでは初心者でもオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。プログラミングを独学で学習していて、このように感じた経験はないでしょうか？・調べてもほしい情報が見つからない・独学のスキルが実際の業務で通用するのか不安

Androidアプリ開発

Androidアプリ開発のTableLayoutの使い方【初心者向け】

Androidアプリ開発では、アプリの画面を簡単に作成できるレイアウトが数多く用意されています。今回はそのなかの1つである、TableLayout（テーブルレイアウト）を追加する方法と基本的な使い方をご紹介します。本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。大石ゆかり田島メンター！！HTMLのtableタグみたいにAndroidアプリのパーツを並べる方法ってないですか〜？田島悠介 TableLayoutっていうレイアウトを使うと、tableタグと同じようにパーツを設置できるよ。大石ゆかりあ、そうなんですか〜！？ TableLayoutとは TableLayoutとは、パーツを格子状に並べるときに使用するレイアウトです。 HTMLのtableタグと似ているので、ホームページ作成をしたことがある人は使いやすいレイアウトかもしれません。ただし、行をまたいでパーツを配置することはできませんのでご注意ください。 TableLayoutを配置する今回は、TableLayoutを使用して次のような画面を作成してみます。 TableLayoutは、大枠である「TableLayout」とテーブルの行である「TableRow」でできています。最初にTableLayoutを配置します。 TableLayoutはレイアウトエディタのパレットの「レイアウト」から配置できます。パレット内のTableLayoutを、プレビュー画面までドラッグしましょう。次に、作成する画面には4行必要なので、TableRowを4回プレビュー画面までドラッグして配置します。（行の数によってドラッグする回数を変えてください）配置をしたらアウトラインで、レイアウトが正しく配置されているか確認をしましょう。 [PR] Androidアプリの開発で挫折しない学習方法を動画で公開中TableLayoutにパーツを配置する TableLayoutにパーツを配置するには、レイアウトエディタのパレットから配置したいパーツを選択し、プレビュー画面へドラッグします。横の位置は後ほど調整しますので、目的の行に対して順番にパーツを配置できていれば大丈夫です。 TableLayoutのコードを確認する XMLタブでコードを確認すると、下記のようになっています。 <TableLayout xmlns:android=”http://schemas.android.com/apk/res/android” android:layout_width=”match_parent” android:layout_height=”match_parent” > <TableRow android:id=”@+id/tableRow1″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” > <Button android:id=”@+id/button1″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”7″ /> <Button android:id=”@+id/button2″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”8″ /> <Button android:id=”@+id/button3″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”9″ /> <Button android:id=”@+id/button15″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”/” /> </TableRow> <TableRow android:id=”@+id/tableRow2″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” > <Button android:id=”@+id/button4″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”4″ /> <Button android:id=”@+id/button5″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”5″ /> <Button android:id=”@+id/button6″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”6″ /> <Button android:id=”@+id/button14″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”*” /> </TableRow> <TableRow android:id=”@+id/tableRow3″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” > <Button android:id=”@+id/button7″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”1″ /> <Button android:id=”@+id/button8″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”2″ /> <Button android:id=”@+id/button9″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”3″ /> <Button android:id=”@+id/button12″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”-” /> </TableRow> <TableRow android:id=”@+id/tableRow4″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” > <Button android:id=”@+id/button10″ android:layout_width=”wrap_content” android:text=”0″ /> <Button android:id=”@+id/button11″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”.” /> <Button android:id=”@+id/button13″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”+” /> </TableRow> </TableLayout> コラムコスパとタイパ、両方結果的に良くなる良くなる学び方とは？「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。もちろん、時間も費用もかかることは間違いありません。ただ結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。

Androidアプリ開発

KotlinでAndroidアプリのradiobuttonを追加する方法を現役エンジニアが解説【初心者向け】

KotlinでAndroidアプリのradiobuttonを追加する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。初心者向けにKotlinの入門向けサイトをまとめた記事もありますので読んでみてください。なお本記事は、TechAcademyのオンラインブートキャンプ、Androidアプリ開発講座の内容をもとに作成しています。田島悠介今回は、Androidアプリ開発に関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 KotlinでAndroidアプリのradiobuttonを追加する方法について詳しく説明していくね！大石ゆかりお願いします！目次 radiobuttonとは radiobuttonを配置してみよう radiobuttonが選択された時の処理を追加してみようまとめ radiobuttonとは radiobuttonとは複数の選択肢から1つだけを選択する際に使用するUI部品です。 [PR] Androidアプリの開発で挫折しない学習方法を動画で公開中radiobuttonを配置してみよう radiobuttonはRadioGroupの中にRadioButtonを配置する構成です。Android Developerにサンプルが紹介されていますので確認しながら進めましょう。 Android Developer – Radio Button 例えば「さくら、うめ、ぼたん」のRadio Buttonを配置するには以下のように記述します。 <RadioGroup android:id="@+id/group" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"> <RadioButton android:id="@+id/radio1" android:layout_width="wrap_content" android:layout_height="wrap_content"

Androidアプリ開発

【Webデザインに必須！】無料で使えるおしゃれなフォントまとめ！

お洒落で見やすいフォントの中から、無料で商用利用も可能なものをまとめました。最近では記事を発信しているメディアも増えてきているので、よりフォントが重要になってきています。フォントひとつでサイトの印象を大きく変えるので、妥協せずに満足できるものを選びましょう。 (※商用利用については規模などによって使用料の発生するものも含まれています。各配布サイトの利用規約をご確認ください。) なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。フロップデザインフォントシンプルで使いやすいゴシック体フォント。文字が読みやすいように工夫してデザインされています。フロップデザインフォントピグモ01 絵のようなユニークなフォント。第二水準漢字などにも対応しています。ピグモ01 [PR] Androidアプリの開発で挫折しない学習方法を動画で公開中ほのかアンティーク角アンチック体の、優しい雰囲気を持つフォントです。ほのかアンティーク角はれのそら明朝明朝系のすっきりしたフォント。はれのそら明朝コラムコスパとタイパ、両方結果的に良くなる良くなる学び方とは？「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。もちろん、時間も費用もかかることは間違いありません。ただ結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。コスパ・タイパ最適化の参考として、テックアカデミー卒業生がスクールを選んだ理由をご紹介します。

Webデザイン

CSSでfont-familyを使ってフォントを指定する方法【初心者向け】

CSS初心者向けに、font-familyを使ってフォントを指定する方法を解説する記事です。 CSSの基礎がわからない場合は、CSSの書き方の記事を先にお読みください。本記事は、TechAcademyのWebデザインオンライン講座のCSSのカリキュラムをもとに執筆しています。なお、今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。田島悠介今回はfont-familyプロパティについて解説しよう。大石ゆかり田島メンター！！font-familyは何をするんですか～？田島悠介文字のフォントを指定するプロパティなんだ。値で示されたフォントが文字列に適用されるよ。実際の例で見てみよう。大石ゆかり分かりました！ font-familyとは CSSのfont-familyプロパティを使用することによって、文字列のフォントを指定することができます。Webページを見せる際のフォントを指定したい場合は設定しましょう。事前準備事前準備として、HTMLファイルとCSSファイルをそれぞれ用意しました。なお、CSSのファイルは「sample.css」にすることにします。ぜひ自分のPCでもやってみましょう。 HTMLファイル： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <p class="sample1">ここに文章を表示</p> </body> </html> [PR] Androidアプリの開発で挫折しない学習方法を動画で公開中font-familyを使う使い方は簡単で、「font-family:」のあとに指定するフォントを記述するだけです。例えばこのようになります。sans-serifはゴシック体のことです。 p.sample1 {font-family:sans-serif; } ブラウザで表示させると、このように文字列がゴシック体で表示されています。田島悠介値に”sans-serif”を入力したことで、文字列にフォントが適用されたよ。大石ゆかりこの部分によってフォントの種類が変わるんですね。田島悠介そうだね。値を変更してもう一度画面で確認してみよう。今度は明朝体の「serif」にしています。先ほどの、sans-serifの部分をserifに変えるだけです。 p.sample1 {font-family:serif; } ブラウザで表示させると、明朝体になりました。また、フォントの指定は”MS 明朝”というようにフォントの「名称」で指定することもできます。この際に名称を””などの引用符で囲んで入力します。ここでは「メイリオ」のフォントを指定しています。 p.sample1 {font-family:"Meiryo"; } 先ほどのようにブラウザ上ではメイリオのフォントになりました。 font-familyの書き方について注意点 font-familyの書き方について注意点です。これらのフォントを表示させるためには、作成者ではなく閲覧者のPCに該当のフォントがインストールされている必要があります。また、WindowsとMacではインストールされているフォントが異なるため、注意が必要です。もしも閲覧者側に該当のフォントがなかった場合のために、あらかじめ次に表示させる候補を用意することができます。その場合は下記のように記述します。 font-family: 候補1,候補2,候補3,フォントの種類; 「,(カンマ)」を入れる形で指定しておくと、候補1のフォントがなかった場合は候補2、候補2もなかった場合は候補3というようにフォントが決まっていきます。また、英語フォントと日本語フォントの両方を指定する場合は、先に英語フォントを指定します。そうすることで、アルファベットには英語フォントが、日本語には日本語フォントが使用されるようになります。最後の「フォントの種類」とは、指定した全てのフォントがインストールされていなかった場合に使用されるキーワードです。以下の中から指定できます。フォントの種類使用されるフォント serif 明朝体系フォント sans-serif ゴシック体系フォント cursive 筆記体系フォント fantasy 草食系フォント monospace 等幅系フォント具体的な記述方法はこちらです。 p.sample1 {font-family: "游ゴシック","arial unicode ms",sans-serif;} すると、「游ゴシック」がインストールされていないPCでは、2つ目に指定していた「arial unicode ms」が、両方インストールされていないPCでは、PCにインストールされているフォントの中からゴシック体系のフォントで文字列が表示されます。コラムコスパとタイパ、両方結果的に良くなる良くなる学び方とは？「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。

CSS

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

KotlinでAndroidアプリのフォントを変更する方法を現役エンジニアが解説【初心者向け】

目次

デフォルトフォントについて

好きなフォントのインストール手順