6_5:Webフォントの使用 p5.js JavaScript

システムフォント以外に、フォントを提供者からダウンロードして使用する選択肢もあります。これはWebフォントと呼ばれ、GoogleFontsが有名です。

GoogleFontsのWebフォントを使用するには次のようにします。

  1. GoogleFontsにアクセスし、使用したいフォントを決める(以下はCoinyフォントの例)
  2. フォント名の右にある赤丸の十字ボタンをクリックする
  3. ブラウザ画面下端に[Family Selected]領域が現れるのでそれをクリックする
  4. 下図のウィンドウが表示される
  5. 埋め込みフォントのリンクコードが表示されているので、<head>タグ内にコピーする
  6. 	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
    	<link href="https://fonts.googleapis.com/css?family=Coiny" rel="stylesheet">
    </head>
  7. textFont()にフォント名を指定する
  8. textFont('Coiny');

日本語フォントも同様にして利用できます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA