সাইড প্রোজেক্ট - গুগল ফন্ট ক্যাটালগ

কখনো যদি ফন্ট পিকার, টাইপোগ্রাফি কম্পোনেন্ট বা এমন কিছু বানাতে গিয়েছেন যেখানে ইউজারকে গুগল ফন্ট থেকে ফন্ট সিলেক্ট করতে হয়, তাহলে নিশ্চয়ই একটা ঝামেলায় দেখেছেন যে এদের এপিআই (API) কল না করে ফন্টের লিস্ট পাওয়ার কোনো সহজ উপায় নেই। আর থাকলেও আপনাকে বার বার এপিআই কি দিয়ে কল করা লাগবে যেটা ক্ষেত্র বিশেষে এক্সপেনসিভ হতে পারে।

আমি এই সমস্যার একটা সমাধান বের করেছি।

Github link - https://hasinhayder.github.io/google-fonts/

গুগল ফন্টের পুরো ক্যাটালগ - সব ফ্যামিলি, ভেরিয়েন্ট আর স্ক্রিপ্ট - সবকিছুকে আমি সুন্দর করে গুছিয়ে কিছু JSON ফাইলে নিয়ে এসেছি। কোনো এপিআই কি (API key) লাগবে না, রেট লিমিটের ঝামেলাও নেই। জাস্ট একটা ফোল্ডার, যেটা আপনি ক্লোন করতে পারেন, কার্ল (curl) করতে পারেন, অথবা সরাসরি সিডিএন (CDN) থেকে প্রজেক্টে লোড করতে পারেন।

ফাইলগুলো এভাবে সাজানো আছে:

.
├── fonts.json                          → সব ফন্ট ফ্যামিলি
├── categories.json                     → সব ক্যাটাগরি
├── subsets.json                        → সব সাবসেট
├── fonts/
│   └── inter.json                      → ফন্ট অনুযায়ী মেটাডেটা
│   └── ...                             → ১,৯০০+ ফাইল
├── categories/
│   ├── display/
│   │   ├── fonts.json                  → সব ডিসপ্লে ফন্ট
│   │   ├── subsets.json                → ডিসপ্লে ফন্টের সাবসেট
│   │   ├── latin/
│   │   │   └── fonts.json              → ডিসপ্লে + ল্যাটিন
│   │   └── ...                         → ৪০+ সাবসেট
│   ├── handwriting/
│   ├── monospace/
│   ├── sans-serif/
│   └── serif/
└── subsets/
    ├── latin/
    │   ├── fonts.json                  → ল্যাটিন স্ক্রিপ্টের সব ফন্ট
    │   └── categories.json             → ল্যাটিন সাপোর্ট আছে এমন ক্যাটাগরি
    └── ...                             → ১৮০+ সাবসেট

প্রতিটা ফাইল jsDelivr-এর সিডিএন থেকে পাওয়া যাবে। কিছু এক্সাম্পল নিচে দিলাম:

# jsDelivr Page
https://www.jsdelivr.com/package/gh/hasinhayder/google-fonts

# jsDelivr CDN root
https://cdn.jsdelivr.net/gh/hasinhayder/google-fonts/

# সব ফন্ট ফ্যামিলি, সর্ট করা
https://cdn.jsdelivr.net/gh/hasinhayder/google-fonts/fonts.json

# ল্যাটিন সাপোর্টসহ সব স্যান-সেরিফ ফন্ট
https://cdn.jsdelivr.net/gh/hasinhayder/google-fonts/categories/sans-serif/latin/fonts.json

# অ্যারাবিক স্ক্রিপ্ট সাপোর্ট করে এমন সব ফন্ট
https://cdn.jsdelivr.net/gh/hasinhayder/google-fonts/subsets/arabic/fonts.json

# ইন্টার (Inter) ফন্টের ফুল মেটাডেটা
https://cdn.jsdelivr.net/gh/hasinhayder/google-fonts/fonts/inter.json

আর কোডে ব্যবহার করাও খুব সহজ, জাস্ট একটা ফেচ (fetch) কল:

const res = await fetch(
  "https://cdn.jsdelivr.net/gh/hasinhayder/google-fonts/subsets/latin/display/fonts.json"
);
const { fonts } = await res.json();
// ["ABeeZee", "Aboreto", "Abril Fatface", ...]

ব্যাস, এইটুকুই। কোনো এপিআই কি নেই, কোনো রেট লিমিট নেই। শুধু একটা ইউআরএল যেটা আপনাকে JSON রিটার্ন করবে।

আমি এটা বানিয়েছি কারণ রানটাইমে ফন্ট ডেটা ফেচ করার ব্যাপারটা আমার কাছে বিরক্তিকর লাগত। ফন্টের লিস্ট তো আর প্রতিদিন বদলায় না, ডেটাও খুব ছোট। এটা সিডিএন-এ থাকা উচিত, অথবা আপনার প্রজেক্টের বান্ডেলের সাথে থাকা উচিত যাতে খুব সহজে এক্সেস করা যায়।

প্রজেক্টের লিংক এখানে: Google Fonts Project - Github

এটা দিয়ে কি কি বানানোর প্ল্যান আছে আপনার? কমেন্টে জানাতে পারেন।