Source Code Proでコードを見やすく置く｜英数字の等幅表示を試す

この記事の目次開く・閉じる

今回の仕上がり

Source Code ProのRegularを読み込み、iiii・WWWW・数字・括弧を並べました。英数字を同じ幅で配置する等幅書体なので、コードや短いログの列をそろえる用途に向きます。今回の作例では、端末のsans-serifと切り替えて見比べられます。

制作元はAdobeです。本文全体や既存サイトの書体は変更せず、自作例の英数字だけに適用しています。日本語はシステムフォントへ任せています。

自分のページへ使うときは、@font-faceで同じフォルダのWOFF2を指定し、コード欄のfont-familyへ割り当てます。読込が失敗した場合は、ファイル名の大文字小文字と相対パスを確認してください。フォールバック書体が見えているだけの場合もあります。

Adobeの公式配布とOFL 1.1全文を確認しました。利用・埋め込み・再配布などは許可されていますが、フォント単体の販売は禁止です。再配布時は著作権表示とライセンスを残します。改変版では予約名称Sourceの条件も確認が必要です。

このZIPには未変更の公式WOFF2とライセンス全文を入れています。自作HTMLのCC0と、フォントのOFLは別です。今回試したのはRegularの英数字表示で、日本語グリフの収録や読みやすさの優劣を測定したわけではありません。

確認日：2026年11月1日。PCブラウザで操作確認。スマホ実機・読み上げ・全ブラウザでの検証は行っていません。