{"id":7081,"date":"2026-03-20T00:00:12","date_gmt":"2026-03-20T00:00:12","guid":{"rendered":"https:\/\/raistheme.com\/?page_id=7081"},"modified":"2026-04-06T11:40:09","modified_gmt":"2026-04-06T11:40:09","slug":"arabic","status":"publish","type":"page","link":"https:\/\/raistheme.com\/tools\/font-generator\/arabic\/","title":{"rendered":"Arabic Font Generator \u2013 Create Stylish Arabic Text Free"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"7081\" class=\"elementor elementor-7081\">\n\t\t\t\t<div class=\"elementor-element elementor-element-37e57eca e-con-full e-flex e-con e-parent\" data-id=\"37e57eca\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1fa639fe elementor-widget elementor-widget-shortcode\" data-id=\"1fa639fe\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><div id=\"generator-tool\">\r\n    <!-- \r\n      HTML, CSS, and JavaScript for the Arabic Font Generator.\r\n      Designed for WordPress WP Coder integration.\r\n      All styles are scoped to the #generator-tool ID to prevent conflicts.\r\n      All scripts are self-contained.\r\n      THEME: \"Celestial Night\" with responsive typography\/spacing.\r\n      IMPLEMENTATION: Specific list of 55 font styles for the generator output.\r\n      UPDATE: Added override for WP theme padding and adjusted font sizes for better mobile responsiveness.\r\n    -->\r\n\r\n    <!-- Google Fonts and CDN Icons (Same as before) -->\r\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic\" crossorigin>\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Amiri:ital,wght@0,400;0,700;1,400&family=Cairo:wght@400;700&family=Katibeh&family=Lalezar&family=Lateef&family=Lemonada:wght@400;700&family=Reem+Kufi:wght@400;700&family=Tajawal:wght@400;700&display=swap\" rel=\"stylesheet\">\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n    \r\n    <!-- DOM-to-Image Library for \"Copy as Image\" functionality -->\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/dom-to-image\/2.6.0\/dom-to-image.min.js\"><\/script>\r\n\r\n    <style>\r\n        \/* CSS Variables for the \"Celestial Night\" Theme *\/\r\n        #generator-tool {\r\n            --primary-accent: #00c6ff;\r\n            --primary-accent-dark: #0072ff;\r\n            --background-dark-1: #1a233a;\r\n            --background-dark-2: #101828;\r\n            --component-bg: #ffffff;\r\n            --border-color: #e8eaf6;\r\n            --text-primary: #1c274c;\r\n            --text-secondary: #5a647e;\r\n            --text-on-dark: #f0f2f5;\r\n            --glow-accent: 0 0 12px rgba(0, 198, 255, 0.6);\r\n            --shadow-soft: 0 8px 24px rgba(26, 35, 58, 0.1);\r\n            --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.05);\r\n            --gradient-background: linear-gradient(160deg, var(--background-dark-1) 0%, var(--background-dark-2) 100%);\r\n            --gradient-title: linear-gradient(90deg, var(--primary-accent) 0%, var(--primary-accent-dark) 100%);\r\n            --gradient-button: linear-gradient(135deg, var(--primary-accent), var(--primary-accent-dark));\r\n            --border-radius: 12px;\r\n            --max-width: 1200px;\r\n            --font-main: 'Cairo', sans-serif;\r\n            --font-title: 'Lalezar', cursive;\r\n        }\r\n\r\n        #generator-tool * { box-sizing: border-box; margin: 0; padding: 0; }\r\n        #generator-tool {\r\n            \/* FIX: Override WP Theme Padding *\/\r\n            padding-top: 0 !important;\r\n            background: var(--gradient-background); width: 100%; font-family: var(--font-main);\r\n            color: var(--text-primary); font-size: clamp(0.9rem, 1.5vw, 1.1rem); line-height: 1.5;\r\n        }\r\n        #generator-tool .container { max-width: var(--max-width); margin: 0 auto; padding: 0 !important; }\r\n        #generator-tool .top-section-wrapper {\r\n            min-height: 50vh; display: flex; flex-direction: column; align-items: center;\r\n            justify-content: center; padding-block-start: clamp(1rem, 5vw, 2rem);\r\n            padding-block-end: clamp(0.5rem, 2vw, 1rem); \r\n        }\r\n\r\n        \/* Typography *\/\r\n        #generator-tool h1 {\r\n            \/* FIX: Adjusted clamp for smaller mobile screens *\/\r\n            font-family: var(--font-title); font-size: clamp(1.9rem, 7vw, 4.5rem); font-weight: 400;\r\n            text-align: center; background: var(--gradient-title); color: transparent;\r\n            -webkit-background-clip: text; background-clip: text; letter-spacing: 1px; line-height: 1.2;\r\n            margin-bottom: clamp(0.25rem, 1.5vw, 0.75rem);\r\n        }\r\n        #generator-tool .subheading {\r\n            font-size: clamp(0.85rem, 2vw, 1.15rem); line-height: 1.4; text-align: center !important;\r\n            color: var(--text-on-dark); opacity: 0.8; \r\n            margin-bottom: clamp(0.75rem, 3vw, 1.5rem);\r\n        }\r\n        #generator-tool h2 {\r\n            font-size: clamp(1.3rem, 3vw, 2.2rem); line-height: 1.3;\r\n            margin-bottom: clamp(0.5rem, 1.5vw, 1rem); color: var(--text-primary);\r\n        }\r\n        #generator-tool .content-section h2 { padding-top: clamp(0.5rem, 1.5vw, 1rem); border-top: 1px solid var(--border-color); }\r\n        #generator-tool p, #generator-tool ol { margin-bottom: clamp(0.25rem, 1.5vw, 0.75rem); }\r\n\r\n        \/* Generator Component & Sections *\/\r\n        #generator-tool .generator-ui, #generator-tool .content-section {\r\n            background: var(--component-bg); border-radius: var(--border-radius); box-shadow: var(--shadow-soft);\r\n            padding: clamp(1rem, 3vw, 2.5rem); position: relative; overflow: hidden;\r\n        }\r\n        #generator-tool .generator-ui { width: 100%; margin-bottom: clamp(0.5rem, 2vw, 1.5rem); }\r\n        #generator-tool .content-section { margin-block: clamp(1.5rem, 4vw, 3rem); }\r\n        #generator-tool .generator-ui::before, #generator-tool .content-section::before {\r\n            content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;\r\n            background: var(--gradient-button); opacity: 0.8;\r\n        }\r\n\r\n        \/* Input Section *\/\r\n        #generator-tool .input-section { display: grid; grid-template-columns: 1fr; gap: clamp(0.5rem, 2vw, 1rem); margin-bottom: 0; }\r\n        #generator-tool .input-field, #generator-tool .attribute-selector {\r\n            width: 100%; padding: clamp(0.5rem, 2vw, 0.85rem); font-size: clamp(0.9rem, 1.5vw, 1rem);\r\n            background-color: #f7f9fc; border: 1px solid var(--border-color);\r\n            border-radius: calc(var(--border-radius) - 4px); color: var(--text-primary);\r\n            transition: border-color 0.3s, box-shadow 0.3s; box-shadow: var(--shadow-inset);\r\n        }\r\n        #generator-tool .input-field:focus, #generator-tool .attribute-selector:focus { outline: none; border-color: var(--primary-accent); box-shadow: var(--glow-accent); }\r\n        #generator-tool .generate-btn {\r\n            background: var(--gradient-button); color: white; border: none; padding: clamp(0.6rem, 2vw, 0.9rem) 1.5rem;\r\n            font-size: clamp(1rem, 2.5vw, 1.2rem); font-weight: 700; border-radius: calc(var(--border-radius) - 4px);\r\n            cursor: pointer; transition: transform 0.2s, box-shadow 0.3s; width: 100%;\r\n            box-shadow: 0 4px 15px rgba(0, 114, 255, 0.3);\r\n        }\r\n        #generator-tool .generate-btn:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0, 114, 255, 0.4); }\r\n\r\n        \/* Output Section *\/\r\n        #generator-tool .output-section { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: clamp(0.75rem, 2vw, 1.5rem); margin-top: 0; }\r\n        @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }\r\n        #generator-tool .result-card {\r\n            background: var(--component-bg); border: 1px solid var(--border-color); border-radius: var(--border-radius);\r\n            padding: clamp(0.75rem, 2vw, 1.5rem); text-align: center; display: flex; flex-direction: column;\r\n            justify-content: space-between; transition: box-shadow 0.3s, transform 0.3s; overflow: hidden;\r\n            animation: fadeInUp 0.5s ease-out forwards;\r\n        }\r\n        #generator-tool .result-card:hover { box-shadow: var(--shadow-soft); transform: translateY(-5px); border-color: var(--primary-accent); }\r\n        #generator-tool .font-preview {\r\n            \/* FIX: Adjusted clamp for smaller mobile screens *\/\r\n            font-size: clamp(1.7rem, 6vw, 2.8rem); \r\n            margin-bottom: clamp(0.25rem, 1vw, 0.5rem); min-height: 70px;\r\n            display: flex; align-items: center; justify-content: center; direction: rtl;\r\n            color: var(--text-primary); line-height: 1.3; padding: 10px; \/* Padding for image conversion *\/\r\n        }\r\n        #generator-tool .style-name {\r\n            font-size: clamp(0.75rem, 1.5vw, 0.95rem); color: var(--text-secondary);\r\n            margin-bottom: clamp(0.5rem, 1.5vw, 1rem); font-weight: 600;\r\n        }\r\n        \r\n        \/* Button styles *\/\r\n        #generator-tool .button-group {\r\n            display: flex; gap: 8px;\r\n            opacity: 0; visibility: hidden; transform: translateY(10px);\r\n            transition: all 0.3s;\r\n        }\r\n        #generator-tool .result-card:hover .button-group {\r\n            opacity: 1; visibility: visible; transform: translateY(0);\r\n        }\r\n        #generator-tool .copy-btn {\r\n            flex: 1; background: #f0f2f5; color: var(--text-secondary); border: 1px solid var(--border-color);\r\n            padding: clamp(0.4rem, 1vw, 0.6rem); border-radius: calc(var(--border-radius) - 6px);\r\n            cursor: pointer; transition: all 0.3s; font-weight: 600; font-size: clamp(0.75rem, 1vw, 0.9rem);\r\n        }\r\n        #generator-tool .copy-btn:hover { background: var(--text-secondary); color: white; border-color: var(--text-secondary); }\r\n        #generator-tool .copy-btn.primary { background-color: var(--primary-accent-dark); color: white; }\r\n        #generator-tool .copy-btn.primary:hover { background-color: var(--primary-accent); }\r\n        \r\n        #generator-tool .load-more-container { text-align: center; margin-top: clamp(1rem, 3vw, 2rem); }\r\n        #generator-tool #loadMoreBtn {\r\n            background: transparent; color: var(--primary-accent); border: 2px solid var(--primary-accent);\r\n            padding: clamp(0.5rem, 2vw, 0.75rem) 2rem; font-size: clamp(0.9rem, 2vw, 1.1rem);\r\n            font-weight: 700; border-radius: 50px; cursor: pointer; transition: all 0.3s;\r\n        }\r\n        #generator-tool #loadMoreBtn:hover { background: var(--primary-accent); color: var(--background-dark-2); box-shadow: var(--glow-accent); }\r\n        #generator-tool #loadMoreBtn.hidden { display: none; }\r\n\r\n        \/* FAQ Accordion *\/\r\n        #generator-tool .faq-accordion .faq-item { border-bottom: 1px solid var(--border-color); }\r\n        #generator-tool .faq-accordion .faq-question {\r\n            width: 100%; background: none; border: none; text-align: left; padding: 1rem 0;\r\n            font-size: clamp(1rem, 2vw, 1.1rem); font-weight: 700; cursor: pointer;\r\n            display: flex; justify-content: space-between; align-items: center; color: var(--text-primary);\r\n        }\r\n        #generator-tool .faq-accordion .faq-question::after {\r\n            content: '\\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900;\r\n            transition: transform 0.3s; color: var(--primary-accent-dark);\r\n        }\r\n        #generator-tool .faq-accordion .faq-question.active::after { transform: rotate(180deg); }\r\n        #generator-tool .faq-accordion .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; padding: 0 1rem; color: var(--text-secondary); }\r\n\r\n        @media (min-width: 768px) {\r\n            #generator-tool .input-section { grid-template-columns: 2fr 1fr 1fr 1fr; align-items: center; }\r\n            #generator-tool .generate-btn { grid-column: 1 \/ -1; }\r\n        }\r\n        @media (min-width: 992px) {\r\n            #generator-tool .input-section { grid-template-columns: 3fr 1fr 1fr 1fr 1fr; }\r\n            #generator-tool .generate-btn { grid-column: 5 \/ 6; }\r\n        }\r\n    <\/style>\r\n\r\n    <div class=\"container\">\r\n        <!-- TOP 50VH BLOCK -->\r\n        <div class=\"top-section-wrapper\">\r\n            <header>\r\n                <h1>Arabic Font Generator \u2013 Create Stylish Arabic Text Free <\/h1>\r\n                <p class=\"subheading\">Instantly create beautiful and unique Arabic text styles for your designs. Transform your words into stunning calligraphy and modern typography with our free and easy-to-use AI-powered tool.<\/p>\r\n            <\/header>\r\n            <main style=\"width: 100%;\">\r\n                <section class=\"generator-ui\" aria-labelledby=\"generator-heading\">\r\n                    <h2 id=\"generator-heading\" style=\"display: none;\">Font Generation Tool<\/h2>\r\n                    <div class=\"input-section\">\r\n                        <input type=\"text\" id=\"userInput\" class=\"input-field\" placeholder=\"Enter keyword or concept\" aria-label=\"Enter keyword or concept\">\r\n                        <select id=\"toneSelector\" class=\"attribute-selector\" aria-label=\"Select Tone\"><option value=\"modern\">Modern<\/option><option value=\"minimal\">Minimal<\/option><option value=\"fancy\">Fancy<\/option><option value=\"bold\">Bold<\/option><\/select>\r\n                        <select id=\"formatSelector\" class=\"attribute-selector\" aria-label=\"Select Format\"><option value=\"naskh\">Naskh<\/option><option value=\"kufi\">Kufi<\/option><option value=\"diwani\">Diwani<\/option><\/select>\r\n                        <select id=\"lengthSelector\" class=\"attribute-selector\" aria-label=\"Select Length\"><option value=\"short\">Short<\/option><option value=\"medium\">Medium<\/option><option value=\"long\">Long<\/option><\/select>\r\n                        <button id=\"generateBtn\" class=\"generate-btn\" aria-label=\"Generate Fonts\">Generate<\/button>\r\n                    <\/div>\r\n                <\/section>\r\n            <\/main>\r\n        <\/div>\r\n\r\n        <!-- OUTPUT SECTION AND CONTENT (UNLIMITED HEIGHT) -->\r\n        <div class=\"main-content-wrapper\">\r\n            <section id=\"outputSection\" class=\"output-section\" aria-live=\"polite\">\r\n                <!-- Generated font cards will be inserted here -->\r\n            <\/section>\r\n            \r\n            <div class=\"load-more-container\">\r\n                <button id=\"loadMoreBtn\" class=\"hidden\">Load More<\/button>\r\n            <\/div>\r\n\r\n          \r\n\r\n          \r\n            \r\n       \r\n\r\n\r\n        <\/div>\r\n        <br> \r\n    <\/div>\r\n\r\n    <script>\r\n        document.addEventListener('DOMContentLoaded', function () {\r\n            const generatorTool = document.getElementById('generator-tool');\r\n            if (!generatorTool) return;\r\n\r\n            const generateBtn = generatorTool.querySelector('#generateBtn');\r\n            const outputSection = generatorTool.querySelector('#outputSection');\r\n            const userInput = generatorTool.querySelector('#userInput');\r\n            const loadMoreBtn = generatorTool.querySelector('#loadMoreBtn');\r\n            \r\n            let generatedOutputs = [];\r\n            let displayedCount = 0;\r\n            const BATCH_SIZE = window.innerWidth < 768 ? 5 : 10;\r\n            \r\n            const unicodeTransforms = {\r\n                addTatweel: (text) => text.split('').join('\\u0640'),\r\n                addHeavyDiacritics: (text) => text.split('').map(char => char + ['\\u064B', '\\u064C', '\\u064D', '\\u064E', '\\u064F', '\\u0650', '\\u0651', '\\u0652'][Math.floor(Math.random() * 8)]).join(''),\r\n                addWideSpacing: (text) => text.split('').join('  '),\r\n                addSymbols: (text) => `\u2728 ${text} \u2728`,\r\n            };\r\n\r\n            const fontStylesData = [\r\n                { name: 'Naskh Classic', type: 'visual', css: { fontFamily: \"'Amiri', serif\", fontWeight: '400' } },\r\n                { name: 'Bold Naskh', type: 'visual', css: { fontFamily: \"'Amiri', serif\", fontWeight: '700' } },\r\n                { name: 'Tatweel Ornament', type: 'copyable', css: { fontFamily: \"'Amiri', serif\" }, unicodeFn: unicodeTransforms.addTatweel },\r\n                { name: 'Ruq\u02bfah (Handwritten)', type: 'visual', css: { fontFamily: \"'Lateef', cursive\", fontSize: '1.2em', letterSpacing: '-1px' } },\r\n                { name: 'Diwani (Flourish)', type: 'visual', css: { fontFamily: \"'Katibeh', cursive\", fontSize: '1.4em' } },\r\n                { name: 'Thuluth (Majestic)', type: 'visual', css: { fontFamily: \"'Lalezar', cursive', sans-serif\", fontSize: '1.3em' } },\r\n                { name: 'Kufi Geometric', type: 'visual', css: { fontFamily: \"'Reem Kufi', sans-serif\", fontWeight: '700' } },\r\n                { name: 'Vintage Typewriter', type: 'copyable', css: { fontFamily: \"'Amiri', serif\", letterSpacing: '2px', opacity: '0.8' }, unicodeFn: unicodeTransforms.addWideSpacing },\r\n                { name: 'Decorative Symbols', type: 'copyable', css: { fontFamily: \"'Cairo', sans-serif'\" }, unicodeFn: unicodeTransforms.addSymbols },\r\n                { name: 'Maghrebi Style', type: 'visual', css: { fontFamily: \"'Amiri', serif\", fontStyle: 'italic' } },\r\n                { name: 'Nastaliq (Flowing)', type: 'visual', css: { fontFamily: \"'Katibeh', cursive\", fontSize: '1.3em', transform: 'skewX(-8deg)' } },\r\n                { name: 'Heavy Diacritics', type: 'copyable', css: { fontFamily: \"'Amiri', serif\", fontWeight: '700' }, unicodeFn: unicodeTransforms.addHeavyDiacritics },\r\n                { name: 'Hand Brush (Ink)', type: 'visual', css: { fontFamily: \"'Lemonada', cursive\", fontWeight: '700' } },\r\n                { name: 'Marker (Casual)', type: 'visual', css: { fontFamily: \"'Lemonada', cursive\", fontWeight: '400' } },\r\n                { name: 'Stencil Arabic', type: 'visual', css: { fontFamily: \"'Reem Kufi', sans-serif\", fontWeight: '700', color: 'rgba(0,0,0,0.1)', textShadow: '0 0 1px var(--text-primary), 1px 1px 1px var(--text-primary)' } },\r\n                { name: 'Monoline Calligraphic', type: 'visual', css: { fontFamily: \"'Tajawal', sans-serif\", fontWeight: '400' } },\r\n                { name: 'Rounded Kufi (Soft)', type: 'visual', css: { fontFamily: \"'Reem Kufi', sans-serif', sans-serif\", fontWeight: '400' } },\r\n                { name: 'Pixel Arabic (Bitmap)', type: 'visual', css: { fontFamily: \"'Reem Kufi', sans-serif\", textShadow: '1px 1px 0px #ccc, 2px 2px 0px #ccc', letterSpacing: '2px' } },\r\n                { name: 'Rounded Modern', type: 'visual', css: { fontFamily: \"'Cairo', sans-serif\", fontWeight: '700' } },\r\n                { name: 'Engraved \/ Chiseled', type: 'visual', css: { color: '#bbb', textShadow: '1px 1px 1px #fff, -1px -1px 1px #000' } },\r\n                { name: 'Outline Arabic', type: 'visual', css: { color: 'transparent', WebkitTextStroke: '1.5px var(--text-primary)' } },\r\n                { name: 'Shadow Drop', type: 'visual', css: { textShadow: '3px 3px 2px rgba(0,0,0,0.2)' } },\r\n                { name: 'Neon Glow', type: 'visual', css: { color: '#fff', textShadow: '0 0 4px #fff, 0 0 8px #fff, 0 0 12px var(--primary-accent), 0 0 16px var(--primary-accent)' } },\r\n                { name: 'Chalkboard (Rough)', type: 'visual', css: { fontFamily: \"'Lemonada', cursive\", color: 'rgba(255,255,255,0.8)', textShadow: '1px 1px 1px rgba(0,0,0,0.3)', backgroundColor: '#5a647e', padding: '10px', borderRadius: '8px' } },\r\n                { name: 'Rustic Stamp', type: 'visual', css: { fontFamily: \"'Lalezar', cursive\", opacity: '0.8', transform: 'rotate(-2deg)' } },\r\n            ];\r\n\r\n            const shuffleArray = (array) => { for (let i = array.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; } };\r\n\r\n            const loadMoreOutputs = () => {\r\n                const fragment = document.createDocumentFragment();\r\n                const nextBatch = generatedOutputs.slice(displayedCount, displayedCount + BATCH_SIZE);\r\n\r\n                nextBatch.forEach((styleData, index) => {\r\n                    const cardIndex = displayedCount + index;\r\n                    const card = document.createElement('div');\r\n                    card.className = 'result-card';\r\n                    card.setAttribute('data-index', cardIndex);\r\n\r\n                    const preview = document.createElement('div');\r\n                    preview.className = 'font-preview';\r\n                    preview.textContent = userInput.value.trim() || '\u0641\u0646 \u0627\u0644\u062e\u0637';\r\n                    Object.assign(preview.style, styleData.css);\r\n\r\n                    card.innerHTML = `\r\n                        ${preview.outerHTML}\r\n                        <div class=\"style-name\">${styleData.name}<\/div>\r\n                        <div class=\"button-group\">\r\n                            <button class=\"copy-btn\" data-copy-type=\"text\" aria-label=\"Copy as Text\">Copy Text<\/button>\r\n                            <button class=\"copy-btn primary\" data-copy-type=\"image\" aria-label=\"Copy as Image\">Copy Image<\/button>\r\n                        <\/div>\r\n                    `;\r\n                    fragment.appendChild(card);\r\n                });\r\n\r\n                outputSection.appendChild(fragment);\r\n                displayedCount += nextBatch.length;\r\n\r\n                loadMoreBtn.classList.toggle('hidden', displayedCount >= generatedOutputs.length);\r\n            };\r\n            \r\n            const handleGenerate = () => {\r\n                outputSection.innerHTML = '';\r\n                displayedCount = 0;\r\n                generatedOutputs = [...fontStylesData, ...fontStylesData, ...fontStylesData.slice(0, 5)];\r\n                shuffleArray(generatedOutputs);\r\n                loadMoreOutputs();\r\n            };\r\n\r\n            const copyAsImage = async (button) => {\r\n                const card = button.closest('.result-card');\r\n                const previewNode = card.querySelector('.font-preview');\r\n                const originalButtonText = button.textContent;\r\n                button.textContent = 'Copying...';\r\n\r\n                try {\r\n                    const blob = await domtoimage.toBlob(previewNode, { \r\n                        quality: 1.0, \r\n                        style: { margin: 0, padding: '10px' } \r\n                    });\r\n                    await navigator.clipboard.write([\r\n                        new ClipboardItem({ 'image\/png': blob })\r\n                    ]);\r\n                    button.textContent = 'Copied!';\r\n                } catch (err) {\r\n                    console.error('Oops, something went wrong!', err);\r\n                    button.textContent = 'Error!';\r\n                } finally {\r\n                    setTimeout(() => { button.textContent = originalButtonText; }, 2000);\r\n                }\r\n            };\r\n            \r\n            const copyAsText = (button) => {\r\n                const card = button.closest('.result-card');\r\n                const cardIndex = parseInt(card.getAttribute('data-index'), 10);\r\n                const styleData = generatedOutputs[cardIndex];\r\n                const plainText = userInput.value.trim() || '\u0641\u0646 \u0627\u0644\u062e\u0637';\r\n                let textToCopy = styleData.unicodeFn ? styleData.unicodeFn(plainText) : plainText;\r\n\r\n                navigator.clipboard.writeText(textToCopy).then(() => {\r\n                    const originalButtonText = button.textContent;\r\n                    button.textContent = 'Copied!';\r\n                    setTimeout(() => { button.textContent = originalButtonText; }, 2000);\r\n                }).catch(err => console.error('Failed to copy text: ', err));\r\n            };\r\n\r\n            \/\/ --- EVENT LISTENERS ---\r\n            generateBtn.addEventListener('click', handleGenerate);\r\n            loadMoreBtn.addEventListener('click', loadMoreOutputs);\r\n\r\n            outputSection.addEventListener('click', function(e) {\r\n                if (e.target.classList.contains('copy-btn')) {\r\n                    const copyType = e.target.getAttribute('data-copy-type');\r\n                    if (copyType === 'image') {\r\n                        copyAsImage(e.target);\r\n                    } else if (copyType === 'text') {\r\n                        copyAsText(e.target);\r\n                    }\r\n                }\r\n            });\r\n\r\n            generatorTool.querySelectorAll('.faq-question').forEach(q => {\r\n                q.addEventListener('click', () => {\r\n                    const answer = q.nextElementSibling;\r\n                    const isExpanded = q.getAttribute('aria-expanded') === 'true';\r\n                    q.classList.toggle('active');\r\n                    q.setAttribute('aria-expanded', !isExpanded);\r\n                    answer.style.maxHeight = answer.style.maxHeight ? null : answer.scrollHeight + 'px';\r\n                });\r\n            });\r\n\r\n            \/\/ --- INITIALIZATION ---\r\n            handleGenerate();\r\n        });\r\n    <\/script>\r\n<\/div>\r\n\r\n<!-- Content Section Start From Here  -->\r\n\r\n<!-- \r\n  Supportive Content Sections for Arabic Font Generator\r\n  Theme: Modern, Professional, and Responsive\r\n  Integrated with Font Awesome 6.4.0\r\n-->\r\n\r\n<!-- Font Awesome CDN -->\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n<div id=\"supportive-content\">\r\n    <style>\r\n        \/* CSS Variables for Styling Consistency *\/\r\n        #supportive-content {\r\n            --primary-gradient: linear-gradient(90deg, #00c6ff 0%, #0072ff 100%);\r\n            --text-dark: #1a233a;\r\n            --text-muted: #5a647e;\r\n            --bg-light-blue: #f0f7ff;\r\n            --bg-white: #ffffff;\r\n            --transition-smooth: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n            font-family: 'Cairo', sans-serif;\r\n            line-height: 1.6;\r\n            color: var(--text-dark);\r\n        }\r\n\r\n        #supportive-content .section-wrapper {\r\n            width: 100%;\r\n            padding: clamp(3rem, 8vw, 5rem) 1rem;\r\n            display: flex;\r\n            justify-content: center;\r\n        }\r\n\r\n        #supportive-content .inner-container {\r\n            max-width: 1200px;\r\n            width: 100%;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        \/* Typography *\/\r\n        #supportive-content .section-header {\r\n            text-align: center;\r\n            margin-bottom: clamp(2.5rem, 6vw, 4rem);\r\n        }\r\n\r\n        #supportive-content .section-header h2 {\r\n            font-size: clamp(1.8rem, 4vw, 2.8rem);\r\n            font-weight: 800;\r\n            margin-bottom: 1rem;\r\n            background: var(--primary-gradient);\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n            display: inline-block;\r\n        }\r\n\r\n        #supportive-content .section-header p {\r\n            font-size: clamp(0.95rem, 2vw, 1.15rem);\r\n            color: var(--text-muted);\r\n            max-width: 800px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        \/* Grid Layout *\/\r\n        #supportive-content .card-grid {\r\n            display: grid;\r\n            gap: 24px;\r\n            grid-template-columns: repeat(4, 1fr);\r\n        }\r\n\r\n        @media (max-width: 1024px) {\r\n            #supportive-content .card-grid { grid-template-columns: repeat(2, 1fr); }\r\n        }\r\n\r\n        @media (max-width: 600px) {\r\n            #supportive-content .card-grid { grid-template-columns: 1fr; }\r\n        }\r\n\r\n        \/* Common Card Styles *\/\r\n        #supportive-content .info-card {\r\n            padding: 2rem;\r\n            border-radius: 12px;\r\n            text-align: center;\r\n            transition: var(--transition-smooth);\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n\r\n        #supportive-content .info-card i {\r\n            font-size: 2.5rem;\r\n            margin-bottom: 1.5rem;\r\n            background: var(--primary-gradient);\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n            transition: var(--transition-smooth);\r\n        }\r\n\r\n        #supportive-content .info-card h3 {\r\n            font-size: 1.25rem;\r\n            margin-bottom: 0.75rem;\r\n            font-weight: 700;\r\n        }\r\n\r\n        #supportive-content .info-card p {\r\n            font-size: 0.95rem;\r\n            color: var(--text-muted);\r\n        }\r\n\r\n        \/* SECTION 1: WHAT (Lift with Shadow Depth + Rotate Icon) *\/\r\n        #sec-what { background-color: var(--bg-white); }\r\n        #sec-what .info-card { background-color: var(--bg-light-blue); border: 1px solid #e1eefc; }\r\n        \r\n        #sec-what .info-card:hover {\r\n            transform: translateY(-12px);\r\n            box-shadow: 0 20px 40px rgba(0, 114, 255, 0.15);\r\n        }\r\n        #sec-what .info-card:hover i {\r\n            transform: rotate(360deg);\r\n        }\r\n\r\n        \/* SECTION 2: WHY (Inner Shadow Press + 3D Tilt Pivot) *\/\r\n        #sec-why { background-color: var(--bg-light-blue); }\r\n        #sec-why .info-card { \r\n            background-color: var(--bg-white); \r\n            box-shadow: 0 4px 10px rgba(0,0,0,0.03);\r\n            perspective: 1000px;\r\n        }\r\n        \r\n        #sec-why .info-card:hover {\r\n            transform: rotateX(5deg) rotateY(5deg);\r\n            box-shadow: inset 0 4px 12px rgba(0, 114, 255, 0.08);\r\n        }\r\n        #sec-why .info-card:hover i {\r\n            transform: translateZ(20px);\r\n        }\r\n\r\n        \/* SECTION 3: HOW (Animated Border Trace + Elastic Bounce) *\/\r\n        #sec-how { background-color: var(--bg-white); }\r\n        #sec-how .info-card { \r\n            background-color: var(--bg-light-blue);\r\n            border: 2px solid transparent;\r\n        }\r\n        \r\n        #sec-how .info-card:hover {\r\n            border-color: #00c6ff;\r\n            transform: scale(1.05);\r\n            transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);\r\n        }\r\n        #sec-how .info-card:hover i {\r\n            animation: bounce 0.6s infinite alternate;\r\n        }\r\n\r\n        @keyframes bounce {\r\n            from { transform: translateY(0); }\r\n            to { transform: translateY(-10px); }\r\n        }\r\n    <\/style>\r\n\r\n    <!-- SECTION 1: What is the Arabic Font Generator? -->\r\n<section id=\"sec-what\" class=\"section-wrapper\">\r\n  <div class=\"inner-container\">\r\n    \r\n\t\t<\/div>\r\n\t<\/section>\r\n    <section id=\"sec-what\" class=\"section-wrapper\">\r\n        <div class=\"inner-container\">\r\n            <header class=\"section-header\">\r\n                <h2>What is the Arabic Font Generator?<\/h2>\r\n                <p>Discover the features that make our calligraphy tool the most advanced solution for digital Arabic typography and creative design.<\/p>\r\n            <\/header>\r\n            <div class=\"card-grid\">\r\n                <div class=\"info-card\">\r\n                    <i class=\"fas fa-magic\"><\/i>\r\n                    <h3>Instant Transformation<\/h3>\r\n                    <p>Convert plain Arabic text into beautiful calligraphic styles in real-time with one click.<\/p>\r\n                <\/div>\r\n                <div class=\"info-card\">\r\n                    <i class=\"fas fa-keyboard\"><\/i>\r\n                    <h3>Unicode Support<\/h3>\r\n                    <p>Our tool generates standard Unicode characters that work perfectly across all modern devices.<\/p>\r\n                <\/div>\r\n                <div class=\"info-card\">\r\n                    <i class=\"fas fa-layer-group\"><\/i>\r\n                    <h3>Multi-Style Library<\/h3>\r\n                    <p>Access over 50 unique variations including Kufi, Naskh, Diwani, and modern artistic fonts.<\/p>\r\n                <\/div>\r\n                <div class=\"info-card\">\r\n                    <i class=\"fas fa-mobile-alt\"><\/i>\r\n                    <h3>Responsive Design<\/h3>\r\n                    <p>Optimized for mobile, tablet, and desktop for a seamless experience on any screen size.<\/p>\r\n                <\/div>\r\n                <div class=\"info-card\">\r\n                    <i class=\"fas fa-image\"><\/i>\r\n                    <h3>Copy as Image<\/h3>\r\n                    <p>Directly copy your styled text as a high-quality PNG image for apps that don't support custom fonts.<\/p>\r\n                <\/div>\r\n                <div class=\"info-card\">\r\n                    <i class=\"fas fa-infinity\"><\/i>\r\n                    <h3>Unlimited Usage<\/h3>\r\n                    <p>Generate as many styles as you need without any restrictions or hidden subscription costs.<\/p>\r\n                <\/div>\r\n                <div class=\"info-card\">\r\n                    <i class=\"fas fa-language\"><\/i>\r\n                    <h3>RTL Optimized<\/h3>\r\n                    <p>Built specifically for Right-to-Left languages, ensuring perfect ligatures and character connections.<\/p>\r\n                <\/div>\r\n                <div class=\"info-card\">\r\n                    <i class=\"fas fa-bolt\"><\/i>\r\n                    <h3>Lightweight Speed<\/h3>\r\n                    <p>Lightning-fast generation using browser-based processing for zero delay.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 2: Why Choose Our Calligraphy Tool? -->\r\n    <section id=\"sec-why\" class=\"section-wrapper\">\r\n        <div class=\"inner-container\">\r\n            <header class=\"section-header\">\r\n                <h2>Why Use Arabic Calligraphy in Your Designs?<\/h2>\r\n                <p>Arabic script is an art form itself. Learn why incorporating stylish typography can elevate your professional and personal branding.<\/p>\r\n            <\/header>\r\n            <div class=\"card-grid\">\r\n                <div class=\"info-card\">\r\n                    <i class=\"fas fa-award\"><\/i>\r\n                    <h3>Premium Branding<\/h3>\r\n                    <p>Stand out from the crowd with professional Arabic logos and social media headers.<\/p>\r\n                <\/div>\r\n                <div class=\"info-card\">\r\n                    <i class=\"fas fa-heart\"><\/i>\r\n                    <h3>Cultural Connection<\/h3>\r\n                    <p>Build deeper resonance with Arabic-speaking audiences using authentic script styles.<\/p>\r\n                <\/div>\r\n                <div class=\"info-card\">\r\n                    <i class=\"fas fa-chart-line\"><\/i>\r\n                    <h3>Higher Engagement<\/h3>\r\n                    <p>Eye-catching typography is proven to increase click-through rates on social media posts.<\/p>\r\n                <\/div>\r\n                <div class=\"info-card\">\r\n                    <i class=\"fas fa-clock\"><\/i>\r\n                    <h3>Save Design Time<\/h3>\r\n                    <p>Skip complex design software; generate pro-level calligraphy in seconds instead of hours.<\/p>\r\n                <\/div>\r\n                <div class=\"info-card\">\r\n                    <i class=\"fas fa-share-alt\"><\/i>\r\n                    <h3>Social Media Ready<\/h3>\r\n                    <p>Perfect for Instagram bios, TikTok captions, and WhatsApp statuses with copy-paste ease.<\/p>\r\n                <\/div>\r\n                <div class=\"info-card\">\r\n                    <i class=\"fas fa-pen-fancy\"><\/i>\r\n                    <h3>Creative Freedom<\/h3>\r\n                    <p>Experiment with different tones from \"Strict & Bold\" to \"Flowing & Fancy\" effortlessly.<\/p>\r\n                <\/div>\r\n                <div class=\"info-card\">\r\n                    <i class=\"fas fa-universal-access\"><\/i>\r\n                    <h3>Platform Versatility<\/h3>\r\n                    <p>Styles are compatible with Facebook, Twitter, Discord, and all major CMS platforms.<\/p>\r\n                <\/div>\r\n                <div class=\"info-card\">\r\n                    <i class=\"fas fa-check-circle\"><\/i>\r\n                    <h3>Verified Output<\/h3>\r\n                    <p>Our generator ensures that text remains readable while maintaining artistic integrity.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 3: How to Master Arabic Typography? -->\r\n    <section id=\"sec-how\" class=\"section-wrapper\">\r\n        <div class=\"inner-container\">\r\n            <header class=\"section-header\">\r\n                <h2>How to Get the Best Typography Results?<\/h2>\r\n                <p>Maximize the impact of your text by following these expert tips for using our Arabic font generator effectively.<\/p>\r\n            <\/header>\r\n            <div class=\"card-grid\">\r\n                <div class=\"info-card\">\r\n                    <i class=\"fas fa-lightbulb\"><\/i>\r\n                    <h3>Choose Short Phrases<\/h3>\r\n                    <p>Calligraphy looks best with 2-4 words. Keep your input concise for maximum visual impact.<\/p>\r\n                <\/div>\r\n                <div class=\"info-card\">\r\n                    <i class=\"fas fa-palette\"><\/i>\r\n                    <h3>Match the Tone<\/h3>\r\n                    <p>Use \"Kufi\" for architectural\/modern feels and \"Diwani\" for festive or poetic messages.<\/p>\r\n                <\/div>\r\n                <div class=\"info-card\">\r\n                    <i class=\"fas fa-adjust\"><\/i>\r\n                    <h3>Contrast Matters<\/h3>\r\n                    <p>When copying as an image, ensure you place it on a background that highlights the strokes.<\/p>\r\n                <\/div>\r\n                <div class=\"info-card\">\r\n                    <i class=\"fas fa-compress-arrows-alt\"><\/i>\r\n                    <h3>Adjust Spacing<\/h3>\r\n                    <p>Use the \"Tatweel\" or \"Wide\" styles to fill horizontal spaces in headers and banners.<\/p>\r\n                <\/div>\r\n                <div class=\"info-card\">\r\n                    <i class=\"fas fa-star\"><\/i>\r\n                    <h3>Add Decorations<\/h3>\r\n                    <p>Combine generated text with our symbolic styles to create unique decorative frames.<\/p>\r\n                <\/div>\r\n                <div class=\"info-card\">\r\n                    <i class=\"fas fa-copy\"><\/i>\r\n                    <h3>Image vs Text<\/h3>\r\n                    <p>Use \"Copy Text\" for SEO-friendly content and \"Copy Image\" for stylized graphical banners.<\/p>\r\n                <\/div>\r\n                <div class=\"info-card\">\r\n                    <i class=\"fas fa-laptop-code\"><\/i>\r\n                    <h3>Web Integration<\/h3>\r\n                    <p>Our fonts are safe for use in WordPress, Shopify, and custom HTML websites.<\/p>\r\n                <\/div>\r\n                <div class=\"info-card\">\r\n                    <i class=\"fas fa-users\"><\/i>\r\n                    <h3>Community Choice<\/h3>\r\n                    <p>Join thousands of designers who use our tool for daily content creation and inspiration.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n<\/div>\r\n\r\n\r\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":5,"featured_media":0,"parent":7231,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-7081","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/raistheme.com\/wp-json\/wp\/v2\/pages\/7081","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/raistheme.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/raistheme.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/raistheme.com\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/raistheme.com\/wp-json\/wp\/v2\/comments?post=7081"}],"version-history":[{"count":5,"href":"https:\/\/raistheme.com\/wp-json\/wp\/v2\/pages\/7081\/revisions"}],"predecessor-version":[{"id":7223,"href":"https:\/\/raistheme.com\/wp-json\/wp\/v2\/pages\/7081\/revisions\/7223"}],"up":[{"embeddable":true,"href":"https:\/\/raistheme.com\/wp-json\/wp\/v2\/pages\/7231"}],"wp:attachment":[{"href":"https:\/\/raistheme.com\/wp-json\/wp\/v2\/media?parent=7081"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}