Source Code Pro

等幅

Source Code Pro is a monospaced sans-serif font designed for coding environments.

サイズプレビュー

48px
function hello() {}
36px
function hello() {}
24px
function hello() {}
16px
function hello() {}

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%&*

Source Code Pro をSVGに変換する方法

  1. Font to SVG を開き、Google Fonts のドロップダウンから「Source Code Pro」を選択します
  2. 入力欄にお好みのテキストを入力します
  3. 塗りの色、線、その他の設定を必要に応じてカスタマイズします
  4. SVG 出力をリアルタイムでプレビューします
  5. 「SVG をダウンロード」をクリックするか、SVG コードを直接コピーします

Source Code Pro について

Source Code Pro is a 等幅 typeface designed by Paul D. Hunt. Source Code Pro is a monospaced sans-serif font designed for coding environments.

When converted to SVG paths with Font to SVG, Source Code Pro produces clean vector outlines that can be used in web design, logo creation, and physical fabrication. The 等幅 style makes it particularly well-suited for developer portfolios, technical documentation, and code-themed designs.

Source Code Pro SVG の主な用途

  • 開発者ポートフォリオのヘッダーやコード風デザイン
  • 技術ドキュメントやターミナル風グラフィック
  • プログラミングブログのロゴやブランドコンテンツ
  • レトロ風デザイン要素やUIモックアップ

なぜ Source Code Pro をSVGに変換するのか?

  • 解像度非依存 — モバイルから4Kディスプレイまで、あらゆる画面サイズで鮮明に表示
  • フォントファイル不要 — フォントをインストールしなくてもSVGはどこでも動作
  • CSSで自由にスタイリング — 色の変更、グラデーション、フィルター、アニメーションの適用が可能
  • 軽量なファイルサイズ — テキストのベクターパスはラスター画像よりはるかに小さい
  • SEOに最適 — インラインSVGテキストはレンダリングをブロックするフォントリクエストなしでスタイリング可能
  • 加工にも対応 — レーザーカット、CNCルーティング、カッティング用にDXFとしてエクスポート可能

フォント詳細

Family Source Code Pro
Category 等幅
Designer Paul D. Hunt
License SIL Open Font License 1.1

Source Code Pro との人気の組み合わせ

以下のフォントは Source Code Pro と組み合わせることで、調和のとれたタイポグラフィデザインを作成できます。

Playfair Display

セリフ
The quick brown fox jumps over the lazy dog
Playfair Display →

Roboto

サンセリフ
The quick brown fox jumps over the lazy dog
Roboto →

Oswald

ディスプレイ
BOLD HEADLINES
Oswald →

Source Code Pro に関するよくある質問

Source Code Pro は無料で使えますか?
はい、Source Code Pro は SIL Open Font License 1.1 ライセンスの下で提供されており、個人利用・商用利用ともに無料でご使用いただけます。
Source Code Pro をSVGとしてダウンロードするには?
エディターで Source Code Pro を選択し、テキストを入力してスタイリングをカスタマイズした後、「SVG をダウンロード」をクリックするだけです。ベクターパスアウトラインを含むクリーンなSVGファイルが取得できます。
Source Code Pro のSVGをレーザーカットに使えますか?
もちろんです!当ツールで Source Code Pro をSVGまたはDXF形式に変換してください。ベクターパスはすべての主要なレーザーカットおよびCNCソフトウェアと互換性があります。
Source Code Pro のSVGをReactやVueで使えますか?
はい!当ツールはSVG出力からすぐに使えるReact JSXおよびVue SFCコンポーネントを生成します。プロジェクトにコピー&ペーストするだけでご利用いただけます。

関連フォント