はじめに
本記事では markdown AI でフォントを変更する方法を解説します。
markdown AI とは？
Markdown 記法を用いて、簡単に Web ページの作成、公開を行うことができる Web サービスです。
markdown AI は以下のリンクから Google アカウントのみで無料で利用できます。
markdown AI の使用方法は Qiita にも多くの記事があるので割愛させていただきます。
フォントを変える方法
markdown AI では HTML の要素を直接書き込むことができるため、自由度が高い Web ページを作成することが可能です。
以下に、フォントを変更するための具体的な手順を説明します。
CSS の導入
markdown AI では、CSS を使ってフォントを変更することができます。例えば、以下のようにスタイルを定義します。
<style>
* {
font-family: 'Arial';
}
</style>
このコードを Markdown ドキュメントに追加することで、全体のフォントが Arial に変わります。
さらに、細かくフォントを定義したい場合は、* の部分を h1 や p などの HTML 要素に変更します。
<style>
h1 {
font-family: Georgia;
}
h2 {
font-family: cursive;
}
</style>
このコードを Markdown ドキュメントに追加することで、# で始めた要素(h1)のフォントが Georgia に変わります。また、、## で始めた要素(h2)のフォント は cursive に変わります。
font-family について詳しくは以下の記事を参照してください。
Web ブラウザによって、font-family で指定できるフォントの種類が異なります。
Google Fonts を利用
Google Fonts を使うことで、さらに多様なフォントを利用することができます。以下に手順を示します。
- Google Fonts にアクセスし、使用したいフォントを選択します。
- 「Get font」と書かれたボタンをクリックします。
- 「Get embed code」と書かれたボタンをクリックします。
- 画面右側に表示される
Webの欄で<link>を選択し、Embed code in the <head> of your htmlの項目のリンクをコピーします。
例えば、以下のようなリンクです。<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet"> <!-- 1, 2 行目: Google Fonts のパフォーマンスを向上させるために使用される 3 行目: Google Fonts からフォントを取得するために使用される --> - markdown AI のドキュメントにこのリンクを追加し、スタイルを定義します。
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet"> <style> * { font-family: 'Roboto'; } </style>
これで、全体のフォントが（この場合は Roboto に）変わります。
※ Google Fonts で利用できるフォントは基本的に無料ですが、各フォントの About & license の項目でライセンスを確認してから使用するようにしてください。
まとめ
markdown AI では、HTML と CSS を駆使することで、簡単にフォントを変更することができます。Google Fonts などのフォントサービスを利用することで、多様なフォントスタイルを利用することができるので、ぜひ試してみてください。