Cloudinary でカスタムフォントをオーバーレイに使う
公開日:
はじめに
Cloudinary、とても便利に使っています。URL を組めばリッチな文字入りの画像を動的に作れるところが気に入っています。ブログのサムネイルなんかで使えます。
テキストを画像に重ね合わせるとき日本語はSawarabi Gothicが使えるのですが、それ以外のフォントも使いたくなったので試行錯誤しました。
そして結構苦労しました。他の方のブログを参考にしたのですが、結構時間が経っていて UI が変わっていました。
ちなみにこの記事を書いている時点では、日本語はデフォルトではSawarabi Gothicしか使えないようです。公式ブログでは Google フォントに入っているフォントは全部使えるようなことが書いてあったのですが、英語のみなのかも知れないです。。
やりかた
以下のように進む。
- Settings を押す
- Product environment settings → Upload と進む
- Add Upload Preset を押す
- Upload preset name を入力
- Optimize and Deliver タブを押す
- Delivery type を Authenticated に変更
- Save を押して登録
- Upload の画面に戻る
- Manage Defaults を押す
- Media Library の Raw の項目を作成した Upload preset に変更
- Assets → Media Library と進む
- Upload を押す
- 追加したいフォントファイルをアップロード
画像なくてすいません。。。
先に Upload preset を作って設定した後にアップロードすることが重要です。
URL を組む
テキストをオーバーレイする時のパラメータを作っていきます。以下が例です。
/l_text:MPLUS1p-Bold.ttf_60_bold:ここにテキストが表示されます,co_rgb:fff,w_620,c_fit/
こんな感じでパラメータを作っていきます。
上の例の内容です。
- フォント:
MPLUS1p-Bold.ttf - 文字サイズ:
60 - フォントの太さ:
Bold - テキスト:
ここにテキストが表示されます
を使ったテストを作る,co_rgb:fff,w_620,c_fit/v1712091289/ogp_image_zorhlz.png)
に入れる,co_rgb:fff,w_620,c_fit/v1712091289/ogp_image_zorhlz.png)
