font-generator-free

产品配图

关于

Have you ever wanted to generate fancy text for your Instagram bio, Twitter handle, or TikTok username? There are tons of font generator websites out there, but most of them either: 📵 Require signup 💰 Charge for basic features 🐢 Run slow on free hosting 📱 Don't work well on mobile So I built Font Generator Free — a completely free, no-signup-required Unicode font generator that works seamlessly on all devices. In this post, I'll walk you through the tech stack, key challenges, and how you can build something similar. The Problem I wanted to create stylish text for my social media profiles. Most tools I found had one of these issues: Limited font styles (maybe 5-10) Required account creation Watermarks on exports Slow or buggy No batch conversion I figured: how hard can it be? Let me build one myself. The Solution  Key Features 30+ Font Styles — Bold, Italic, Bubble, Gothic, Cursive, Zalgo, and more Two Modes — Single text or batch conversion Multiple Export Formats — TXT, HTML, ZIP, PNG, PDF Pro Features — Unlimited saved combos, cloud sync, history Zero Cost — Totally free to run Tech Stack Here's what makes this all possible without paying for servers: Frontend Pure HTML + JavaScript (no framework overhead) Tailwind CSS via CDN (fast prototyping) JSZip for client-side ZIP generation html-to-image for PNG exports Backend Cloudflare Workers — Serverless edge functions Cloudflare D1 — SQLite database (100MB free) Cloudflare Pages — Static site hosting (free) Total monthly cost: $0 ☁️ How It Works 1. Unicode Font Mapping The core of a font generator is Unicode character mapping. Each "font" is actually a different Unicode block: Regular: ABCDEFGHIJKLMNOPQRSTUVWXYZ Bold: 𝐀𝐁𝐂𝐃𝐄𝐅𝐆𝐇𝐈𝐉𝐊𝐋𝐌𝐍𝐎𝐏𝐐𝐑𝐒𝐓𝐔𝐕𝐖𝐗𝐘𝐙 Bubble: ⒶⒷⒸⒹⒺⒻⒼⒽⒾⒿⓀⓁⓂⓃⓄⓅⓆⓇⓈⓉⓊⓋⓌⓍⓎⓏ Gothic: 𝔄𝔅𝔇𝔈𝔉𝔊𝔋𝔌𝔎𝔏𝔐𝔑𝔒𝔓𝔔𝔕𝔖𝔗𝔘𝔙𝔚𝔛𝔜𝔷 Here's a simplified version of how I map characters: javascript const boldMap = { 'A': '𝐀', 'B': '𝐁', 'C': '𝐂', // ... all A-Z, a-z, 0-9 }; function convertToBold(text) { return text.split('').map(char => boldMap[char] || char).join(''); } 2. Batch Mode with Client-Side Processing For batch conversion, I process everything in the browser: javascript function batchConvert(texts, fonts) { const results = []; for (const text of texts) { for (const font of fonts) { results.push({ source: text, font: font.name, output: font.convert(text) }); } } return results; } This keeps the backend simple — it only needs to handle user authentication and saving combos. 3. Cloudflare Workers API The backend is a simple Worker handling user authentication and data storage: javascript export default { async fetch(request, env) { const url = new URL(request.url); if (url.pathname === '/api/combo/save') { // Save user's font combo to D1 const { googlesub, name, fonts } = await request.json(); await env.DB.prepare( INSERT INTO fontcombos (googlesub, name, fonts) VALUES (?, ?, ?) ).bind(googlesub, name, JSON.stringify(fonts)).run(); return new Response(JSON.stringify({ success: true })); } } }; 4. PayPal Integration For Pro subscriptions, I integrated PayPal. The key part is webhook signature verification to prevent fake payments: javascript async function verifyWebhookSignature(request, env) { // Extract PayPal headers const transmissionId = request.headers.get('PAYPAL-TRANSMISSION-ID'); const certUrl = request.headers.get('PAYPAL-CERT-URL'); const signature = request.headers.get('PAYPAL-TRANSMISSION-SIG'); // Verify certificate comes from PayPal if (!certUrl.endsWith('.paypal.com')) { return { valid: false }; } // Download cert and verify RSA signature // ... signature verification logic return { valid: true }; } Challenges & Solutions Challenge 1: Unicode Ranges Some Unicode blocks aren't continuous! For example, Mathematical Bold Italic: javascript // Wrong: Assumes continuous range const start = 0x1D400; const boldItalic = {}; for (let i = 0; i < 26; i++) { boldItalic[base[i]] = String.fromCodePoint(start + i); // ❌ Wrong codes! } Solution: Manually verify each character's code point. I had to fix several fonts that were using incorrect ranges. Challenge 2: Composite Characters Fonts like "Dot" use combining characters (like i + combining dot): javascript // Wrong: Array.from splits the composite character Array.from('ȧḃċḋ'); // ['a', '̇', 'b', '̇', ...] ❌ // Correct: Build manually const dotMap = {}; for (const char of 'abcdefghijklmnopqrstuvwxyz') { dotMap[char] = char + '\u0307'; // Add combining dot } Challenge 3: Monthly Renewal Logic When a user renews their monthly subscription, I needed to extend from their current expiry date (not reset to 30 days): javascript async function calculateExpiry(env, googleId, planType, now) { if (planType === 'lifetime') return null; // Never expires const user = await env.DB.prepare( 'SELECT subscriptionexpiresat FROM users WHERE googleid = ?' ).bind(googleId).first(); if (user?.subscriptionexpiresat > now) { // Extend from current expiry (don't lose remaining days) return user.subscriptionexpiresat + 30 24 3600; } // Start fresh return now + 30 24 3600; } Deployment The deployment is surprisingly simple: 1. Cloudflare Pages — Connects to GitHub, auto-deploys on push 2. Cloudflare Workers — wrangler deploy pushes the API 3. Cloudflare D1 — Creates database with one command bash Deploy worker CLOUDFLAREAPITOKEN=xxx npx wrangler deploy Create database npx wrangler d1 create font-generator-db Results After launching: 📈 ~500 daily visitors in first week 🔒 0 security incidents 💰 $0 hosting costs 😊 Users love the simplicity What's Next Potential improvements: Add more Unicode blocks (Emoji, symbols) Multi-language support User-generated font presets Social sharing features Conclusion You don't need expensive servers to build useful web tools. Modern edge platforms like Cloudflare Workers can handle quite a bit of traffic for free. The key is: 1. Keep the frontend static and client-side 2. Use edge functions for API logic 3. Choose the right database for your use case If you're building something similar, I'd love to hear about it. Feel free to ask questions in the comments! Links: 🌐 Live site: 💻

收录记录

1. 阮一峰周刊·用户投稿

   2026年4月5日 · 1 次收录