{"id":5274,"date":"2026-06-03T03:24:38","date_gmt":"2026-06-03T03:24:38","guid":{"rendered":"https:\/\/fontono.com\/?page_id=5274"},"modified":"2026-06-06T05:44:35","modified_gmt":"2026-06-06T05:44:35","slug":"about","status":"publish","type":"page","link":"https:\/\/fontono.com\/about\/","title":{"rendered":"About"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"5274\" class=\"elementor elementor-5274\">\n\t\t\t\t<div class=\"elementor-element elementor-element-be498e9 e-con e-atomic-element e-flexbox-base e-8e835e3 \" data-id=\"be498e9\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"be498e9\">\n    \t\t<div class=\"elementor-element elementor-element-39cfb9d elementor-widget elementor-widget-shortcode\" data-id=\"39cfb9d\" 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 class=\"fontono-about-page\">\r\n  <!-- Load Bootstrap Icons (Required for icons to show) -->\r\n  <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap-icons@1.11.3\/font\/bootstrap-icons.min.css\">\r\n\r\n  <style>\r\n    \/* ---------- BASE & VARIABLES (SCOPED) ---------- *\/\r\n    .fontono-about-page {\r\n      --fa-deep: #3B0270;\r\n      --fa-violet: #6F00FF;\r\n      --fa-lavender: #E9B3FB;\r\n      --fa-light: #FFF1F1;\r\n      --fa-white: #FFFFFF;\r\n      --fa-dark-text: #1E013A;\r\n      --fa-muted: #5C4A75;\r\n      \r\n      --fa-radius-xl: 36px;\r\n      --fa-radius-lg: 28px;\r\n      --fa-radius-md: 20px;\r\n      --fa-radius-sm: 12px;\r\n      \r\n      --fa-shadow-sm: 0 4px 15px rgba(59, 2, 112, 0.04);\r\n      --fa-shadow-md: 0 12px 35px rgba(59, 2, 112, 0.08);\r\n      --fa-shadow-glow: 0 20px 40px rgba(111, 0, 255, 0.15);\r\n      \r\n      --fa-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\r\n      \r\n      font-family: var(--fa-font);\r\n      color: var(--fa-dark-text);\r\n      background: var(--fa-white);\r\n      line-height: 1.6;\r\n      overflow-x: hidden;\r\n      -webkit-font-smoothing: antialiased;\r\n    }\r\n\r\n    .fontono-about-page *,\r\n    .fontono-about-page *::before,\r\n    .fontono-about-page *::after {\r\n      box-sizing: border-box;\r\n      margin: 0;\r\n      padding: 0;\r\n    }\r\n\r\n    \/* Layout Utility *\/\r\n    .fontono-about-inner {\r\n      max-width: 1280px;\r\n      margin: 0 auto;\r\n      padding: 0 32px;\r\n      width: 100%;\r\n      position: relative;\r\n      z-index: 2;\r\n    }\r\n\r\n    \/* Typography *\/\r\n    .fontono-about-badge {\r\n      display: inline-flex;\r\n      background: rgba(233, 179, 251, 0.2);\r\n      color: var(--fa-violet);\r\n      padding: 8px 16px;\r\n      border-radius: 50px;\r\n      font-size: 0.9rem;\r\n      font-weight: 700;\r\n      letter-spacing: 0.5px;\r\n      text-transform: uppercase;\r\n      margin-bottom: 20px;\r\n      border: 1px solid rgba(233, 179, 251, 0.5);\r\n    }\r\n    .fontono-about-hero-heading {\r\n      font-size: clamp(3rem, 6vw, 4.5rem);\r\n      font-weight: 900;\r\n      line-height: 1.1;\r\n      letter-spacing: -0.03em;\r\n      color: var(--fa-white);\r\n      margin-bottom: 24px;\r\n    }\r\n    .fontono-about-section-heading {\r\n      font-size: clamp(2.2rem, 4vw, 3rem);\r\n      font-weight: 850;\r\n      line-height: 1.2;\r\n      color: var(--fa-deep);\r\n      margin-bottom: 16px;\r\n      letter-spacing: -0.02em;\r\n    }\r\n    .fontono-about-subheading {\r\n      font-size: 1.15rem;\r\n      color: var(--fa-muted);\r\n      max-width: 650px;\r\n      margin-bottom: 40px;\r\n      font-weight: 400;\r\n      line-height: 1.7;\r\n    }\r\n    .fontono-about-card-title {\r\n      font-size: 1.35rem;\r\n      font-weight: 800;\r\n      color: var(--fa-deep);\r\n      margin: 20px 0 10px;\r\n      transition: color 0.3s ease;\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 12px;\r\n    }\r\n    .fontono-about-text-muted {\r\n      color: var(--fa-muted);\r\n      line-height: 1.6;\r\n      font-size: 1.05rem;\r\n    }\r\n\r\n    \/* Sections *\/\r\n    .fontono-about-section {\r\n      padding: 110px 0;\r\n      position: relative;\r\n    }\r\n    .fontono-about-section-light {\r\n      background: linear-gradient(180deg, var(--fa-white) 0%, var(--fa-light) 100%);\r\n    }\r\n    .fontono-about-section-white {\r\n      background: var(--fa-white);\r\n    }\r\n\r\n    \/* Buttons *\/\r\n    .fontono-about-primary-button, .fontono-about-secondary-button {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      gap: 10px;\r\n      padding: 16px 36px;\r\n      border-radius: 50px;\r\n      font-weight: 700;\r\n      font-size: 1.05rem;\r\n      text-decoration: none;\r\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n      cursor: pointer;\r\n      border: none;\r\n    }\r\n    .fontono-about-primary-button {\r\n      background: linear-gradient(135deg, var(--fa-violet) 0%, #9035ff 100%);\r\n      color: var(--fa-white);\r\n      box-shadow: 0 10px 25px rgba(111, 0, 255, 0.25);\r\n    }\r\n    .fontono-about-primary-button:hover {\r\n      transform: translateY(-4px) scale(1.02);\r\n      box-shadow: 0 15px 35px rgba(111, 0, 255, 0.35);\r\n\t\t\tcolor: var(--fa-white);\r\n    }\r\n    .fontono-about-secondary-button {\r\n      background: rgba(255, 255, 255, 0.1);\r\n      backdrop-filter: blur(10px);\r\n      border: 2px solid rgba(255, 255, 255, 0.3);\r\n      color: var(--fa-white);\r\n    }\r\n    .fontono-about-secondary-button-dark {\r\n      border: 2px solid var(--fa-violet);\r\n      color: var(--fa-violet);\r\n      background: transparent;\r\n    }\r\n    .fontono-about-secondary-button:hover {\r\n      background: var(--fa-white);\r\n      color: var(--fa-violet);\r\n      transform: translateY(-4px);\r\n    }\r\n    .fontono-about-secondary-button-dark:hover {\r\n      background: var(--fa-violet);\r\n      color: var(--fa-white);\r\n      transform: translateY(-4px);\r\n    }\r\n\r\n    \/* Cards & Grid *\/\r\n    .fontono-about-grid-3, .fontono-about-grid-4, .fontono-about-grid-6 {\r\n      display: grid;\r\n      gap: 32px;\r\n    }\r\n    .fontono-about-grid-3 { grid-template-columns: repeat(3, 1fr); }\r\n    .fontono-about-grid-4 { grid-template-columns: repeat(4, 1fr); }\r\n    .fontono-about-grid-6 { grid-template-columns: repeat(3, 1fr); }\r\n    \r\n    .fontono-about-base-card {\r\n      background: var(--fa-white);\r\n      border-radius: var(--fa-radius-md);\r\n      padding: 32px 28px;\r\n      box-shadow: var(--fa-shadow-sm);\r\n      border: 1px solid rgba(233, 179, 251, 0.3);\r\n      transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n      position: relative;\r\n      overflow: hidden;\r\n      z-index: 1;\r\n    }\r\n    .fontono-about-base-card::before {\r\n      content: '';\r\n      position: absolute;\r\n      top: 0; left: 0; right: 0; bottom: 0;\r\n      background: linear-gradient(135deg, rgba(233, 179, 251, 0.1) 0%, rgba(255,255,255,0) 100%);\r\n      opacity: 0;\r\n      transition: opacity 0.4s ease;\r\n      z-index: -1;\r\n    }\r\n    .fontono-about-base-card:hover {\r\n      transform: translateY(-8px);\r\n      box-shadow: var(--fa-shadow-glow);\r\n      border-color: rgba(111, 0, 255, 0.3);\r\n    }\r\n    .fontono-about-base-card:hover::before {\r\n      opacity: 1;\r\n    }\r\n\r\n    \/* Bootstrap Icons Gradient Utility *\/\r\n    .fontono-about-icon-lg {\r\n      font-size: 2.8rem;\r\n      display: inline-block;\r\n      margin-bottom: 12px;\r\n      background: linear-gradient(135deg, var(--fa-violet), #E9B3FB);\r\n      -webkit-background-clip: text;\r\n      -webkit-text-fill-color: transparent;\r\n      line-height: 1.2;\r\n    }\r\n    .fontono-about-icon-md {\r\n      font-size: 1.6rem;\r\n      background: linear-gradient(135deg, var(--fa-violet), #E9B3FB);\r\n      -webkit-background-clip: text;\r\n      -webkit-text-fill-color: transparent;\r\n    }\r\n    .fontono-about-icon-sm {\r\n      font-size: 1.2rem;\r\n      margin-right: 8px;\r\n      color: var(--fa-violet);\r\n    }\r\n\r\n    \/* Floating Animations *\/\r\n    @keyframes floatUpDown {\r\n      0%, 100% { transform: translateY(0); }\r\n      50% { transform: translateY(-15px); }\r\n    }\r\n\r\n    \/* Hero Section *\/\r\n    .fontono-about-hero {\r\n      background: #3B0270;\r\n      border-radius: 0 0 48px 48px;\r\n      padding: 120px 0 100px;\r\n      position: relative;\r\n      overflow: hidden;\r\n    }\r\n    .fontono-about-hero-bg {\r\n      position: absolute;\r\n      top: 0; left: 0; right: 0; bottom: 0;\r\n      background: \r\n        radial-gradient(circle at 15% 20%, rgba(233, 179, 251, 0.25) 0%, transparent 45%),\r\n        radial-gradient(circle at 85% 80%, rgba(111, 0, 255, 0.4) 0%, transparent 50%),\r\n        linear-gradient(135deg, #2b0152 0%, #3B0270 100%);\r\n      z-index: 1;\r\n    }\r\n    .fontono-about-hero-layout {\r\n      display: grid;\r\n      grid-template-columns: 1fr 1fr;\r\n      gap: 60px;\r\n      align-items: center;\r\n    }\r\n    .fontono-about-hero-visual {\r\n      background: rgba(255, 255, 255, 0.08);\r\n      backdrop-filter: blur(20px);\r\n      -webkit-backdrop-filter: blur(20px);\r\n      border-radius: var(--fa-radius-xl);\r\n      padding: 40px;\r\n      border: 1px solid rgba(255, 255, 255, 0.15);\r\n      box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);\r\n      transform: perspective(1000px) rotateY(-5deg);\r\n      transition: transform 0.5s ease;\r\n    }\r\n    .fontono-about-hero-visual:hover {\r\n      transform: perspective(1000px) rotateY(0deg) translateY(-5px);\r\n    }\r\n    .fontono-about-hero-stack {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 24px;\r\n    }\r\n    .fontono-about-hero-stack span {\r\n      font-size: 1.8rem;\r\n      font-weight: 600;\r\n      color: var(--fa-white);\r\n      background: rgba(255, 255, 255, 0.06);\r\n      padding: 16px 24px;\r\n      border-radius: 60px;\r\n      text-align: center;\r\n      transition: all 0.3s ease;\r\n      border: 1px solid rgba(255, 255, 255, 0.1);\r\n    }\r\n    .fontono-about-hero-stack span:hover {\r\n      background: rgba(233, 179, 251, 0.15);\r\n      border-color: var(--fa-lavender);\r\n      transform: translateX(10px);\r\n    }\r\n    .fontono-about-hero-stack span:nth-child(even) {\r\n      animation: floatUpDown 6s ease-in-out infinite;\r\n    }\r\n    .fontono-about-hero-stack span:nth-child(odd) {\r\n      animation: floatUpDown 5s ease-in-out infinite alternate;\r\n    }\r\n\r\n    \/* Before\/After Box *\/\r\n    .fontono-about-beforeafter {\r\n      background: var(--fa-white);\r\n      border-radius: var(--fa-radius-xl);\r\n      padding: 32px;\r\n      box-shadow: var(--fa-shadow-md);\r\n      border: 1px solid rgba(111, 0, 255, 0.1);\r\n      position: relative;\r\n    }\r\n    .fontono-about-beforeafter::after {\r\n      content: '\\F138'; \/* Bootstrap Icon bi-arrow-right *\/\r\n      font-family: bootstrap-icons !important;\r\n      position: absolute;\r\n      top: 50%; left: 50%;\r\n      transform: translate(-50%, -50%);\r\n      width: 48px; height: 48px;\r\n      background: var(--fa-violet);\r\n      color: white;\r\n      border-radius: 50%;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      font-size: 1.5rem;\r\n      box-shadow: 0 4px 15px rgba(111, 0, 255, 0.3);\r\n      border: 4px solid var(--fa-white);\r\n      z-index: 2;\r\n    }\r\n    .fontono-about-before, .fontono-about-after {\r\n      padding: 24px;\r\n      border-radius: var(--fa-radius-lg);\r\n    }\r\n    .fontono-about-before {\r\n      background: #F8F9FA;\r\n      margin-bottom: 24px;\r\n      border: 1px dashed rgba(59, 2, 112, 0.2);\r\n    }\r\n    .fontono-about-after {\r\n      background: linear-gradient(135deg, rgba(233, 179, 251, 0.15), rgba(111, 0, 255, 0.05));\r\n      border: 1px solid rgba(111, 0, 255, 0.1);\r\n    }\r\n    .fontono-about-after-styles {\r\n      display: flex;\r\n      flex-wrap: wrap;\r\n      gap: 14px;\r\n      margin-top: 16px;\r\n    }\r\n    .fontono-about-after-styles span {\r\n      background: var(--fa-white);\r\n      padding: 8px 16px;\r\n      border-radius: 40px;\r\n      font-size: 1.1rem;\r\n      border: 1px solid var(--fa-lavender);\r\n      box-shadow: 0 4px 10px rgba(0,0,0,0.03);\r\n      transition: transform 0.2s ease;\r\n    }\r\n    .fontono-about-after-styles span:hover {\r\n      transform: scale(1.05);\r\n      border-color: var(--fa-violet);\r\n    }\r\n\r\n    \/* Comparison Table *\/\r\n    .fontono-about-compare {\r\n      display: grid;\r\n      grid-template-columns: 1fr 1fr;\r\n      gap: 40px;\r\n      margin-top: 48px;\r\n    }\r\n    .fontono-about-compare-col {\r\n      background: var(--fa-white);\r\n      border-radius: var(--fa-radius-lg);\r\n      padding: 40px;\r\n      box-shadow: var(--fa-shadow-sm);\r\n      border: 1px solid rgba(59, 2, 112, 0.08);\r\n      position: relative;\r\n      overflow: hidden;\r\n    }\r\n    .fontono-about-compare-col-highlight {\r\n      border: 2px solid var(--fa-violet);\r\n      box-shadow: var(--fa-shadow-glow);\r\n    }\r\n    .fontono-about-compare-col-highlight::before {\r\n      content: 'Recommended';\r\n      position: absolute;\r\n      top: 16px; right: -30px;\r\n      background: var(--fa-lavender);\r\n      color: var(--fa-deep);\r\n      font-size: 0.8rem;\r\n      font-weight: 700;\r\n      padding: 6px 40px;\r\n      transform: rotate(45deg);\r\n    }\r\n    .fontono-about-compare-title {\r\n      font-size: 1.7rem;\r\n      font-weight: 850;\r\n      margin-bottom: 28px;\r\n      color: var(--fa-deep);\r\n    }\r\n    .fontono-about-compare-list {\r\n      list-style: none;\r\n    }\r\n    .fontono-about-compare-list li {\r\n      padding: 14px 0;\r\n      border-bottom: 1px solid rgba(0,0,0,0.04);\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 16px;\r\n      font-size: 1.05rem;\r\n      color: var(--fa-muted);\r\n    }\r\n    .fontono-about-compare-list li:last-child {\r\n      border-bottom: none;\r\n    }\r\n    .fontono-about-icon-x { color: #dc3545; font-size: 1.4rem; }\r\n    .fontono-about-icon-check {\r\n      color: var(--fa-violet);\r\n      background: rgba(111, 0, 255, 0.1);\r\n      width: 28px; height: 28px;\r\n      border-radius: 50%;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      font-size: 1rem;\r\n      font-weight: bold;\r\n    }\r\n\r\n    \/* Trust Strip *\/\r\n    .fontono-about-trust-wrap {\r\n      background: var(--fa-deep);\r\n      border-radius: var(--fa-radius-xl);\r\n      padding: 60px 40px;\r\n      text-align: center;\r\n      margin-top: -30px;\r\n      box-shadow: var(--fa-shadow-md);\r\n      position: relative;\r\n      overflow: hidden;\r\n    }\r\n    .fontono-about-trust-wrap::before {\r\n      content: '';\r\n      position: absolute;\r\n      top: -50%; left: -20%;\r\n      width: 500px; height: 500px;\r\n      background: radial-gradient(circle, rgba(111, 0, 255, 0.4) 0%, transparent 70%);\r\n      border-radius: 50%;\r\n      pointer-events: none;\r\n    }\r\n    .fontono-about-trust-grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\r\n      gap: 20px;\r\n      margin-top: 40px;\r\n      position: relative;\r\n      z-index: 2;\r\n    }\r\n    .fontono-about-trust-item {\r\n      background: rgba(255, 255, 255, 0.05);\r\n      backdrop-filter: blur(8px);\r\n      padding: 20px;\r\n      border-radius: var(--fa-radius-md);\r\n      text-align: center;\r\n      font-weight: 600;\r\n      color: var(--fa-white);\r\n      border: 1px solid rgba(255, 255, 255, 0.1);\r\n      transition: all 0.3s ease;\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: center;\r\n      gap: 10px;\r\n    }\r\n    .fontono-about-trust-item i {\r\n      font-size: 1.5rem;\r\n      color: var(--fa-lavender);\r\n    }\r\n    .fontono-about-trust-item:hover {\r\n      background: rgba(255, 255, 255, 0.1);\r\n      border-color: var(--fa-lavender);\r\n      transform: translateY(-3px);\r\n    }\r\n\r\n    \/* Final CTA *\/\r\n    .fontono-about-cta-box {\r\n      background: linear-gradient(135deg, rgba(233,179,251,0.2), rgba(111,0,255,0.05));\r\n      border-radius: var(--fa-radius-xl);\r\n      padding: 80px 40px;\r\n      text-align: center;\r\n      border: 1px solid rgba(233,179,251,0.4);\r\n      position: relative;\r\n    }\r\n\r\n    \/* Responsive Design *\/\r\n    @media (max-width: 1024px) {\r\n      .fontono-about-grid-4 { grid-template-columns: repeat(2, 1fr); }\r\n      .fontono-about-grid-3 { grid-template-columns: repeat(2, 1fr); }\r\n      .fontono-about-hero-layout { grid-template-columns: 1fr; gap: 50px; text-align: center; }\r\n      .fontono-about-hero-visual { transform: none; max-width: 600px; margin: 0 auto; }\r\n      .fontono-about-inner { padding: 0 24px; }\r\n      .fontono-about-beforeafter::after { display: none; }\r\n    }\r\n    @media (max-width: 768px) {\r\n      .fontono-about-grid-3, .fontono-about-grid-6, .fontono-about-compare { grid-template-columns: 1fr; }\r\n      .fontono-about-grid-4 { grid-template-columns: 1fr; }\r\n      .fontono-about-section { padding: 70px 0; }\r\n      .fontono-about-hero-heading { text-align: center; font-size: 2.8rem; }\r\n      .fontono-about-section-heading { text-align: center; font-size: 2.2rem; }\r\n      .fontono-about-subheading { text-align: center; }\r\n      .fontono-about-compare-col-highlight::before { right: -40px; }\r\n      .fontono-about-hero { padding: 100px 0 80px; }\r\n      \r\n      .fontono-about-beforeafter-wrapper {\r\n        display: grid;\r\n        grid-template-columns: 1fr;\r\n        gap: 40px;\r\n      }\r\n    }\r\n    @media (prefers-reduced-motion: reduce) {\r\n      .fontono-about-base-card, .fontono-about-primary-button, \r\n      .fontono-about-hero-visual, .fontono-about-hero-stack span { transition: none; animation: none; transform: none !important; }\r\n    }\r\n  <\/style>\r\n\r\n  <!-- HERO SECTION -->\r\n  <section class=\"fontono-about-hero\">\r\n    <div class=\"fontono-about-hero-bg\"><\/div>\r\n    <div class=\"fontono-about-inner\">\r\n      <div class=\"fontono-about-hero-layout\">\r\n        <div class=\"fontono-about-hero-content\">\r\n          <span class=\"fontono-about-badge\" style=\"background: rgba(255,255,255,0.1); color: var(--fa-lavender); border-color: rgba(255,255,255,0.2);\">Creative Text Generator<\/span>\r\n          <h1 class=\"fontono-about-hero-heading\">About Fontono<\/h1>\r\n          <p class=\"fontono-about-subheading\" style=\"color: rgba(255,255,255,0.85); font-size: 1.25rem;\">Fontono is a creative font generator built to help people turn plain text into stylish, expressive, copy-ready text for bios, captions, usernames, messages, gaming names, tattoo ideas, and creative projects.<\/p>\r\n          <div style=\"display: flex; gap: 16px; flex-wrap: wrap; justify-content: flex-start;\">\r\n            <a href=\"\/#font-generator\" class=\"fontono-about-primary-button\"><i class=\"bi bi-stars\"><\/i> Try Font Generator<\/a>\r\n            <a href=\"\/\" class=\"fontono-about-secondary-button\">Explore Styles <i class=\"bi bi-arrow-right\"><\/i><\/a>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"fontono-about-hero-visual\">\r\n          <div class=\"fontono-about-hero-stack\">\r\n            <span>\ud835\udcd5\ud835\udcf8\ud835\udcf7\ud835\udcfd\ud835\udcf8\ud835\udcf7\ud835\udcf8<\/span>\r\n            <span style=\"font-family: serif; font-weight: bold;\">\ud835\udc05\ud835\udc28\ud835\udc27\ud835\udc2d\ud835\udc28\ud835\udc27\ud835\udc28<\/span>\r\n            <span style=\"font-family: monospace;\">\ud835\udd09\ud835\udd2c\ud835\udd2b\ud835\udd31\ud835\udd2c\ud835\udd2b\ud835\udd2c<\/span>\r\n            <span style=\"letter-spacing: 4px;\">\uff26\uff2f\uff2e\uff34\uff2f\uff2e\uff2f<\/span>\r\n            <span>\ua9c1\u0f3aFontono\u0f3b\ua9c2<\/span>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- SECTION 2: WHAT FONTONO DOES -->\r\n  <section class=\"fontono-about-section fontono-about-section-white\">\r\n    <div class=\"fontono-about-inner\">\r\n      <div style=\"text-align: center; margin-bottom: 50px;\">\r\n        <span class=\"fontono-about-badge\">Features<\/span>\r\n        <h2 class=\"fontono-about-section-heading\">What Fontono Does<\/h2>\r\n        <p class=\"fontono-about-subheading\" style=\"margin: 0 auto;\">Fontono makes it easy to create stylish text without installing fonts, downloading software, or using complicated design tools. Users can type their words, explore different text styles, and copy the version that fits their mood or platform.<\/p>\r\n      <\/div>\r\n      <div class=\"fontono-about-grid-3\">\r\n        <div class=\"fontono-about-base-card\">\r\n          <i class=\"bi bi-magic fontono-about-icon-lg\"><\/i>\r\n          <h3 class=\"fontono-about-card-title\">Turns Plain Text Into Style<\/h3>\r\n          <p class=\"fontono-about-text-muted\">Fontono transforms normal words into fancy, aesthetic, bold, cursive, gothic, retro, and creative text styles.<\/p>\r\n        <\/div>\r\n        <div class=\"fontono-about-base-card\">\r\n          <i class=\"bi bi-emoji-smile fontono-about-icon-lg\"><\/i>\r\n          <h3 class=\"fontono-about-card-title\">Helps Users Express More<\/h3>\r\n          <p class=\"fontono-about-text-muted\">Different styles can make the same words feel soft, bold, playful, elegant, dark, or futuristic.<\/p>\r\n        <\/div>\r\n        <div class=\"fontono-about-base-card\">\r\n          <i class=\"bi bi-clipboard2-check fontono-about-icon-lg\"><\/i>\r\n          <h3 class=\"fontono-about-card-title\">Makes Copying Simple<\/h3>\r\n          <p class=\"fontono-about-text-muted\">Type, preview, copy, and paste your favorite text style wherever you need it \u2014 no extra steps required.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- SECTION 3: WHY WE BUILT FONTONO (split layout) -->\r\n  <section class=\"fontono-about-section fontono-about-section-light\">\r\n    <div class=\"fontono-about-inner\">\r\n      <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;\" class=\"fontono-about-beforeafter-wrapper\">\r\n        <div>\r\n          <span class=\"fontono-about-badge\">Our Story<\/span>\r\n          <h2 class=\"fontono-about-section-heading\">Why We Built Fontono<\/h2>\r\n          <p class=\"fontono-about-text-muted\" style=\"font-size: 1.15rem; margin-bottom: 24px;\">Most font tools are either too plain, too cluttered, or too hard to browse. Fontono was created to make stylish text generation feel cleaner, faster, and more enjoyable.<\/p>\r\n          <p class=\"fontono-about-text-muted\" style=\"font-size: 1.15rem;\">The idea is to give users a creative workspace where they can discover the right look for their words without wasting time formatting or scrolling blindly.<\/p>\r\n          <div style=\"margin-top: 36px;\">\r\n            <a href=\"#font-generator\" class=\"fontono-about-primary-button\">Start Creating <i class=\"bi bi-arrow-right\"><\/i><\/a>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"fontono-about-beforeafter\">\r\n          <div class=\"fontono-about-before\">\r\n            <strong style=\"color: var(--fa-muted); text-transform: uppercase; font-size: 0.85rem; letter-spacing: 1px;\">Before:<\/strong>\r\n            <div style=\"font-size: 1.8rem; font-weight: 500; margin-top: 8px; color: var(--fa-dark-text);\">Fontono<\/div>\r\n          <\/div>\r\n          <div class=\"fontono-about-after\">\r\n            <strong style=\"color: var(--fa-violet); text-transform: uppercase; font-size: 0.85rem; letter-spacing: 1px;\">After:<\/strong>\r\n            <div class=\"fontono-about-after-styles\">\r\n              <span>\ud835\udcd5\ud835\udcf8\ud835\udcf7\ud835\udcfd\ud835\udcf8\ud835\udcf7\ud835\udcf8<\/span>\r\n              <span>\ud835\udc05\ud835\udc28\ud835\udc27\ud835\udc2d\ud835\udc28\ud835\udc27\ud835\udc28<\/span>\r\n              <span>\ud835\udd09\ud835\udd2c\ud835\udd2b\ud835\udd31\ud835\udd2c\ud835\udd2b\ud835\udd2c<\/span>\r\n              <span>\uff26\uff2f\uff2e\uff34\uff2f\uff2e\uff2f<\/span>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- SECTION 4: WHO FONTONO IS FOR (6 cards) -->\r\n  <section class=\"fontono-about-section fontono-about-section-white\">\r\n    <div class=\"fontono-about-inner\">\r\n      <div style=\"text-align: center; margin-bottom: 50px;\">\r\n        <span class=\"fontono-about-badge\">Audience<\/span>\r\n        <h2 class=\"fontono-about-section-heading\">Who Fontono Is For<\/h2>\r\n        <p class=\"fontono-about-subheading\" style=\"margin: 0 auto;\">Fontono is designed for anyone who wants their text to look more personal, creative, or memorable.<\/p>\r\n      <\/div>\r\n      <div class=\"fontono-about-grid-6\">\r\n        <div class=\"fontono-about-base-card\">\r\n          <h3 class=\"fontono-about-card-title\"><i class=\"bi bi-phone fontono-about-icon-md\"><\/i> Social Media Creators<\/h3>\r\n          <p class=\"fontono-about-text-muted\">For Instagram bios, TikTok captions, Facebook posts, Pinterest pins, and profile names.<\/p>\r\n        <\/div>\r\n        <div class=\"fontono-about-base-card\">\r\n          <h3 class=\"fontono-about-card-title\"><i class=\"bi bi-controller fontono-about-icon-md\"><\/i> Gamers<\/h3>\r\n          <p class=\"fontono-about-text-muted\">For usernames, clan names, Discord names, and competitive gaming profiles.<\/p>\r\n        <\/div>\r\n        <div class=\"fontono-about-base-card\">\r\n          <h3 class=\"fontono-about-card-title\"><i class=\"bi bi-palette fontono-about-icon-md\"><\/i> Designers & Marketers<\/h3>\r\n          <p class=\"fontono-about-text-muted\">For quick text inspiration, logo ideas, slogans, campaign concepts, and branding.<\/p>\r\n        <\/div>\r\n        <div class=\"fontono-about-base-card\">\r\n          <h3 class=\"fontono-about-card-title\"><i class=\"bi bi-journal-text fontono-about-icon-md\"><\/i> Students & Users<\/h3>\r\n          <p class=\"fontono-about-text-muted\">For messages, notes, profiles, quotes, and fun personal expression every day.<\/p>\r\n        <\/div>\r\n        <div class=\"fontono-about-base-card\">\r\n          <h3 class=\"fontono-about-card-title\"><i class=\"bi bi-pen fontono-about-icon-md\"><\/i> Tattoo & Lettering<\/h3>\r\n          <p class=\"fontono-about-text-muted\">For previewing names, meaningful words, and quote-style lettering ideas.<\/p>\r\n        <\/div>\r\n        <div class=\"fontono-about-base-card\">\r\n          <h3 class=\"fontono-about-card-title\"><i class=\"bi bi-star fontono-about-icon-md\"><\/i> Small Brands<\/h3>\r\n          <p class=\"fontono-about-text-muted\">For testing stylish names, visual identity ideas, and short impactful brand text.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- SECTION 5: OUR DESIGN PHILOSOPHY (4 blocks) -->\r\n  <section class=\"fontono-about-section fontono-about-section-light\">\r\n    <div class=\"fontono-about-inner\">\r\n      <div style=\"text-align: center; margin-bottom: 50px;\">\r\n        <span class=\"fontono-about-badge\">Philosophy<\/span>\r\n        <h2 class=\"fontono-about-section-heading\">Our Design Philosophy<\/h2>\r\n        <p class=\"fontono-about-subheading\" style=\"margin: 0 auto;\">Fontono is built around a simple belief: text should be easy to style, easy to preview, and easy to use.<\/p>\r\n      <\/div>\r\n      <div class=\"fontono-about-grid-4\">\r\n        <div class=\"fontono-about-base-card\" style=\"text-align: center;\">\r\n          <i class=\"bi bi-lightning-charge fontono-about-icon-lg\"><\/i>\r\n          <h3 class=\"fontono-about-card-title\" style=\"justify-content: center;\">Simple First<\/h3>\r\n          <p class=\"fontono-about-text-muted\">The experience should feel clean and quick from the first click.<\/p>\r\n        <\/div>\r\n        <div class=\"fontono-about-base-card\" style=\"text-align: center;\">\r\n          <i class=\"bi bi-infinity fontono-about-icon-lg\"><\/i>\r\n          <h3 class=\"fontono-about-card-title\" style=\"justify-content: center;\">No Clutter<\/h3>\r\n          <p class=\"fontono-about-text-muted\">Users should see useful styles without feeling overwhelmed.<\/p>\r\n        <\/div>\r\n        <div class=\"fontono-about-base-card\" style=\"text-align: center;\">\r\n          <i class=\"bi bi-globe fontono-about-icon-lg\"><\/i>\r\n          <h3 class=\"fontono-about-card-title\" style=\"justify-content: center;\">Real Platforms<\/h3>\r\n          <p class=\"fontono-about-text-muted\">Generated text is built to be pasted where people already communicate.<\/p>\r\n        <\/div>\r\n        <div class=\"fontono-about-base-card\" style=\"text-align: center;\">\r\n          <i class=\"bi bi-stars fontono-about-icon-lg\"><\/i>\r\n          <h3 class=\"fontono-about-card-title\" style=\"justify-content: center;\">Mood-Based<\/h3>\r\n          <p class=\"fontono-about-text-muted\">Choosing a font is not only about appearance. It is also about feeling.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- SECTION 6: WHAT MAKES FONTONO DIFFERENT (comparison) -->\r\n  <section class=\"fontono-about-section fontono-about-section-white\">\r\n    <div class=\"fontono-about-inner\">\r\n      <div style=\"text-align: center; margin-bottom: 40px;\">\r\n        <h2 class=\"fontono-about-section-heading\">What Makes Fontono Different?<\/h2>\r\n        <p class=\"fontono-about-subheading\" style=\"margin: 0 auto;\">Fontono is more than a basic font generator. It is a growing creative text platform designed around speed, style, and everyday use.<\/p>\r\n      <\/div>\r\n      <div class=\"fontono-about-compare\">\r\n        <div class=\"fontono-about-compare-col\">\r\n          <div class=\"fontono-about-compare-title\">Basic Font Tools<\/div>\r\n          <ul class=\"fontono-about-compare-list\">\r\n            <li><i class=\"bi bi-x-circle fontono-about-icon-x\"><\/i> Plain output lists<\/li>\r\n            <li><i class=\"bi bi-x-circle fontono-about-icon-x\"><\/i> Cluttered layouts<\/li>\r\n            <li><i class=\"bi bi-x-circle fontono-about-icon-x\"><\/i> Hard to browse styles<\/li>\r\n            <li><i class=\"bi bi-x-circle fontono-about-icon-x\"><\/i> Little preview context<\/li>\r\n            <li><i class=\"bi bi-x-circle fontono-about-icon-x\"><\/i> Generic user experience<\/li>\r\n          <\/ul>\r\n        <\/div>\r\n        <div class=\"fontono-about-compare-col fontono-about-compare-col-highlight\">\r\n          <div class=\"fontono-about-compare-title\" style=\"color: var(--fa-violet);\">Fontono<\/div>\r\n          <ul class=\"fontono-about-compare-list\">\r\n            <li><span class=\"fontono-about-icon-check\"><i class=\"bi bi-check-lg\"><\/i><\/span> Clean creative interface<\/li>\r\n            <li><span class=\"fontono-about-icon-check\"><i class=\"bi bi-check-lg\"><\/i><\/span> Mood-based font discovery<\/li>\r\n            <li><span class=\"fontono-about-icon-check\"><i class=\"bi bi-check-lg\"><\/i><\/span> Copy-ready stylish text<\/li>\r\n            <li><span class=\"fontono-about-icon-check\"><i class=\"bi bi-check-lg\"><\/i><\/span> Platform-friendly previews<\/li>\r\n            <li><span class=\"fontono-about-icon-check\"><i class=\"bi bi-check-lg\"><\/i><\/span> Large and organized library<\/li>\r\n            <li><span class=\"fontono-about-icon-check\"><i class=\"bi bi-check-lg\"><\/i><\/span> Mobile-friendly experience<\/li>\r\n          <\/ul>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- SECTION 7: VALUES & SECTION 8: TRUST -->\r\n  <section class=\"fontono-about-section fontono-about-section-light\">\r\n    <div class=\"fontono-about-inner\">\r\n      <div style=\"text-align: center; margin-bottom: 50px;\">\r\n        <span class=\"fontono-about-badge\">Core Values<\/span>\r\n        <h2 class=\"fontono-about-section-heading\">Our Values<\/h2>\r\n      <\/div>\r\n      <div class=\"fontono-about-grid-6\" style=\"margin-bottom: 100px;\">\r\n        <div class=\"fontono-about-base-card\"><h3 class=\"fontono-about-card-title\"><i class=\"bi bi-palette2 fontono-about-icon-sm\"><\/i> Creativity<\/h3><p class=\"fontono-about-text-muted\">We help users make their words feel more personal and expressive.<\/p><\/div>\r\n        <div class=\"fontono-about-base-card\"><h3 class=\"fontono-about-card-title\"><i class=\"bi bi-peace fontono-about-icon-sm\"><\/i> Simplicity<\/h3><p class=\"fontono-about-text-muted\">We keep the experience clear, fast, and easy to use.<\/p><\/div>\r\n        <div class=\"fontono-about-base-card\"><h3 class=\"fontono-about-card-title\"><i class=\"bi bi-globe2 fontono-about-icon-sm\"><\/i> Accessibility<\/h3><p class=\"fontono-about-text-muted\">Fontono works smoothly for everyday users, not only designers.<\/p><\/div>\r\n        <div class=\"fontono-about-base-card\"><h3 class=\"fontono-about-card-title\"><i class=\"bi bi-lightning fontono-about-icon-sm\"><\/i> Speed<\/h3><p class=\"fontono-about-text-muted\">Users should be able to generate and copy stylish text quickly.<\/p><\/div>\r\n        <div class=\"fontono-about-base-card\"><h3 class=\"fontono-about-card-title\"><i class=\"bi bi-pin-angle fontono-about-icon-sm\"><\/i> Practical Use<\/h3><p class=\"fontono-about-text-muted\">Every style should be useful for real bios, captions, and projects.<\/p><\/div>\r\n        <div class=\"fontono-about-base-card\"><h3 class=\"fontono-about-card-title\"><i class=\"bi bi-graph-up-arrow fontono-about-icon-sm\"><\/i> Growth<\/h3><p class=\"fontono-about-text-muted\">Built to grow with more styles, previews, and helpful tools.<\/p><\/div>\r\n      <\/div>\r\n\r\n      <!-- Trust Strip embedded to break layout flow beautifully -->\r\n      <div class=\"fontono-about-trust-wrap\">\r\n        <h2 class=\"fontono-about-section-heading\" style=\"color: var(--fa-white); margin-bottom: 12px;\">A Simple, Transparent Font Generator<\/h2>\r\n        <p style=\"color: rgba(255,255,255,0.85); font-size: 1.1rem; max-width: 700px; margin: 0 auto;\">Fontono does not require users to create an account just to generate stylish text. The tool is designed to be easy to access, understand, and use from any device.<\/p>\r\n        \r\n        <div class=\"fontono-about-trust-grid\">\r\n          <div class=\"fontono-about-trust-item\"><i class=\"bi bi-check-circle-fill\"><\/i> No signup needed<\/div>\r\n          <div class=\"fontono-about-trust-item\"><i class=\"bi bi-clipboard-check-fill\"><\/i> Fast copy-paste<\/div>\r\n          <div class=\"fontono-about-trust-item\"><i class=\"bi bi-phone-vibrate-fill\"><\/i> Mobile-friendly<\/div>\r\n          <div class=\"fontono-about-trust-item\"><i class=\"bi bi-brush-fill\"><\/i> For everyday use<\/div>\r\n          <div class=\"fontono-about-trust-item\"><i class=\"bi bi-gear-fill\"><\/i> No complex setup<\/div>\r\n          <div class=\"fontono-about-trust-item\"><i class=\"bi bi-stars\"><\/i> Clear interface<\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- SECTION 9: FUTURE VISION (4 cards) -->\r\n  <section class=\"fontono-about-section fontono-about-section-white\">\r\n    <div class=\"fontono-about-inner\">\r\n      <div style=\"text-align: center; margin-bottom: 50px;\">\r\n        <span class=\"fontono-about-badge\">Roadmap<\/span>\r\n        <h2 class=\"fontono-about-section-heading\">Where Fontono Is Going<\/h2>\r\n        <p class=\"fontono-about-subheading\" style=\"margin: 0 auto;\">Fontono is growing into a complete creative text toolkit. We aim to keep improving the font generator experience with better style discovery.<\/p>\r\n      <\/div>\r\n      <div class=\"fontono-about-grid-4\">\r\n        <div class=\"fontono-about-base-card\" style=\"border-top: 4px solid var(--fa-lavender);\">\r\n          <i class=\"bi bi-fonts fontono-about-icon-lg\"><\/i>\r\n          <h3 class=\"fontono-about-card-title\">More Font Styles<\/h3>\r\n          <p class=\"fontono-about-text-muted\">Expanding the style library with more creative text options.<\/p>\r\n        <\/div>\r\n        <div class=\"fontono-about-base-card\" style=\"border-top: 4px solid var(--fa-violet);\">\r\n          <i class=\"bi bi-eye fontono-about-icon-lg\"><\/i>\r\n          <h3 class=\"fontono-about-card-title\">Better Previews<\/h3>\r\n          <p class=\"fontono-about-text-muted\">Helping users see how text may look in bios, usernames, and designs.<\/p>\r\n        <\/div>\r\n        <div class=\"fontono-about-base-card\" style=\"border-top: 4px solid var(--fa-lavender);\">\r\n          <i class=\"bi bi-book fontono-about-icon-lg\"><\/i>\r\n          <h3 class=\"fontono-about-card-title\">Helpful Guides<\/h3>\r\n          <p class=\"fontono-about-text-muted\">Publishing simple guides about stylish text, Unicode, and trends.<\/p>\r\n        <\/div>\r\n        <div class=\"fontono-about-base-card\" style=\"border-top: 4px solid var(--fa-violet);\">\r\n          <i class=\"bi bi-folder-symlink fontono-about-icon-lg\"><\/i>\r\n          <h3 class=\"fontono-about-card-title\">Smarter Organization<\/h3>\r\n          <p class=\"fontono-about-text-muted\">Making it easier to find fonts by mood, purpose, platform, or theme.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- SECTION 10: FINAL CTA -->\r\n  <section class=\"fontono-about-section fontono-about-section-light\" style=\"padding-bottom: 130px;\">\r\n    <div class=\"fontono-about-inner\">\r\n      <div class=\"fontono-about-cta-box\">\r\n        <h2 class=\"fontono-about-section-heading\" style=\"margin-bottom: 16px;\">Ready to Create Stylish Text?<\/h2>\r\n        <p class=\"fontono-about-subheading\" style=\"margin: 0 auto 36px; max-width: 600px; color: var(--fa-deep);\">Use Fontono to turn simple words into beautiful, creative, and copy-ready text for your next bio, caption, username, message, or project.<\/p>\r\n        <div style=\"display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;\">\r\n          <a href=\"\/#font-generator\" class=\"fontono-about-primary-button\"><i class=\"bi bi-stars\"><\/i> Try Font Generator<\/a>\r\n          <a href=\"\/\" class=\"fontono-about-secondary-button-dark fontono-about-secondary-button\">Explore Font Styles <i class=\"bi bi-arrow-right\"><\/i><\/a>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n<\/div><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-homepage.php","meta":{"footnotes":""},"class_list":["post-5274","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/fontono.com\/wp-json\/wp\/v2\/pages\/5274","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fontono.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fontono.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fontono.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/fontono.com\/wp-json\/wp\/v2\/comments?post=5274"}],"version-history":[{"count":4,"href":"https:\/\/fontono.com\/wp-json\/wp\/v2\/pages\/5274\/revisions"}],"predecessor-version":[{"id":5278,"href":"https:\/\/fontono.com\/wp-json\/wp\/v2\/pages\/5274\/revisions\/5278"}],"wp:attachment":[{"href":"https:\/\/fontono.com\/wp-json\/wp\/v2\/media?parent=5274"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}