{"id":8310449,"date":"2025-09-09T09:02:50","date_gmt":"2025-09-09T06:02:50","guid":{"rendered":"https:\/\/elementor.com\/tools\/?p=8310449"},"modified":"2025-09-09T09:06:57","modified_gmt":"2025-09-09T06:06:57","slug":"font-pairing-tool","status":"publish","type":"post","link":"https:\/\/elementor.com\/tools\/font-pairing-tool\/","title":{"rendered":"Font Pairing Tool"},"content":{"rendered":"\t\t<div data-elementor-type=\"container\" data-elementor-id=\"8310448\" class=\"elementor elementor-8310448\" data-elementor-post-type=\"elementor_library\">\n\t\t\t\t<div class=\"elementor-element elementor-element-23691a2c e-flex e-con-boxed e-con e-parent\" data-id=\"23691a2c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-37c3711c elementor-widget elementor-widget-html\" data-id=\"37c3711c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n    \/* Google Fonts Import *\/\r\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Arvo:wght@400;700&family=DM+Sans:opsz,wght@9..40,400;500;700&family=Lato:wght@400;700&family=Lora:wght@400;700&family=Merriweather:wght@400;700&family=Montserrat:wght@400;700&family=Open+Sans:wght@400;700&family=Playfair+Display:wght@400;700&family=Poppins:wght@400;500;700&family=Roboto+Slab:wght@400;700&family=Roboto:wght@400;500;700&family=Source+Sans+3:wght@400;700&display=swap');\r\n\r\n    .font-pairing-app {\r\n        width: 100%;\r\n        max-width: 1280px;\r\n        margin: 0 auto;\r\n        padding: 60px 0 0;\r\n        background: transparent;\r\n        font-family: 'DM Sans', sans-serif;\r\n    }\r\n\r\n    .main-content {\r\n        display: flex;\r\n        gap: 2vw;\r\n        position: relative;\r\n        align-items: flex-start;\r\n        justify-content: center;\r\n    }\r\n\r\n    \/* === Sections === *\/\r\n    .controls-section {\r\n        flex: 1;\r\n        min-width: 280px;\r\n        max-width: 320px;\r\n        background: white;\r\n        border-radius: 8px;\r\n        overflow: hidden;\r\n        border: 1.5px solid #EBEBEB;\r\n    }\r\n\r\n    .preview-section {\r\n        flex: 3;\r\n        min-width: 0;\r\n        background: white;\r\n        border-radius: 8px;\r\n        overflow: hidden;\r\n        border: 1.5px solid #EBEBEB;\r\n    }\r\n\r\n    .section-header {\r\n        background-color: #05047E;\r\n        color: white;\r\n        padding: 12px 20px;\r\n        font-weight: 500;\r\n        font-size: 1.125rem;\r\n    }\r\n    \r\n    .controls-body, .preview-body {\r\n        padding: 25px;\r\n    }\r\n\r\n    .preview-body {\r\n        min-height: 400px;\r\n    }\r\n\r\n    \/* === Controls Styling === *\/\r\n    .control-group {\r\n        margin-bottom: 24px;\r\n    }\r\n\r\n    .control-group label {\r\n        display: block;\r\n        font-weight: 500;\r\n        font-size: 1rem;\r\n        margin-bottom: 10px;\r\n        color: #333;\r\n    }\r\n\r\n    .control-group select {\r\n        width: 100%;\r\n        padding: 10px;\r\n        border: 1px solid #ddd;\r\n        border-radius: 4px;\r\n        background-color: #f9f9f9;\r\n        font-family: 'DM Sans', sans-serif;\r\n        font-size: 0.95rem;\r\n        cursor: pointer;\r\n    }\r\n    \r\n    .control-group .slider-container {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 15px;\r\n    }\r\n\r\n    .control-group input[type=\"range\"] {\r\n        -webkit-appearance: none;\r\n        width: 100%;\r\n        height: 8px;\r\n        background: #EBEBEB;\r\n        border-radius: 5px;\r\n        outline: none;\r\n        opacity: 0.9;\r\n        transition: opacity .2s;\r\n        cursor: pointer;\r\n    }\r\n    \r\n    .control-group input[type=\"range\"]::-webkit-slider-thumb {\r\n      -webkit-appearance: none;\r\n      appearance: none;\r\n      width: 18px;\r\n      height: 18px;\r\n      background: #05047E;\r\n      border-radius: 50%;\r\n      cursor: pointer;\r\n    }\r\n\r\n    .control-group input[type=\"range\"]::-moz-range-thumb {\r\n      width: 18px;\r\n      height: 18px;\r\n      background: #05047E;\r\n      border-radius: 50%;\r\n      cursor: pointer;\r\n    }\r\n    \r\n    .control-group .slider-value {\r\n        font-weight: 500;\r\n        min-width: 45px;\r\n        text-align: right;\r\n    }\r\n\r\n    \/* === Preview Text === *\/\r\n    #previewHeading {\r\n        margin-top: 0;\r\n        margin-bottom: 0.5em;\r\n        line-height: 1.2;\r\n        color: #111;\r\n        transition: all 0.2s ease-in-out;\r\n    }\r\n\r\n    #previewBody {\r\n        margin-top: 0;\r\n        color: #444;\r\n        transition: all 0.2s ease-in-out;\r\n    }\r\n\r\n    \/* === Buttons === *\/\r\n    .format-btn-container {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 12px;\r\n        margin-top: 20px;\r\n    }\r\n\r\n    .format-btn {\r\n        background-color: #000;\r\n        color: white;\r\n        border: none;\r\n        padding: 12px 20px;\r\n        cursor: pointer;\r\n        font-size: 1.1rem;\r\n        font-weight: 500;\r\n        transition: all 0.2s;\r\n        width: 100%;\r\n        text-align: center;\r\n        border-radius: 4px;\r\n    }\r\n\r\n    .format-btn:is(:hover, :focus, :focus-visible, :active) {\r\n        background-color: #545454;\r\n    }\r\n\r\n    .copy-btn {\r\n        background-color: rgb(255, 255, 255);\r\n        color: black;\r\n        border: 1px solid #ddd;\r\n        padding: 10px 16px;\r\n        border-radius: 4px;\r\n        cursor: pointer;\r\n        font-size: 1rem;\r\n        font-weight: 500;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        gap: 8px;\r\n        transition: background-color 0.2s;\r\n        width: 100%;\r\n    }\r\n\r\n    .copy-btn:is(:hover, :focus, :focus-visible) {\r\n        background-color: #f6f6f6 !important;\r\n        color: black;\r\n    }\r\n    \r\n    .copy-btn .icon {\r\n        width: 16px;\r\n        height: 16px;\r\n    }\r\n\r\n    \/* === Success Message (from your original code) === *\/\r\n    .success-message {\r\n        position: fixed;\r\n        top: 20px;\r\n        right: 20px;\r\n        background-color: #28a745;\r\n        color: white;\r\n        padding: 12px 20px;\r\n        border-radius: 4px;\r\n        font-size: 14px;\r\n        opacity: 0;\r\n        transform: translateY(-20px) translateX(0);\r\n        transition: all 0.3s ease;\r\n        z-index: 1000;\r\n        pointer-events: none;\r\n    }\r\n\r\n    .success-message.show {\r\n        opacity: 1;\r\n        transform: translateY(0) translateX(0);\r\n    }\r\n\r\n    \/* === Responsive Design === *\/\r\n    @media (max-width: 1024px) {\r\n        .main-content {\r\n            flex-direction: column;\r\n            gap: 25px;\r\n        }\r\n\r\n        .controls-section, .preview-section {\r\n            width: 100%;\r\n            max-width: 800px;\r\n            margin: 0 auto;\r\n        }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"font-pairing-app\">\r\n    <div class=\"main-content\">\r\n        <!-- CONTROLS SECTION -->\r\n        <div class=\"controls-section\">\r\n            <div class=\"section-header\">Controls<\/div>\r\n            <div class=\"controls-body\">\r\n                <!-- Heading Controls -->\r\n                <div class=\"control-group\">\r\n                    <label for=\"headingFontSelect\">Heading Font<\/label>\r\n                    <select id=\"headingFontSelect\"><\/select>\r\n                <\/div>\r\n                <div class=\"control-group\">\r\n                    <label for=\"headingSizeSlider\">Font Size<\/label>\r\n                    <div class=\"slider-container\">\r\n                        <input type=\"range\" id=\"headingSizeSlider\" min=\"24\" max=\"80\" value=\"48\">\r\n                        <span id=\"headingSizeValue\" class=\"slider-value\">48px<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Body Controls -->\r\n                <div class=\"control-group\">\r\n                    <label for=\"bodyFontSelect\">Body Font<\/label>\r\n                    <select id=\"bodyFontSelect\"><\/select>\r\n                <\/div>\r\n                <div class=\"control-group\">\r\n                    <label for=\"bodySizeSlider\">Font Size<\/label>\r\n                    <div class=\"slider-container\">\r\n                        <input type=\"range\" id=\"bodySizeSlider\" min=\"14\" max=\"24\" value=\"18\">\r\n                        <span id=\"bodySizeValue\" class=\"slider-value\">18px<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n                 <div class=\"control-group\">\r\n                    <label for=\"bodyLineHeightSlider\">Line Height<\/label>\r\n                    <div class=\"slider-container\">\r\n                        <input type=\"range\" id=\"bodyLineHeightSlider\" min=\"1.2\" max=\"2.0\" value=\"1.6\" step=\"0.1\">\r\n                        <span id=\"bodyLineHeightValue\" class=\"slider-value\">1.6<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Action Buttons -->\r\n                <div class=\"format-btn-container\">\r\n                    <button id=\"randomizeBtn\" class=\"format-btn\">Randomize Pairing<\/button>\r\n                    <button id=\"copyCssBtn\" class=\"copy-btn\">\r\n                        <svg class=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-5zm0 16H8V7h11v14z\"><\/path><\/svg>\r\n                        <span>Copy CSS<\/span>\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- PREVIEW SECTION -->\r\n        <div class=\"preview-section\">\r\n            <div class=\"section-header\">Preview<\/div>\r\n            <div class=\"preview-body\">\r\n                <h1 id=\"previewHeading\">The Quick Brown Fox Jumps Over the Lazy Dog<\/h1>\r\n                <p id=\"previewBody\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.<\/p>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n    <div id=\"successMessage\" class=\"success-message\">CSS copied to clipboard!<\/div>\r\n<\/div>\r\n\r\n<script>\r\n    document.addEventListener('DOMContentLoaded', () => {\r\n        \/\/ --- DATA ---\r\n        const fonts = [\r\n            { name: 'Playfair Display', category: 'serif' }, { name: 'Merriweather', category: 'serif' },\r\n            { name: 'Lora', category: 'serif' }, { name: 'Arvo', category: 'serif' }, \r\n            { name: 'Roboto Slab', category: 'serif' }, { name: 'Roboto', category: 'sans-serif' }, \r\n            { name: 'Open Sans', category: 'sans-serif' }, { name: 'Lato', category: 'sans-serif' }, \r\n            { name: 'Montserrat', category: 'sans-serif' }, { name: 'Source Sans 3', category: 'sans-serif' },\r\n            { name: 'Poppins', category: 'sans-serif' }, { name: 'DM Sans', category: 'sans-serif' }\r\n        ];\r\n\r\n        const curatedPairs = [\r\n            { heading: 'Playfair Display', body: 'Roboto' },\r\n            { heading: 'Merriweather', body: 'Open Sans' },\r\n            { heading: 'Montserrat', body: 'Lora' },\r\n            { heading: 'Poppins', body: 'Lato' },\r\n            { heading: 'Arvo', body: 'Source Sans 3' },\r\n            { heading: 'Roboto Slab', body: 'Roboto' },\r\n            { heading: 'DM Sans', body: 'Merriweather' },\r\n        ];\r\n        \r\n        const loadedFonts = new Set();\r\n\r\n        \/\/ --- DOM ELEMENTS ---\r\n        const headingFontSelect = document.getElementById('headingFontSelect');\r\n        const headingSizeSlider = document.getElementById('headingSizeSlider');\r\n        const headingSizeValue = document.getElementById('headingSizeValue');\r\n        const bodyFontSelect = document.getElementById('bodyFontSelect');\r\n        const bodySizeSlider = document.getElementById('bodySizeSlider');\r\n        const bodySizeValue = document.getElementById('bodySizeValue');\r\n        const bodyLineHeightSlider = document.getElementById('bodyLineHeightSlider');\r\n        const bodyLineHeightValue = document.getElementById('bodyLineHeightValue');\r\n        \r\n        const previewHeading = document.getElementById('previewHeading');\r\n        const previewBody = document.getElementById('previewBody');\r\n        \r\n        const randomizeBtn = document.getElementById('randomizeBtn');\r\n        const copyCssBtn = document.getElementById('copyCssBtn');\r\n        const successMessage = document.getElementById('successMessage');\r\n\r\n        \/\/ --- FUNCTIONS ---\r\n\r\n        \/**\r\n         * Dynamically loads a Google Font by adding a <link> tag to the document's <head>.\r\n         * Avoids loading the same font multiple times.\r\n         * @param {string} fontName - The name of the font to load.\r\n         *\/\r\n        function loadGoogleFont(fontName) {\r\n            if (!fontName || loadedFonts.has(fontName)) {\r\n                return;\r\n            }\r\n            \/\/ Note: This simplified version just ensures the main @import has the font.\r\n            \/\/ A more robust version might add individual links, but the initial @import is sufficient here.\r\n            loadedFonts.add(fontName);\r\n        }\r\n\r\n        \/**\r\n         * Populates a <select> element with font options.\r\n         * @param {HTMLSelectElement} selectElement - The dropdown to populate.\r\n         *\/\r\n        function populateSelect(selectElement) {\r\n            fonts.forEach(font => {\r\n                const option = document.createElement('option');\r\n                option.value = font.name;\r\n                option.textContent = `${font.name} (${font.category})`;\r\n                selectElement.appendChild(option);\r\n            });\r\n        }\r\n        \r\n        \/**\r\n         * Updates the preview text based on the current control values.\r\n         *\/\r\n        function updatePreview() {\r\n            const headingFont = headingFontSelect.value;\r\n            const headingSize = headingSizeSlider.value;\r\n            const bodyFont = bodyFontSelect.value;\r\n            const bodySize = bodySizeSlider.value;\r\n            const bodyLineHeight = bodyLineHeightSlider.value;\r\n\r\n            \/\/ Load fonts if they are not already available\r\n            loadGoogleFont(headingFont);\r\n            loadGoogleFont(bodyFont);\r\n\r\n            \/\/ Update heading styles\r\n            previewHeading.style.fontFamily = `'${headingFont}', serif`;\r\n            previewHeading.style.fontSize = `${headingSize}px`;\r\n            headingSizeValue.textContent = `${headingSize}px`;\r\n\r\n            \/\/ Update body styles\r\n            previewBody.style.fontFamily = `'${bodyFont}', sans-serif`;\r\n            previewBody.style.fontSize = `${bodySize}px`;\r\n            bodySizeValue.textContent = `${bodySize}px`;\r\n            previewBody.style.lineHeight = bodyLineHeight;\r\n            bodyLineHeightValue.textContent = bodyLineHeight;\r\n        }\r\n\r\n        \/**\r\n         * Selects a random curated pair and updates the controls and preview.\r\n         *\/\r\n        function randomizePairing() {\r\n            const randomIndex = Math.floor(Math.random() * curatedPairs.length);\r\n            const randomPair = curatedPairs[randomIndex];\r\n\r\n            headingFontSelect.value = randomPair.heading;\r\n            bodyFontSelect.value = randomPair.body;\r\n            \r\n            updatePreview();\r\n        }\r\n\r\n        \/**\r\n         * Copies the generated CSS rules to the user's clipboard.\r\n         *\/\r\n        function copyCssToClipboard() {\r\n            const headingFont = headingFontSelect.value;\r\n            const headingSize = headingSizeSlider.value;\r\n            const bodyFont = bodyFontSelect.value;\r\n            const bodySize = bodySizeSlider.value;\r\n            const bodyLineHeight = bodyLineHeightSlider.value;\r\n            \r\n            const cssString = `\r\n\/* Font Pairing by YourToolName *\/\r\nh1, h2, h3 {\r\n  font-family: '${headingFont}', serif;\r\n  font-size: ${headingSize}px; \/* Example for h1 *\/\r\n}\r\n\r\np, body {\r\n  font-family: '${bodyFont}', sans-serif;\r\n  font-size: ${bodySize}px;\r\n  line-height: ${bodyLineHeight};\r\n}\r\n            `.trim();\r\n\r\n            navigator.clipboard.writeText(cssString).then(() => {\r\n                successMessage.classList.add('show');\r\n                setTimeout(() => {\r\n                    successMessage.classList.remove('show');\r\n                }, 2500);\r\n            }).catch(err => {\r\n                console.error('Failed to copy CSS: ', err);\r\n            });\r\n        }\r\n\r\n        \/\/ --- INITIALIZATION ---\r\n\r\n        \/\/ Populate the dropdowns\r\n        populateSelect(headingFontSelect);\r\n        populateSelect(bodyFontSelect);\r\n\r\n        \/\/ Set up event listeners\r\n        const controls = [\r\n            headingFontSelect, headingSizeSlider, \r\n            bodyFontSelect, bodySizeSlider, bodyLineHeightSlider\r\n        ];\r\n        controls.forEach(control => {\r\n            control.addEventListener('input', updatePreview);\r\n            control.addEventListener('change', updatePreview); \/\/ For select elements\r\n        });\r\n        \r\n        randomizeBtn.addEventListener('click', randomizePairing);\r\n        copyCssBtn.addEventListener('click', copyCssToClipboard);\r\n\r\n        \/\/ Set an initial random pairing on page load\r\n        randomizePairing();\r\n    });\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":5,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[22],"tags":[21],"class_list":["post-8310449","post","type-post","status-publish","format-standard","hentry","category-tools","tag-html-css-tools"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Font Pairing Tool<\/title>\n<meta name=\"description\" content=\"Find the perfect font combinations for your Elementor website with our intuitive Font Pairing Tool. Enhance readability, brand personality, and user experience with expert font suggestions.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/tools\/font-pairing-tool\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Font Pairing Tool\" \/>\n<meta property=\"og:description\" content=\"Find the perfect font combinations for your Elementor website with our intuitive Font Pairing Tool. Enhance readability, brand personality, and user experience with expert font suggestions.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/tools\/font-pairing-tool\/\" \/>\n<meta property=\"og:site_name\" content=\"Tools\" \/>\n<meta property=\"article:published_time\" content=\"2025-09-09T06:02:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-09T06:06:57+00:00\" \/>\n<meta name=\"author\" content=\"liz@148.red\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"liz@148.red\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/tools\/font-pairing-tool\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/tools\/font-pairing-tool\/\"},\"author\":{\"name\":\"liz@148.red\",\"@id\":\"https:\/\/elementor.com\/tools\/#\/schema\/person\/80e8375cb95e6030bc2f897c41c985ac\"},\"headline\":\"Font Pairing Tool\",\"datePublished\":\"2025-09-09T06:02:50+00:00\",\"dateModified\":\"2025-09-09T06:06:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/tools\/font-pairing-tool\/\"},\"wordCount\":5,\"keywords\":[\"Html-Css-tools\"],\"articleSection\":[\"tools\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/tools\/font-pairing-tool\/\",\"url\":\"https:\/\/elementor.com\/tools\/font-pairing-tool\/\",\"name\":\"Font Pairing Tool\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/tools\/#website\"},\"datePublished\":\"2025-09-09T06:02:50+00:00\",\"dateModified\":\"2025-09-09T06:06:57+00:00\",\"author\":{\"@id\":\"https:\/\/elementor.com\/tools\/#\/schema\/person\/80e8375cb95e6030bc2f897c41c985ac\"},\"description\":\"Find the perfect font combinations for your Elementor website with our intuitive Font Pairing Tool. Enhance readability, brand personality, and user experience with expert font suggestions.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/tools\/font-pairing-tool\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/tools\/font-pairing-tool\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/tools\/font-pairing-tool\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/elementor.com\/tools\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Font Pairing Tool\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/tools\/#website\",\"url\":\"https:\/\/elementor.com\/tools\/\",\"name\":\"Tools\",\"description\":\"Just another Elementor hosted website ;)\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/tools\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/tools\/#\/schema\/person\/80e8375cb95e6030bc2f897c41c985ac\",\"name\":\"liz@148.red\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/63b900d3310bd1ed40162fb27f016e9920ae66fa5be07be5153344329ef7d9d2?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/63b900d3310bd1ed40162fb27f016e9920ae66fa5be07be5153344329ef7d9d2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/63b900d3310bd1ed40162fb27f016e9920ae66fa5be07be5153344329ef7d9d2?s=96&d=mm&r=g\",\"caption\":\"liz@148.red\"},\"url\":\"https:\/\/elementor.com\/tools\/author\/liz148-red\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Font Pairing Tool","description":"Find the perfect font combinations for your Elementor website with our intuitive Font Pairing Tool. Enhance readability, brand personality, and user experience with expert font suggestions.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/tools\/font-pairing-tool\/","og_locale":"en_US","og_type":"article","og_title":"Font Pairing Tool","og_description":"Find the perfect font combinations for your Elementor website with our intuitive Font Pairing Tool. Enhance readability, brand personality, and user experience with expert font suggestions.","og_url":"https:\/\/elementor.com\/tools\/font-pairing-tool\/","og_site_name":"Tools","article_published_time":"2025-09-09T06:02:50+00:00","article_modified_time":"2025-09-09T06:06:57+00:00","author":"liz@148.red","twitter_card":"summary_large_image","twitter_misc":{"Written by":"liz@148.red","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/tools\/font-pairing-tool\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/tools\/font-pairing-tool\/"},"author":{"name":"liz@148.red","@id":"https:\/\/elementor.com\/tools\/#\/schema\/person\/80e8375cb95e6030bc2f897c41c985ac"},"headline":"Font Pairing Tool","datePublished":"2025-09-09T06:02:50+00:00","dateModified":"2025-09-09T06:06:57+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/tools\/font-pairing-tool\/"},"wordCount":5,"keywords":["Html-Css-tools"],"articleSection":["tools"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/tools\/font-pairing-tool\/","url":"https:\/\/elementor.com\/tools\/font-pairing-tool\/","name":"Font Pairing Tool","isPartOf":{"@id":"https:\/\/elementor.com\/tools\/#website"},"datePublished":"2025-09-09T06:02:50+00:00","dateModified":"2025-09-09T06:06:57+00:00","author":{"@id":"https:\/\/elementor.com\/tools\/#\/schema\/person\/80e8375cb95e6030bc2f897c41c985ac"},"description":"Find the perfect font combinations for your Elementor website with our intuitive Font Pairing Tool. Enhance readability, brand personality, and user experience with expert font suggestions.","breadcrumb":{"@id":"https:\/\/elementor.com\/tools\/font-pairing-tool\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/tools\/font-pairing-tool\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/tools\/font-pairing-tool\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/elementor.com\/tools\/"},{"@type":"ListItem","position":2,"name":"Font Pairing Tool"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/tools\/#website","url":"https:\/\/elementor.com\/tools\/","name":"Tools","description":"Just another Elementor hosted website ;)","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/tools\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/elementor.com\/tools\/#\/schema\/person\/80e8375cb95e6030bc2f897c41c985ac","name":"liz@148.red","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/63b900d3310bd1ed40162fb27f016e9920ae66fa5be07be5153344329ef7d9d2?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/63b900d3310bd1ed40162fb27f016e9920ae66fa5be07be5153344329ef7d9d2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/63b900d3310bd1ed40162fb27f016e9920ae66fa5be07be5153344329ef7d9d2?s=96&d=mm&r=g","caption":"liz@148.red"},"url":"https:\/\/elementor.com\/tools\/author\/liz148-red\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/tools\/wp-json\/wp\/v2\/posts\/8310449","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/tools\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/tools\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/tools\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/tools\/wp-json\/wp\/v2\/comments?post=8310449"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/tools\/wp-json\/wp\/v2\/posts\/8310449\/revisions"}],"predecessor-version":[{"id":8310452,"href":"https:\/\/elementor.com\/tools\/wp-json\/wp\/v2\/posts\/8310449\/revisions\/8310452"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/tools\/wp-json\/wp\/v2\/media?parent=8310449"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/tools\/wp-json\/wp\/v2\/categories?post=8310449"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/tools\/wp-json\/wp\/v2\/tags?post=8310449"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}