{"id":4460,"date":"2025-05-24T13:02:57","date_gmt":"2025-05-24T13:02:57","guid":{"rendered":"https:\/\/ingenio.vip\/?post_type=tools-pages&#038;p=4460"},"modified":"2025-05-24T13:03:35","modified_gmt":"2025-05-24T13:03:35","slug":"font-pairing-preview","status":"publish","type":"tools-pages","link":"https:\/\/ingenio.vip\/zh\/tools-pages\/font-pairing-preview\/","title":{"rendered":"Font Pairing Preview"},"content":{"rendered":"<div class=\"font-pairing-tool\">\r\n  <div class=\"fpt-container\">\r\n    <header class=\"fpt-header\">\r\n      <h1><span class=\"dashicons dashicons-editor-textcolor\"><\/span> Font Pairing Preview<\/h1>\r\n      <p class=\"fpt-subtitle\">Test and visualize perfect font combinations<\/p>\r\n    <\/header>\r\n\r\n    <div class=\"fpt-controls\">\r\n      <div class=\"fpt-font-selectors\">\r\n        <div class=\"fpt-font-selector\">\r\n          <label for=\"headingFont\">Heading Font<\/label>\r\n          <select id=\"headingFont\" class=\"fpt-font-dropdown\">\r\n            <option value=\"'Playfair Display', serif\">Playfair Display<\/option>\r\n            <option value=\"'Montserrat', sans-serif\" selected>Montserrat<\/option>\r\n            <option value=\"'Roboto Slab', serif\">Roboto Slab<\/option>\r\n            <option value=\"'Poppins', sans-serif\">Poppins<\/option>\r\n            <option value=\"'Merriweather', serif\">Merriweather<\/option>\r\n            <option value=\"'Oswald', sans-serif\">Oswald<\/option>\r\n          <\/select>\r\n          <div class=\"fpt-font-options\">\r\n            <label>\r\n              <input type=\"range\" id=\"headingSize\" min=\"24\" max=\"72\" value=\"48\"> \r\n              <span id=\"headingSizeValue\">48px<\/span>\r\n            <\/label>\r\n            <label>\r\n              <input type=\"color\" id=\"headingColor\" value=\"#1a1a1a\">\r\n              Color\r\n            <\/label>\r\n            <label>\r\n              <select id=\"headingWeight\">\r\n                <option value=\"300\">Light<\/option>\r\n                <option value=\"400\" selected>Regular<\/option>\r\n                <option value=\"500\">Medium<\/option>\r\n                <option value=\"600\">Semi-bold<\/option>\r\n                <option value=\"700\">Bold<\/option>\r\n                <option value=\"800\">Extra-bold<\/option>\r\n                <option value=\"900\">Black<\/option>\r\n              <\/select>\r\n            <\/label>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"fpt-font-selector\">\r\n          <label for=\"bodyFont\">Body Font<\/label>\r\n          <select id=\"bodyFont\" class=\"fpt-font-dropdown\">\r\n            <option value=\"'Lora', serif\">Lora<\/option>\r\n            <option value=\"'Open Sans', sans-serif\" selected>Open Sans<\/option>\r\n            <option value=\"'Roboto', sans-serif\">Roboto<\/option>\r\n            <option value=\"'Source Sans Pro', sans-serif\">Source Sans Pro<\/option>\r\n            <option value=\"'PT Sans', sans-serif\">PT Sans<\/option>\r\n            <option value=\"'Raleway', sans-serif\">Raleway<\/option>\r\n          <\/select>\r\n          <div class=\"fpt-font-options\">\r\n            <label>\r\n              <input type=\"range\" id=\"bodySize\" min=\"12\" max=\"24\" value=\"16\"> \r\n              <span id=\"bodySizeValue\">16px<\/span>\r\n            <\/label>\r\n            <label>\r\n              <input type=\"color\" id=\"bodyColor\" value=\"#333333\">\r\n              Color\r\n            <\/label>\r\n            <label>\r\n              <select id=\"bodyWeight\">\r\n                <option value=\"300\">Light<\/option>\r\n                <option value=\"400\" selected>Regular<\/option>\r\n                <option value=\"500\">Medium<\/option>\r\n                <option value=\"600\">Semi-bold<\/option>\r\n                <option value=\"700\">Bold<\/option>\r\n              <\/select>\r\n            <\/label>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"fpt-presets\">\r\n        <h3>Popular Presets:<\/h3>\r\n        <div class=\"fpt-preset-buttons\">\r\n          <button data-heading=\"'Playfair Display', serif\" data-body=\"'Lora', serif\">Classic<\/button>\r\n          <button data-heading=\"'Montserrat', sans-serif\" data-body=\"'Open Sans', sans-serif\">Modern<\/button>\r\n          <button data-heading=\"'Roboto Slab', serif\" data-body=\"'Roboto', sans-serif\">Google<\/button>\r\n          <button data-heading=\"'Oswald', sans-serif\" data-body=\"'PT Sans', sans-serif\">Editorial<\/button>\r\n          <button data-heading=\"'Poppins', sans-serif\" data-body=\"'Source Sans Pro', sans-serif\">Minimal<\/button>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"fpt-preview-area\">\r\n      <div class=\"fpt-preview-options\">\r\n        <select id=\"previewTemplate\">\r\n          <option value=\"blog\">Blog Post<\/option>\r\n          <option value=\"landing\">Landing Page<\/option>\r\n          <option value=\"portfolio\">Portfolio<\/option>\r\n          <option value=\"ecommerce\">E-commerce<\/option>\r\n          <option value=\"dashboard\">Admin Dashboard<\/option>\r\n        <\/select>\r\n        <label>\r\n          <input type=\"color\" id=\"bgColor\" value=\"#ffffff\">\r\n          Background\r\n        <\/label>\r\n        <label>\r\n          <input type=\"range\" id=\"lineHeight\" min=\"1.2\" max=\"2.2\" step=\"0.1\" value=\"1.6\">\r\n          Line Height: <span id=\"lineHeightValue\">1.6<\/span>\r\n        <\/label>\r\n      <\/div>\r\n\r\n      <div class=\"fpt-preview-content\" id=\"previewContent\">\r\n        <!-- Content will be generated by JavaScript -->\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"fpt-output\">\r\n      <h2>Implementation Code<\/h2>\r\n      <div class=\"fpt-code-tabs\">\r\n        <button class=\"active\" data-tab=\"css\">CSS<\/button>\r\n        <button data-tab=\"html\">HTML<\/button>\r\n        <button data-tab=\"google\">Google Fonts<\/button>\r\n      <\/div>\r\n      <div class=\"fpt-code-content\">\r\n        <pre id=\"cssCode\" class=\"active\"><code class=\"language-css\">\/* Generated CSS will appear here *\/<\/code><\/pre>\r\n        <pre id=\"htmlCode\"><code class=\"language-html\">&lt;!-- Generated HTML will appear here --&gt;<\/code><\/pre>\r\n        <pre id=\"googleCode\"><code class=\"language-html\">&lt;!-- Google Fonts link will appear here --&gt;<\/code><\/pre>\r\n      <\/div>\r\n      <button id=\"copyCode\" class=\"fpt-copy-btn\">\r\n        <span class=\"dashicons dashicons-admin-page\"><\/span> Copy CSS\r\n      <\/button>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n.font-pairing-tool {\r\n  --fpt-primary: #3858e9;\r\n  --fpt-primary-hover: #2a4bd3;\r\n  --fpt-secondary: #f8f9fa;\r\n  --fpt-border: #e0e0e0;\r\n  --fpt-text: #212529;\r\n  --fpt-text-light: #6c757d;\r\n  --fpt-card-bg: #ffffff;\r\n  --fpt-danger: #dc3545;\r\n  --fpt-success: #28a745;\r\n\r\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\r\n  color: var(--fpt-text);\r\n  background-color: var(--fpt-secondary);\r\n  padding: 20px;\r\n  max-width: 1200px;\r\n  margin: 0 auto;\r\n}\r\n\r\n.fpt-container {\r\n  background-color: var(--fpt-card-bg);\r\n  border-radius: 8px;\r\n  box-shadow: 0 1px 3px rgba(0,0,0,0.1);\r\n  padding: 30px;\r\n}\r\n\r\n.fpt-header {\r\n  text-align: center;\r\n  margin-bottom: 30px;\r\n}\r\n.fpt-header h1 {\r\n  color: var(--fpt-primary);\r\n  margin: 0;\r\n  font-size: 28px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 10px;\r\n}\r\n.fpt-header .dashicons {\r\n  font-size: 32px;\r\n  width: auto;\r\n  height: auto;\r\n}\r\n.fpt-subtitle {\r\n  color: var(--fpt-text-light);\r\n  margin-top: 8px;\r\n  font-size: 16px;\r\n}\r\n\r\n.fpt-controls {\r\n  margin-bottom: 30px;\r\n}\r\n\r\n.fpt-font-selectors {\r\n  display: flex;\r\n  gap: 30px;\r\n  margin-bottom: 20px;\r\n}\r\n.fpt-font-selector {\r\n  flex: 1;\r\n}\r\n.fpt-font-selector label {\r\n  display: block;\r\n  margin-bottom: 8px;\r\n  font-weight: 500;\r\n  font-size: 15px;\r\n}\r\n.fpt-font-dropdown {\r\n  width: 100%;\r\n  padding: 10px 12px;\r\n  border: 1px solid var(--fpt-border);\r\n  border-radius: 6px;\r\n  font-size: 15px;\r\n  margin-bottom: 12px;\r\n  background-color: white;\r\n}\r\n.fpt-font-options {\r\n  display: flex;\r\n  gap: 15px;\r\n  flex-wrap: wrap;\r\n}\r\n.fpt-font-options label {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  font-size: 14px;\r\n  white-space: nowrap;\r\n}\r\n.fpt-font-options input[type=\"range\"] {\r\n  width: 80px;\r\n}\r\n.fpt-font-options input[type=\"color\"] {\r\n  width: 25px;\r\n  height: 25px;\r\n  padding: 2px;\r\n  border: 1px solid var(--fpt-border);\r\n  border-radius: 4px;\r\n}\r\n.fpt-font-options select {\r\n  padding: 6px 8px;\r\n  border: 1px solid var(--fpt-border);\r\n  border-radius: 4px;\r\n  font-size: 14px;\r\n}\r\n\r\n.fpt-presets {\r\n  margin-top: 25px;\r\n}\r\n.fpt-presets h3 {\r\n  margin: 0 0 12px 0;\r\n  font-size: 16px;\r\n  color: var(--fpt-text-light);\r\n}\r\n.fpt-preset-buttons {\r\n  display: flex;\r\n  gap: 10px;\r\n  flex-wrap: wrap;\r\n}\r\n.fpt-preset-buttons button {\r\n  padding: 8px 16px;\r\n  background-color: var(--fpt-secondary);\r\n  border: 1px solid var(--fpt-border);\r\n  border-radius: 6px;\r\n  font-size: 14px;\r\n  cursor: pointer;\r\n  transition: all 0.2s ease;\r\n}\r\n.fpt-preset-buttons button:hover {\r\n  background-color: #e9ecef;\r\n  border-color: #ced4da;\r\n}\r\n\r\n.fpt-preview-area {\r\n  margin-bottom: 30px;\r\n}\r\n.fpt-preview-options {\r\n  display: flex;\r\n  gap: 20px;\r\n  margin-bottom: 15px;\r\n  flex-wrap: wrap;\r\n}\r\n.fpt-preview-options select {\r\n  padding: 8px 12px;\r\n  border: 1px solid var(--fpt-border);\r\n  border-radius: 6px;\r\n  font-size: 14px;\r\n  min-width: 150px;\r\n}\r\n.fpt-preview-options label {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  font-size: 14px;\r\n}\r\n.fpt-preview-options input[type=\"color\"] {\r\n  width: 25px;\r\n  height: 25px;\r\n  padding: 2px;\r\n  border: 1px solid var(--fpt-border);\r\n  border-radius: 4px;\r\n}\r\n.fpt-preview-options input[type=\"range\"] {\r\n  width: 80px;\r\n}\r\n.fpt-preview-content {\r\n  background-color: white;\r\n  border: 1px solid var(--fpt-border);\r\n  border-radius: 8px;\r\n  padding: 40px;\r\n  min-height: 400px;\r\n}\r\n\r\n.fpt-output {\r\n  margin-top: 40px;\r\n}\r\n.fpt-output h2 {\r\n  margin-top: 0;\r\n  margin-bottom: 20px;\r\n  font-size: 20px;\r\n}\r\n.fpt-code-tabs {\r\n  display: flex;\r\n  border-bottom: 1px solid var(--fpt-border);\r\n  margin-bottom: 15px;\r\n}\r\n.fpt-code-tabs button {\r\n  padding: 8px 16px;\r\n  background: none;\r\n  border: none;\r\n  border-bottom: 3px solid transparent;\r\n  font-size: 14px;\r\n  cursor: pointer;\r\n  color: var(--fpt-text-light);\r\n  transition: all 0.2s ease;\r\n}\r\n.fpt-code-tabs button.active {\r\n  color: var(--fpt-primary);\r\n  border-bottom-color: var(--fpt-primary);\r\n}\r\n.fpt-code-tabs button:hover:not(.active) {\r\n  color: var(--fpt-text);\r\n}\r\n.fpt-code-content pre {\r\n  display: none;\r\n  background-color: #f8f9fa;\r\n  border-radius: 6px;\r\n  padding: 15px;\r\n  overflow-x: auto;\r\n  margin: 0;\r\n}\r\n.fpt-code-content pre.active {\r\n  display: block;\r\n}\r\n.fpt-code-content code {\r\n  font-family: \"Courier New\", Courier, monospace;\r\n  font-size: 14px;\r\n  color: #333;\r\n}\r\n.fpt-copy-btn {\r\n  margin-top: 15px;\r\n  padding: 10px 20px;\r\n  background-color: var(--fpt-primary);\r\n  color: white;\r\n  border: none;\r\n  border-radius: 6px;\r\n  font-size: 15px;\r\n  cursor: pointer;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  transition: background-color 0.2s ease;\r\n}\r\n.fpt-copy-btn:hover {\r\n  background-color: var(--fpt-primary-hover);\r\n}\r\n.fpt-copy-btn .dashicons {\r\n  font-size: 16px;\r\n  width: auto;\r\n  height: auto;\r\n}\r\n\r\n\/* Preview content styles *\/\r\n.fpt-preview-heading {\r\n  margin-bottom: 20px;\r\n}\r\n.fpt-preview-subheading {\r\n  margin-bottom: 30px;\r\n  color: var(--fpt-text-light);\r\n}\r\n.fpt-preview-paragraph {\r\n  margin-bottom: 20px;\r\n}\r\n.fpt-preview-list {\r\n  margin-bottom: 30px;\r\n  padding-left: 20px;\r\n}\r\n.fpt-preview-list li {\r\n  margin-bottom: 8px;\r\n}\r\n.fpt-preview-quote {\r\n  border-left: 4px solid var(--fpt-primary);\r\n  padding-left: 20px;\r\n  margin: 30px 0;\r\n  font-style: italic;\r\n}\r\n.fpt-preview-button {\r\n  display: inline-block;\r\n  padding: 10px 20px;\r\n  background-color: var(--fpt-primary);\r\n  color: white;\r\n  border-radius: 6px;\r\n  text-decoration: none;\r\n  margin-top: 20px;\r\n  font-weight: 500;\r\n}\r\n\r\n@media (max-width: 768px) {\r\n  .fpt-font-selectors {\r\n    flex-direction: column;\r\n    gap: 20px;\r\n  }\r\n  \r\n  .fpt-preview-content {\r\n    padding: 20px;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n  \/\/ DOM elements\r\n  const headingFont = document.getElementById('headingFont');\r\n  const bodyFont = document.getElementById('bodyFont');\r\n  const headingSize = document.getElementById('headingSize');\r\n  const bodySize = document.getElementById('bodySize');\r\n  const headingColor = document.getElementById('headingColor');\r\n  const bodyColor = document.getElementById('bodyColor');\r\n  const headingWeight = document.getElementById('headingWeight');\r\n  const bodyWeight = document.getElementById('bodyWeight');\r\n  const previewTemplate = document.getElementById('previewTemplate');\r\n  const bgColor = document.getElementById('bgColor');\r\n  const lineHeight = document.getElementById('lineHeight');\r\n  const previewContent = document.getElementById('previewContent');\r\n  const cssCode = document.getElementById('cssCode');\r\n  const htmlCode = document.getElementById('htmlCode');\r\n  const googleCode = document.getElementById('googleCode');\r\n  const copyCodeBtn = document.getElementById('copyCode');\r\n  const headingSizeValue = document.getElementById('headingSizeValue');\r\n  const bodySizeValue = document.getElementById('bodySizeValue');\r\n  const lineHeightValue = document.getElementById('lineHeightValue');\r\n  const presetButtons = document.querySelectorAll('.fpt-preset-buttons button');\r\n  const codeTabs = document.querySelectorAll('.fpt-code-tabs button');\r\n  \r\n  \/\/ Initial load\r\n  updatePreview();\r\n  updateCodeOutput();\r\n  \r\n  \/\/ Event listeners\r\n  headingFont.addEventListener('change', updatePreview);\r\n  bodyFont.addEventListener('change', updatePreview);\r\n  headingSize.addEventListener('input', function() {\r\n    headingSizeValue.textContent = this.value + 'px';\r\n    updatePreview();\r\n  });\r\n  bodySize.addEventListener('input', function() {\r\n    bodySizeValue.textContent = this.value + 'px';\r\n    updatePreview();\r\n  });\r\n  headingColor.addEventListener('change', updatePreview);\r\n  bodyColor.addEventListener('change', updatePreview);\r\n  headingWeight.addEventListener('change', updatePreview);\r\n  bodyWeight.addEventListener('change', updatePreview);\r\n  previewTemplate.addEventListener('change', updatePreview);\r\n  bgColor.addEventListener('change', updatePreview);\r\n  lineHeight.addEventListener('input', function() {\r\n    lineHeightValue.textContent = this.value;\r\n    updatePreview();\r\n  });\r\n  \r\n  \/\/ Preset buttons\r\n  presetButtons.forEach(button => {\r\n    button.addEventListener('click', function() {\r\n      const heading = this.getAttribute('data-heading');\r\n      const body = this.getAttribute('data-body');\r\n      \r\n      headingFont.value = heading;\r\n      bodyFont.value = body;\r\n      \r\n      \/\/ Set appropriate weights based on fonts\r\n      if (heading.includes('Playfair')) {\r\n        headingWeight.value = '700';\r\n      } else if (heading.includes('Montserrat')) {\r\n        headingWeight.value = '600';\r\n      } else if (heading.includes('Roboto Slab')) {\r\n        headingWeight.value = '500';\r\n      } else if (heading.includes('Oswald')) {\r\n        headingWeight.value = '500';\r\n      } else {\r\n        headingWeight.value = '600';\r\n      }\r\n      \r\n      if (body.includes('Lora')) {\r\n        bodyWeight.value = '400';\r\n      } else if (body.includes('Open Sans')) {\r\n        bodyWeight.value = '400';\r\n      } else if (body.includes('Roboto')) {\r\n        bodyWeight.value = '400';\r\n      } else {\r\n        bodyWeight.value = '400';\r\n      }\r\n      \r\n      updatePreview();\r\n    });\r\n  });\r\n  \r\n  \/\/ Code tabs\r\n  codeTabs.forEach(tab => {\r\n    tab.addEventListener('click', function() {\r\n      \/\/ Remove active class from all tabs\r\n      codeTabs.forEach(t => t.classList.remove('active'));\r\n      \/\/ Add active class to clicked tab\r\n      this.classList.add('active');\r\n      \r\n      \/\/ Hide all code content\r\n      document.querySelectorAll('.fpt-code-content pre').forEach(pre => {\r\n        pre.classList.remove('active');\r\n      });\r\n      \r\n      \/\/ Show selected code content\r\n      const tabId = this.getAttribute('data-tab');\r\n      document.getElementById(tabId + 'Code').classList.add('active');\r\n      \r\n      \/\/ Update copy button text\r\n      copyCodeBtn.innerHTML = `<span class=\"dashicons dashicons-admin-page\"><\/span> Copy ${tabId.toUpperCase()}`;\r\n    });\r\n  });\r\n  \r\n  \/\/ Copy code button\r\n  copyCodeBtn.addEventListener('click', function() {\r\n    const activeTab = document.querySelector('.fpt-code-tabs button.active');\r\n    const tabId = activeTab.getAttribute('data-tab');\r\n    const codeElement = document.getElementById(tabId + 'Code');\r\n    const range = document.createRange();\r\n    range.selectNode(codeElement);\r\n    window.getSelection().removeAllRanges();\r\n    window.getSelection().addRange(range);\r\n    document.execCommand('copy');\r\n    window.getSelection().removeAllRanges();\r\n    \r\n    \/\/ Show confirmation\r\n    const originalText = this.innerHTML;\r\n    this.innerHTML = `<span class=\"dashicons dashicons-yes\"><\/span> Copied!`;\r\n    \r\n    setTimeout(() => {\r\n      this.innerHTML = originalText;\r\n    }, 2000);\r\n  });\r\n  \r\n  \/\/ Update preview content\r\n  function updatePreview() {\r\n    \/\/ Set background color\r\n    previewContent.style.backgroundColor = bgColor.value;\r\n    \r\n    \/\/ Generate content based on template\r\n    let content = '';\r\n    const template = previewTemplate.value;\r\n    \r\n    if (template === 'blog') {\r\n      content = `\r\n        <h1 class=\"fpt-preview-heading\">The Art of Typography in Modern Design<\/h1>\r\n        <h2 class=\"fpt-preview-subheading\">How font pairings can elevate your content<\/h2>\r\n        <p class=\"fpt-preview-paragraph\">Typography is the visual component of the written word. It's not just about making words legible, but about using type to create an emotional response and communicate a brand's personality. The right font pairing can make your content more engaging and help guide readers through your message.<\/p>\r\n        <p class=\"fpt-preview-paragraph\">When selecting fonts, consider contrast and compatibility. A common approach is pairing a serif with a sans-serif, but there are many other effective combinations. The key is to create visual hierarchy while maintaining harmony.<\/p>\r\n        <ul class=\"fpt-preview-list\">\r\n          <li>Choose fonts with similar x-heights<\/li>\r\n          <li>Limit to 2-3 fonts maximum<\/li>\r\n          <li>Ensure adequate contrast between heading and body<\/li>\r\n          <li>Consider the mood you want to convey<\/li>\r\n        <\/ul>\r\n        <blockquote class=\"fpt-preview-quote\">\"Good typography is invisible. Great typography is invisible but memorable.\"<\/blockquote>\r\n        <a href=\"#\" class=\"fpt-preview-button\">Read More Articles<\/a>\r\n      `;\r\n    } else if (template === 'landing') {\r\n      content = `\r\n        <h1 class=\"fpt-preview-heading\">Transform Your Brand With Perfect Typography<\/h1>\r\n        <h2 class=\"fpt-preview-subheading\">First impressions matter - make yours count<\/h2>\r\n        <p class=\"fpt-preview-paragraph\">Your brand's typography speaks before you do. In just seconds, visitors form opinions about your credibility, professionalism, and personality based on your font choices. Our typography pairing tool helps you make the right first impression.<\/p>\r\n        <p class=\"fpt-preview-paragraph\">Studies show that good typography increases reader engagement by up to 80%. When text is easy to read and visually appealing, people are more likely to stay on your page, absorb your message, and take action.<\/p>\r\n        <div style=\"display: flex; gap: 20px; margin-top: 30px;\">\r\n          <a href=\"#\" class=\"fpt-preview-button\" style=\"background-color: ${headingColor.value}\">Get Started<\/a>\r\n          <a href=\"#\" class=\"fpt-preview-button\" style=\"background-color: transparent; border: 2px solid ${headingColor.value}; color: ${headingColor.value}\">Learn More<\/a>\r\n        <\/div>\r\n      `;\r\n    } else if (template === 'portfolio') {\r\n      content = `\r\n        <h1 class=\"fpt-preview-heading\">Alex Morgan<\/h1>\r\n        <h2 class=\"fpt-preview-subheading\">Digital Designer & Typography Enthusiast<\/h2>\r\n        <p class=\"fpt-preview-paragraph\">With over 10 years of experience in digital design, I specialize in creating visually stunning interfaces with exceptional typography at their core. My work has been featured in Design Week, Typography Journal, and Creative Bloq.<\/p>\r\n        <p class=\"fpt-preview-paragraph\">I believe typography is the foundation of good design. Whether working on websites, mobile apps, or print materials, I carefully consider every typographic decision to ensure optimal readability and aesthetic appeal.<\/p>\r\n        <h3 style=\"font-family: ${headingFont.value}; font-weight: ${headingWeight.value}; color: ${headingColor.value}; margin: 30px 0 15px 0;\">Featured Projects<\/h3>\r\n        <div style=\"display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 30px;\">\r\n          <div style=\"background: #f1f1f1; height: 100px; border-radius: 4px;\"><\/div>\r\n          <div style=\"background: #f1f1f1; height: 100px; border-radius: 4px;\"><\/div>\r\n          <div style=\"background: #f1f1f1; height: 100px; border-radius: 4px;\"><\/div>\r\n        <\/div>\r\n        <a href=\"#\" class=\"fpt-preview-button\">View Full Portfolio<\/a>\r\n      `;\r\n    } else if (template === 'ecommerce') {\r\n      content = `\r\n        <h1 class=\"fpt-preview-heading\">Premium Leather Notebooks<\/h1>\r\n        <h2 class=\"fpt-preview-subheading\">Handcrafted for writers, designers, and creatives<\/h2>\r\n        <p class=\"fpt-preview-paragraph\">Our notebooks feature 120gsm acid-free paper, perfect for fountain pens, with hand-stitched leather covers that age beautifully. Each notebook is made by skilled artisans using traditional bookbinding techniques.<\/p>\r\n        <div style=\"display: flex; gap: 30px; margin: 30px 0;\">\r\n          <div style=\"flex: 1;\">\r\n            <h3 style=\"font-family: ${headingFont.value}; font-weight: ${headingWeight.value}; color: ${headingColor.value}; margin-bottom: 10px;\">Features<\/h3>\r\n            <ul class=\"fpt-preview-list\">\r\n              <li>Genuine full-grain leather cover<\/li>\r\n              <li>120gsm acid-free paper<\/li>\r\n              <li>Lay-flat binding<\/li>\r\n              <li>Elastic closure band<\/li>\r\n              <li>Ribbon bookmark<\/li>\r\n            <\/ul>\r\n          <\/div>\r\n          <div style=\"flex: 1;\">\r\n            <h3 style=\"font-family: ${headingFont.value}; font-weight: ${headingWeight.value}; color: ${headingColor.value}; margin-bottom: 10px;\">Specifications<\/h3>\r\n            <ul class=\"fpt-preview-list\">\r\n              <li>Size: A5 (148 \u00d7 210 mm)<\/li>\r\n              <li>Pages: 192 (96 sheets)<\/li>\r\n              <li>Weight: 450g<\/li>\r\n              <li>Available in 3 colors<\/li>\r\n            <\/ul>\r\n          <\/div>\r\n        <\/div>\r\n        <div style=\"display: flex; align-items: center; gap: 20px; margin-top: 20px;\">\r\n          <span style=\"font-family: ${headingFont.value}; font-size: 24px; font-weight: ${headingWeight.value}; color: ${headingColor.value}\">$49.99<\/span>\r\n          <a href=\"#\" class=\"fpt-preview-button\">Add to Cart<\/a>\r\n        <\/div>\r\n      `;\r\n    } else { \/\/ dashboard\r\n      content = `\r\n        <div style=\"display: flex; gap: 30px;\">\r\n          <div style=\"flex: 0 0 250px; border-right: 1px solid #eee; padding-right: 20px;\">\r\n            <h3 style=\"font-family: ${headingFont.value}; font-weight: ${headingWeight.value}; color: ${headingColor.value}; margin-bottom: 20px;\">Navigation<\/h3>\r\n            <ul style=\"list-style: none; padding: 0; margin: 0;\">\r\n              <li style=\"padding: 8px 0; border-bottom: 1px solid #eee;\">Dashboard<\/li>\r\n              <li style=\"padding: 8px 0; border-bottom: 1px solid #eee;\">Analytics<\/li>\r\n              <li style=\"padding: 8px 0; border-bottom: 1px solid #eee;\">Content<\/li>\r\n              <li style=\"padding: 8px 0; border-bottom: 1px solid #eee;\">Users<\/li>\r\n              <li style=\"padding: 8px 0; border-bottom: 1px solid #eee;\">Settings<\/li>\r\n            <\/ul>\r\n          <\/div>\r\n          <div style=\"flex: 1;\">\r\n            <h1 class=\"fpt-preview-heading\">Dashboard Overview<\/h1>\r\n            <div style=\"display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 30px;\">\r\n              <div style=\"background: #f8f9fa; border-radius: 8px; padding: 20px;\">\r\n                <div style=\"font-family: ${bodyFont.value}; color: ${bodyColor.value}; font-size: 14px; margin-bottom: 10px;\">Total Visitors<\/div>\r\n                <div style=\"font-family: ${headingFont.value}; font-weight: ${headingWeight.value}; color: ${headingColor.value}; font-size: 24px;\">12,458<\/div>\r\n              <\/div>\r\n              <div style=\"background: #f8f9fa; border-radius: 8px; padding: 20px;\">\r\n                <div style=\"font-family: ${bodyFont.value}; color: ${bodyColor.value}; font-size: 14px; margin-bottom: 10px;\">Conversion Rate<\/div>\r\n                <div style=\"font-family: ${headingFont.value}; font-weight: ${headingWeight.value}; color: ${headingColor.value}; font-size: 24px;\">3.2%<\/div>\r\n              <\/div>\r\n              <div style=\"background: #f8f9fa; border-radius: 8px; padding: 20px;\">\r\n                <div style=\"font-family: ${bodyFont.value}; color: ${bodyColor.value}; font-size: 14px; margin-bottom: 10px;\">Active Users<\/div>\r\n                <div style=\"font-family: ${headingFont.value}; font-weight: ${headingWeight.value}; color: ${headingColor.value}; font-size: 24px;\">1,024<\/div>\r\n              <\/div>\r\n            <\/div>\r\n            <h3 style=\"font-family: ${headingFont.value}; font-weight: ${headingWeight.value}; color: ${headingColor.value}; margin-bottom: 15px;\">Recent Activity<\/h3>\r\n            <div style=\"background: #f8f9fa; border-radius: 8px; padding: 15px;\">\r\n              <div style=\"display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #eee;\">\r\n                <span style=\"font-family: ${bodyFont.value}; color: ${bodyColor.value}\">New user registration<\/span>\r\n                <span style=\"font-family: ${bodyFont.value}; color: ${bodyColor.value}\">2 min ago<\/span>\r\n              <\/div>\r\n              <div style=\"display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #eee;\">\r\n                <span style=\"font-family: ${bodyFont.value}; color: ${bodyColor.value}\">Content update<\/span>\r\n                <span style=\"font-family: ${bodyFont.value}; color: ${bodyColor.value}\">15 min ago<\/span>\r\n              <\/div>\r\n              <div style=\"display: flex; justify-content: space-between; padding: 10px 0;\">\r\n                <span style=\"font-family: ${bodyFont.value}; color: ${bodyColor.value}\">System backup<\/span>\r\n                <span style=\"font-family: ${bodyFont.value}; color: ${bodyColor.value}\">1 hour ago<\/span>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      `;\r\n    }\r\n    \r\n    previewContent.innerHTML = content;\r\n    \r\n    \/\/ Apply styles to preview elements\r\n    const headingElements = previewContent.querySelectorAll('.fpt-preview-heading');\r\n    const subheadingElements = previewContent.querySelectorAll('.fpt-preview-subheading');\r\n    const paragraphElements = previewContent.querySelectorAll('.fpt-preview-paragraph');\r\n    const listElements = previewContent.querySelectorAll('.fpt-preview-list');\r\n    const quoteElements = previewContent.querySelectorAll('.fpt-preview-quote');\r\n    const buttonElements = previewContent.querySelectorAll('.fpt-preview-button');\r\n    \r\n    headingElements.forEach(el => {\r\n      el.style.fontFamily = headingFont.value;\r\n      el.style.fontSize = headingSize.value + 'px';\r\n      el.style.color = headingColor.value;\r\n      el.style.fontWeight = headingWeight.value;\r\n      el.style.lineHeight = lineHeight.value;\r\n      el.style.marginTop = '0';\r\n    });\r\n    \r\n    subheadingElements.forEach(el => {\r\n      el.style.fontFamily = headingFont.value;\r\n      el.style.fontSize = (headingSize.value * 0.7) + 'px';\r\n      el.style.color = bodyColor.value;\r\n      el.style.fontWeight = headingWeight.value;\r\n      el.style.lineHeight = lineHeight.value;\r\n      el.style.marginTop = '0';\r\n      el.style.opacity = '0.8';\r\n    });\r\n    \r\n    paragraphElements.forEach(el => {\r\n      el.style.fontFamily = bodyFont.value;\r\n      el.style.fontSize = bodySize.value + 'px';\r\n      el.style.color = bodyColor.value;\r\n      el.style.fontWeight = bodyWeight.value;\r\n      el.style.lineHeight = lineHeight.value;\r\n      el.style.marginBottom = '20px';\r\n    });\r\n    \r\n    listElements.forEach(el => {\r\n      el.style.fontFamily = bodyFont.value;\r\n      el.style.fontSize = bodySize.value + 'px';\r\n      el.style.color = bodyColor.value;\r\n      el.style.fontWeight = bodyWeight.value;\r\n      el.style.lineHeight = lineHeight.value;\r\n    });\r\n    \r\n    quoteElements.forEach(el => {\r\n      el.style.fontFamily = bodyFont.value;\r\n      el.style.fontSize = (bodySize.value * 1.2) + 'px';\r\n      el.style.color = bodyColor.value;\r\n      el.style.fontWeight = bodyWeight.value;\r\n      el.style.lineHeight = lineHeight.value;\r\n    });\r\n    \r\n    buttonElements.forEach(el => {\r\n      el.style.fontFamily = headingFont.value;\r\n      el.style.fontWeight = headingWeight.value;\r\n      el.style.fontSize = (bodySize.value * 1.1) + 'px';\r\n    });\r\n    \r\n    \/\/ Update code output\r\n    updateCodeOutput();\r\n  }\r\n  \r\n  \/\/ Update code output\r\n  function updateCodeOutput() {\r\n    \/\/ Get font names without quotes for CSS\r\n    const headingFontName = headingFont.value.replace(\/'\/g, '');\r\n    const bodyFontName = bodyFont.value.replace(\/'\/g, '');\r\n    \r\n    \/\/ Get font names for Google Fonts URL\r\n    const headingFontGoogle = headingFont.value.replace(\/'\/g, '').replace(\/ \/g, '+');\r\n    const bodyFontGoogle = bodyFont.value.replace(\/'\/g, '').replace(\/ \/g, '+');\r\n    \r\n    \/\/ Generate CSS\r\n    const css = `\/* Typography Styles *\/\r\nh1, h2, h3, h4, h5, h6 {\r\n  font-family: ${headingFontName}, ${headingFontName.includes('sans') ? 'sans-serif' : 'serif'};\r\n  font-weight: ${headingWeight.value};\r\n  color: ${headingColor.value};\r\n  line-height: ${lineHeight.value};\r\n}\r\n\r\nh1 {\r\n  font-size: ${headingSize.value}px;\r\n}\r\n\r\nbody {\r\n  font-family: ${bodyFontName}, ${bodyFontName.includes('sans') ? 'sans-serif' : 'serif'};\r\n  font-size: ${bodySize.value}px;\r\n  font-weight: ${bodyWeight.value};\r\n  color: ${bodyColor.value};\r\n  line-height: ${lineHeight.value};\r\n  background-color: ${bgColor.value};\r\n}`;\r\n    \r\n    \/\/ Generate HTML\r\n    const html = `<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n  <title>Your Page Title<\/title>\r\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=${headingFontGoogle}:wght@${headingWeight.value}&family=${bodyFontGoogle}:wght@${bodyWeight.value}&display=swap\" rel=\"stylesheet\">\r\n  <style>\r\n    ${css}\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n  <h1>Your Heading<\/h1>\r\n  <p>Your paragraph text goes here. This will use the body font you selected.<\/p>\r\n<\/body>\r\n<\/html>`;\r\n    \r\n    \/\/ Generate Google Fonts link\r\n    const google = `<link href=\"https:\/\/fonts.googleapis.com\/css2?family=${headingFontGoogle}:wght@${headingWeight.value}&family=${bodyFontGoogle}:wght@${bodyWeight.value}&display=swap\" rel=\"stylesheet\">`;\r\n    \r\n    \/\/ Update code blocks\r\n    cssCode.querySelector('code').textContent = css;\r\n    htmlCode.querySelector('code').textContent = html;\r\n    googleCode.querySelector('code').textContent = google;\r\n    \r\n    \/\/ Highlight code (would need Prism.js or similar for actual syntax highlighting)\r\n  }\r\n});\r\n<\/script>\n\n\n\n<p><a href=\"https:\/\/ingenio.vip\/wp-admin\/admin.php?page=ingenio-tools-font-pairing-preview\"><\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>Font Pairing Preview Test and visualize perfect font combinations Heading Font Playfair Display Montserrat Roboto Slab Poppins Merriweather Oswald 48px Color Light Regular Medium Semi-bold Bold Extra-bold Black Body Font Lora Open Sans Roboto Source Sans Pro PT Sans Raleway 16px Color Light Regular Medium Semi-bold Bold Popular Presets: Classic Modern Google Editorial Minimal Blog [&hellip;]<\/p>\n<\/p><div class=\"more-link\"><a href=\"https:\/\/ingenio.vip\/zh\/tools-pages\/font-pairing-preview\/\" class=\"btn btn-small btn--dark btn-hover-shadow\"><span class=\"text\">Continue Reading<\/span><i class=\"seoicon-right-arrow\"><\/i><\/a><\/div>","protected":false},"author":1,"featured_media":0,"menu_order":0,"template":"elementor_header_footer","meta":{"_acf_changed":false,"googlesitekit_rrm_CAowrpbbCw:productID":"","footnotes":""},"tools-categories":[],"class_list":["post-4460","tools-pages","type-tools-pages","status-publish","hentry"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-pages\/4460","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-pages"}],"about":[{"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/types\/tools-pages"}],"author":[{"embeddable":true,"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":1,"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-pages\/4460\/revisions"}],"predecessor-version":[{"id":4461,"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-pages\/4460\/revisions\/4461"}],"wp:attachment":[{"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/media?parent=4460"}],"wp:term":[{"taxonomy":"tools-categories","embeddable":true,"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-categories?post=4460"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}