{"id":5725,"date":"2026-06-04T05:15:29","date_gmt":"2026-06-04T05:15:29","guid":{"rendered":"https:\/\/fonttor.com\/fantasy\/"},"modified":"2026-06-04T05:15:29","modified_gmt":"2026-06-04T05:15:29","slug":"fantasy","status":"publish","type":"page","link":"https:\/\/fonttor.com\/fantasy\/","title":{"rendered":"Fantasy Font Generator: Create Unique and Magical Text Styles"},"content":{"rendered":"<style type=\"text\/css\">\n.tc-wp-island {\n  width: 100%;\n  max-width: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n  display: flow-root;\n  isolation: isolate;\n  position: relative;\n}\n.tc-wp-island > * {\n  min-width: 0;\n}\n.tc-wp-island *,\n.tc-wp-island *::before,\n.tc-wp-island *::after {\n  box-sizing: border-box;\n}\n.tc-wp-island img,\n.tc-wp-island video,\n.tc-wp-island svg,\n.tc-wp-island iframe {\n  max-width: 100%;\n  height: auto;\n}\n.tc-wp-island .tc-wp-tool {\n  max-width: 100%;\n  min-width: 0;\n}\n.tc-wp-island .tc-wp-tool-html,\n.tc-wp-island .tc-wp-tool-content,\n.tc-wp-island .tc-wp-other {\n  max-width: 100%;\n  min-width: 0;\n  overflow-wrap: anywhere;\n  word-break: break-word;\n}\n\/* Keep tool in post content flow \u2014 not overlapping theme header \/ hero band *\/\n.tc-wp-island {\n  clear: both;\n  z-index: 1;\n}\n.tc-wp-island .tc-wp-tool {\n  position: relative;\n  z-index: 0;\n  clear: both;\n  margin-top: 0;\n  margin-bottom: 1.25rem;\n}\n.tc-wp-island .tc-wp-tool-html {\n  position: relative;\n  z-index: 0;\n  clear: both;\n  contain: layout;\n}\n.tc-wp-island .tc-wp-tool-html > *:first-child {\n  position: relative !important;\n  top: auto !important;\n  left: auto !important;\n  right: auto !important;\n  margin-top: 0 !important;\n  width: 100%;\n  max-width: 100%;\n  box-sizing: border-box;\n}\nbody:has(.tc-wp-island) #main-header,\nbody:has(.tc-wp-island) header.site-header,\nbody:has(.tc-wp-island) .site-header,\nbody:has(.tc-wp-island) #header,\nbody:has(.tc-wp-island) .et-fixed-header,\nbody:has(.tc-wp-island) .elementor-location-header {\n  z-index: 200;\n}\n\/* Space between WP Coder tool + content shortcodes on publish\/draft pages *\/\n.tc-wp-island .tc-wp-tool-html + .tc-wp-tool-content {\n  margin-top: 20px;\n}\n.tc-wp-island .tc-wp-bcd-codes {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n}\n\/* Full-width: hide theme sidebar when a ToolsChecker island is present *\/\nbody:has(.tc-wp-island) #sidebar,\nbody:has(.tc-wp-island) .sidebar,\nbody:has(.tc-wp-island) #secondary,\nbody:has(.tc-wp-island) .widget-area,\nbody:has(.tc-wp-island) aside.sidebar,\nbody:has(.tc-wp-island) #right-sidebar,\nbody:has(.tc-wp-island) #left-sidebar,\nbody:has(.tc-wp-island) .sidebar-primary,\nbody:has(.tc-wp-island) .sidebar-secondary,\nbody:has(.tc-wp-island) .ast-sidebar,\nbody:has(.tc-wp-island) .site-sidebar {\n  display: none !important;\n}\n\/* Copygen: hide default page title\/breadcrumb band \u2014 tool pages use template-homepage like category *\/\nbody:has(.tc-wp-island) section.page_header_default,\nbody:has(.tc-wp-island) .page_header_default {\n  display: none !important;\n}\n@media (min-width: 981px) {\n  body:has(.tc-wp-island) #left-area,\n  body:has(.tc-wp-island) #primary,\n  body:has(.tc-wp-island) #content-area,\n  body:has(.tc-wp-island) #content-area .container,\n  body:has(.tc-wp-island) .content-area,\n  body:has(.tc-wp-island) main.site-main,\n  body:has(.tc-wp-island) .site-content .content-area {\n    width: 100% !important;\n    max-width: 100% !important;\n    float: none !important;\n    padding-right: 0 !important;\n    padding-left: 0 !important;\n  }\n  body:has(.tc-wp-island) #main-content .container:before {\n    display: none !important;\n  }\n}\n\/* Tool pages: keep theme H1 readable \u2014 smaller type, full content width, 1\u20132 lines *\/\nbody:has(.tc-wp-island) .fontib-v2-hero-inner {\n  width: min(100%, calc(100vw - 40px)) !important;\n  max-width: 1320px !important;\n}\nbody:has(.tc-wp-island) .fontib-v2-title,\nbody:has(.tc-wp-island) #left-area > .entry-title,\nbody:has(.tc-wp-island) .entry-title h1,\nbody:has(.tc-wp-island) h1.entry-title,\nbody:has(.tc-wp-island) .page-title,\nbody:has(.tc-wp-island) .et_pb_title_container h1 {\n  max-width: 100% !important;\n  width: 100%;\n  font-size: clamp(24px, 2.6vw, 38px) !important;\n  line-height: 1.2 !important;\n  letter-spacing: -0.01em;\n}\n<\/style>\n<div class=\"tc-wp-island\">\n<section class=\"tc-wp-tool\" data-tool-index=\"1\">\n<div class=\"tc-wp-tool-html\"><div class=\"ffg-tool\">\r\n  <style>\r\n    .ffg-tool,\r\n    .ffg-tool * {\r\n      box-sizing: border-box;\r\n    }\r\n\r\n    .ffg-tool {\r\n      width: 100%;\r\n      max-width: 100%;\r\n      overflow-x: hidden;\r\n      border-radius: 0;\r\n      padding: 72px 20px;\r\n      background:\r\n        radial-gradient(circle at 18% 12%, rgba(138, 43, 226, 0.35), transparent 28%),\r\n        radial-gradient(circle at 85% 18%, rgba(0, 191, 255, 0.3), transparent 30%),\r\n        radial-gradient(circle at 50% 105%, rgba(255, 215, 0, 0.25), transparent 36%),\r\n        linear-gradient(135deg, #080612 0%, #120e2b 38%, #0d1e30 68%, #1f1124 100%);\r\n      color: #e2e8f0;\r\n      font-family: Georgia, \"Times New Roman\", serif;\r\n    }\r\n\r\n    .ffg-tool .ffg-container {\r\n      width: 100%;\r\n      max-width: 1200px;\r\n      margin: 0 auto;\r\n    }\r\n\r\n    .ffg-tool .ffg-hero {\r\n      text-align: center;\r\n      margin: 0 auto 34px;\r\n      max-width: 850px;\r\n    }\r\n\r\n    .ffg-tool .ffg-title {\r\n      margin: 0;\r\n      color: #f8fafc;\r\n      font-size: 54px;\r\n      line-height: 1.05;\r\n      letter-spacing: 1px;\r\n      text-transform: uppercase;\r\n      text-shadow:\r\n        0 0 10px rgba(255, 215, 0, 0.6),\r\n        0 0 24px rgba(138, 43, 226, 0.5),\r\n        0 0 48px rgba(0, 191, 255, 0.4);\r\n    }\r\n\r\n    .ffg-tool .ffg-subtitle {\r\n      margin: 18px auto 0;\r\n      color: rgba(226, 232, 240, 0.85);\r\n      font-family: Arial, sans-serif;\r\n      font-size: 17px;\r\n      line-height: 1.7;\r\n      max-width: 720px;\r\n    }\r\n\r\n    .ffg-tool .ffg-panel {\r\n      width: 100%;\r\n      border: 1px solid rgba(255, 215, 0, 0.25);\r\n      border-radius: 28px;\r\n      padding: 24px;\r\n      margin-bottom: 30px;\r\n      background: rgba(15, 12, 28, 0.65);\r\n      box-shadow:\r\n        0 28px 90px rgba(0, 0, 0, 0.6),\r\n        inset 0 1px 0 rgba(255, 255, 255, 0.08);\r\n      backdrop-filter: blur(18px);\r\n    }\r\n\r\n    .ffg-tool .ffg-input-row {\r\n      display: grid;\r\n      grid-template-columns: 1fr auto;\r\n      gap: 14px;\r\n      align-items: center;\r\n      width: 100%;\r\n    }\r\n\r\n    .ffg-tool .ffg-input {\r\n      width: 100%;\r\n      max-width: 100%;\r\n      min-width: 0;\r\n      border: 1px solid rgba(138, 43, 226, 0.4);\r\n      border-radius: 18px;\r\n      outline: none;\r\n      padding: 18px 20px;\r\n      background: rgba(8, 6, 18, 0.8);\r\n      color: #f8fafc;\r\n      font-family: Arial, sans-serif;\r\n      font-size: 18px;\r\n      line-height: 1.4;\r\n      box-shadow: inset 0 0 22px rgba(138, 43, 226, 0.15);\r\n      transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;\r\n    }\r\n\r\n    .ffg-tool .ffg-input::placeholder {\r\n      color: rgba(226, 232, 240, 0.4);\r\n    }\r\n\r\n    .ffg-tool .ffg-input:focus {\r\n      border-color: rgba(255, 215, 0, 0.8);\r\n      background: rgba(12, 10, 24, 0.9);\r\n      box-shadow:\r\n        0 0 0 4px rgba(255, 215, 0, 0.15),\r\n        0 0 34px rgba(138, 43, 226, 0.4),\r\n        inset 0 0 18px rgba(0, 191, 255, 0.2);\r\n    }\r\n\r\n    .ffg-tool .ffg-btn {\r\n      border: 1px solid rgba(255, 215, 0, 0.5);\r\n      border-radius: 16px;\r\n      cursor: pointer;\r\n      padding: 16px 22px;\r\n      background: linear-gradient(135deg, #d4af37, #8b6508);\r\n      color: #0f0a00;\r\n      font-family: Arial, sans-serif;\r\n      font-size: 15px;\r\n      font-weight: 800;\r\n      letter-spacing: 0.3px;\r\n      box-shadow: 0 14px 34px rgba(212, 175, 55, 0.3);\r\n      transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;\r\n      white-space: nowrap;\r\n    }\r\n\r\n    .ffg-tool .ffg-btn:hover {\r\n      transform: translateY(-2px);\r\n      filter: brightness(1.15);\r\n      box-shadow: 0 18px 44px rgba(212, 175, 55, 0.45);\r\n    }\r\n\r\n    .ffg-tool .ffg-grid {\r\n      display: grid;\r\n      width: 100%;\r\n      max-width: 100%;\r\n      gap: 22px;\r\n    }\r\n\r\n    .ffg-tool .ffg-card {\r\n      width: 100%;\r\n      max-width: 100%;\r\n      min-width: 0;\r\n      overflow: hidden;\r\n      border: 1px solid rgba(138, 43, 226, 0.3);\r\n      border-radius: 24px;\r\n      padding: 20px;\r\n      background:\r\n        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)),\r\n        rgba(12, 10, 24, 0.75);\r\n      box-shadow: 0 18px 55px rgba(0, 0, 0, 0.5);\r\n      backdrop-filter: blur(16px);\r\n      animation: ffgFadeUp 0.45s ease both;\r\n      transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;\r\n    }\r\n\r\n    .ffg-tool .ffg-card:hover {\r\n      transform: translateY(-6px);\r\n      border-color: rgba(255, 215, 0, 0.6);\r\n      box-shadow:\r\n        0 24px 70px rgba(0, 0, 0, 0.6),\r\n        0 0 34px rgba(138, 43, 226, 0.25);\r\n    }\r\n\r\n    .ffg-tool .ffg-style-name {\r\n      margin: 0 0 14px;\r\n      color: rgba(255, 215, 0, 0.9);\r\n      font-family: Arial, sans-serif;\r\n      font-size: 14px;\r\n      font-weight: 800;\r\n      letter-spacing: 1px;\r\n      text-transform: uppercase;\r\n      overflow-wrap: anywhere;\r\n      word-break: break-word;\r\n    }\r\n\r\n    .ffg-tool .ffg-preview {\r\n      width: 100%;\r\n      max-width: 100%;\r\n      min-height: 132px;\r\n      max-height: 180px;\r\n      overflow-y: auto;\r\n      overflow-x: hidden;\r\n      border: 1px solid rgba(0, 191, 255, 0.2);\r\n      border-radius: 18px;\r\n      padding: 18px;\r\n      margin-bottom: 16px;\r\n      background:\r\n        radial-gradient(circle at top left, rgba(138, 43, 226, 0.15), transparent 60%),\r\n        rgba(5, 4, 10, 0.8);\r\n      color: #f8fafc;\r\n      line-height: 1.35;\r\n      overflow-wrap: anywhere;\r\n      word-break: break-word;\r\n      white-space: normal;\r\n    }\r\n\r\n    .ffg-tool .ffg-preview::-webkit-scrollbar {\r\n      width: 8px;\r\n    }\r\n\r\n    .ffg-tool .ffg-preview::-webkit-scrollbar-track {\r\n      background: rgba(255, 255, 255, 0.05);\r\n      border-radius: 999px;\r\n    }\r\n\r\n    .ffg-tool .ffg-preview::-webkit-scrollbar-thumb {\r\n      background: linear-gradient(#8a2be2, #00bfff);\r\n      border-radius: 999px;\r\n    }\r\n\r\n    .ffg-tool .ffg-copy {\r\n      width: 100%;\r\n      max-width: 100%;\r\n      border: 1px solid rgba(138, 43, 226, 0.4);\r\n      border-radius: 15px;\r\n      cursor: pointer;\r\n      padding: 13px 16px;\r\n      background: rgba(138, 43, 226, 0.15);\r\n      color: #f8fafc;\r\n      font-family: Arial, sans-serif;\r\n      font-size: 14px;\r\n      font-weight: 800;\r\n      transition: transform 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;\r\n    }\r\n\r\n    .ffg-tool .ffg-copy:hover {\r\n      transform: translateY(-2px);\r\n      background: rgba(138, 43, 226, 0.3);\r\n      box-shadow: 0 12px 30px rgba(138, 43, 226, 0.3);\r\n    }\r\n\r\n    .ffg-tool .ffg-load-wrap {\r\n      display: flex;\r\n      justify-content: center;\r\n      width: 100%;\r\n      margin-top: 30px;\r\n    }\r\n\r\n    .ffg-tool .ffg-load {\r\n      min-width: 190px;\r\n    }\r\n\r\n    .ffg-tool .ffg-hidden {\r\n      display: none;\r\n    }\r\n\r\n    \/* 50 Unique Fantasy Styles *\/\r\n    .ffg-tool .ffg-style-1 { font-family: Georgia, serif; font-size: 32px; font-weight: 900; color: #ffd700; text-shadow: 0 0 12px rgba(255, 215, 0, 0.6); letter-spacing: 1px; }\r\n    .ffg-tool .ffg-style-2 { font-family: \"Times New Roman\", serif; font-size: 30px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #e0e0e0; text-shadow: 2px 2px 0 #4a00e0, 0 0 15px #8e2de2; }\r\n    .ffg-tool .ffg-style-3 { font-family: Garamond, serif; font-size: 34px; font-style: italic; color: #00ffff; text-shadow: 0 0 15px rgba(0, 255, 255, 0.8); letter-spacing: 1px; }\r\n    .ffg-tool .ffg-style-4 { font-family: Impact, fantasy; font-size: 32px; letter-spacing: 3px; color: #ff4500; -webkit-text-stroke: 1px #800000; text-shadow: 3px 3px 0 #3e0000; }\r\n    .ffg-tool .ffg-style-5 { font-family: \"Courier New\", monospace; font-size: 26px; font-weight: 900; color: #98fb98; text-shadow: 0 0 10px #2e8b57; }\r\n    .ffg-tool .ffg-style-6 { font-family: Palatino, serif; font-size: 33px; font-weight: 700; font-variant: small-caps; color: #dda0dd; text-shadow: 0 0 20px #8b008b; }\r\n    .ffg-tool .ffg-style-7 { font-family: Arial Black, sans-serif; font-size: 28px; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.5px #ffd700; text-shadow: 0 0 15px rgba(255, 215, 0, 0.4); }\r\n    .ffg-tool .ffg-style-8 { font-family: Georgia, serif; font-size: 30px; font-weight: 900; color: #1e90ff; text-shadow: 0 2px 0 #fff, 0 0 20px #0000ff; }\r\n    .ffg-tool .ffg-style-9 { font-family: \"Trebuchet MS\", sans-serif; font-size: 28px; font-weight: 900; letter-spacing: 4px; text-transform: uppercase; color: #c0c0c0; text-shadow: 2px 2px 0 #000; }\r\n    .ffg-tool .ffg-style-10 { font-family: Garamond, serif; font-size: 36px; color: #ff69b4; text-shadow: 0 -2px 0 #8b0000, 0 0 25px #ff1493; }\r\n    .ffg-tool .ffg-style-11 { font-family: Verdana, sans-serif; font-size: 26px; font-weight: 800; color: #adff2f; text-shadow: 0 0 15px #006400; letter-spacing: 1px; }\r\n    .ffg-tool .ffg-style-12 { font-family: Georgia, serif; font-size: 31px; font-weight: 700; transform: skew(-8deg); color: #ffebcd; text-shadow: 2px 2px 0 #8b4513; }\r\n    .ffg-tool .ffg-style-13 { font-family: \"Courier New\", monospace; font-size: 28px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #ffb6c1; text-shadow: 0 0 8px #dc143c; }\r\n    .ffg-tool .ffg-style-14 { font-family: Impact, fantasy; font-size: 34px; letter-spacing: 2px; color: #f5f5f5; text-shadow: -2px 0 #000, 2px 0 #4682b4, 0 0 20px #87ceeb; }\r\n    .ffg-tool .ffg-style-15 { font-family: \"Times New Roman\", serif; font-size: 35px; font-weight: 900; color: #ff7f50; text-shadow: 0 0 15px #ff4500, 0 0 30px #8b0000; }\r\n    .ffg-tool .ffg-style-16 { font-family: Arial, sans-serif; font-size: 28px; font-weight: 900; color: #e6e6fa; text-shadow: 1px 1px 0 #000, 3px 3px 0 #4b0082; }\r\n    .ffg-tool .ffg-style-17 { font-family: Palatino, serif; font-size: 30px; letter-spacing: 5px; text-transform: uppercase; color: #00fa9a; text-shadow: 0 0 20px #006400; }\r\n    .ffg-tool .ffg-style-18 { font-family: Georgia, serif; font-size: 32px; font-weight: 900; color: #ffd700; -webkit-text-stroke: 1px #000; text-shadow: 3px 3px 0 #8b4513; }\r\n    .ffg-tool .ffg-style-19 { font-family: \"Lucida Console\", monospace; font-size: 24px; letter-spacing: 2px; color: #00ffff; text-shadow: 0 0 10px #008080; }\r\n    .ffg-tool .ffg-style-20 { font-family: Garamond, serif; font-size: 33px; font-weight: 700; text-transform: lowercase; color: #f0e68c; text-shadow: 0 3px 0 #556b2f, 0 0 15px #bdb76b; }\r\n    .ffg-tool .ffg-style-21 { font-family: Arial Black, sans-serif; font-size: 29px; text-transform: uppercase; color: #8a2be2; -webkit-text-stroke: 1px #fff; text-shadow: 0 0 20px #4b0082; }\r\n    .ffg-tool .ffg-style-22 { font-family: \"Times New Roman\", serif; font-size: 36px; font-weight: 900; letter-spacing: -1px; color: #ff00ff; text-shadow: 0 0 10px #8b008b, 4px 4px 0 #4b0082; }\r\n    .ffg-tool .ffg-style-23 { font-family: \"Trebuchet MS\", sans-serif; font-size: 28px; font-weight: 700; color: #40e0d0; text-shadow: 0 0 10px #008b8b, 0 0 25px #00ced1; }\r\n    .ffg-tool .ffg-style-24 { font-family: Georgia, serif; font-size: 31px; font-style: italic; letter-spacing: 2px; color: #fffafa; text-shadow: 2px 0 0 #cd5c5c, 0 0 20px #ff0000; }\r\n    .ffg-tool .ffg-style-25 { font-family: Impact, fantasy; font-size: 30px; letter-spacing: 3px; color: #ffd700; text-shadow: 0 4px 0 #8b6508, 0 0 15px #daa520; }\r\n    .ffg-tool .ffg-style-26 { font-family: Verdana, sans-serif; font-size: 25px; font-weight: 900; letter-spacing: 1px; color: #f8f8ff; text-shadow: 0 0 5px #000, 0 0 15px #6a5acd; }\r\n    .ffg-tool .ffg-style-27 { font-family: Palatino, serif; font-size: 30px; font-weight: 900; text-transform: uppercase; color: #7fffd4; text-shadow: -1px -1px 0 #000, 2px 2px 0 #20b2aa; }\r\n    .ffg-tool .ffg-style-28 { font-family: \"Courier New\", monospace; font-size: 26px; font-weight: 800; color: #ff4500; text-shadow: 0 0 20px #8b0000; }\r\n    .ffg-tool .ffg-style-29 { font-family: Garamond, serif; font-size: 35px; letter-spacing: 1px; color: #fafad2; text-shadow: 0 0 10px #daa520, 0 6px 15px #000; }\r\n    .ffg-tool .ffg-style-30 { font-family: Arial Black, sans-serif; font-size: 28px; letter-spacing: 2px; color: #191970; -webkit-text-stroke: 1px #00bfff; text-shadow: 0 0 25px #0000ff; }\r\n    .ffg-tool .ffg-style-31 { font-family: Georgia, serif; font-size: 32px; font-weight: 700; color: #ffb6c1; text-shadow: 0 0 12px #ff69b4, -3px 3px 0 #8b008b; }\r\n    .ffg-tool .ffg-style-32 { font-family: \"Times New Roman\", serif; font-size: 31px; font-weight: 900; letter-spacing: 3px; color: #e0ffff; text-shadow: 0 0 5px #fff, 0 0 20px #00ced1; }\r\n    .ffg-tool .ffg-style-33 { font-family: \"Trebuchet MS\", sans-serif; font-size: 27px; font-weight: 900; text-transform: uppercase; color: #ffe4b5; text-shadow: 0 0 15px #ff8c00, 3px 0 0 #8b4500; }\r\n    .ffg-tool .ffg-style-34 { font-family: Palatino, serif; font-size: 36px; letter-spacing: 0.5px; color: #98fb98; text-shadow: 0 -1px 0 #fff, 0 0 25px #008000; }\r\n    .ffg-tool .ffg-style-35 { font-family: Impact, fantasy; font-size: 33px; letter-spacing: 1px; text-transform: uppercase; color: #fff; text-shadow: 0 0 10px #8a2be2, 0 0 30px #4b0082; }\r\n    .ffg-tool .ffg-style-36 { font-family: Arial, sans-serif; font-size: 28px; font-weight: 900; color: #ffdead; text-shadow: 2px 2px 0 #8b4513, 0 0 20px #cd853f; }\r\n    .ffg-tool .ffg-style-37 { font-family: Georgia, serif; font-size: 31px; font-weight: 900; letter-spacing: 2px; color: #f0f8ff; text-shadow: 0 0 8px #4169e1, 0 0 35px #0000cd; }\r\n    .ffg-tool .ffg-style-38 { font-family: \"Lucida Console\", monospace; font-size: 25px; color: #ffd700; text-shadow: 1px 0 #ff8c00, -1px 0 #b8860b, 0 0 15px #ffff00; }\r\n    .ffg-tool .ffg-style-39 { font-family: Garamond, serif; font-size: 34px; font-weight: 900; font-variant: small-caps; color: #ffc0cb; text-shadow: 0 0 15px #db7093; }\r\n    .ffg-tool .ffg-style-40 { font-family: Arial Black, sans-serif; font-size: 27px; color: #00ff00; letter-spacing: 1.5px; text-shadow: 0 1px 0 #fff, 0 0 20px #32cd32; }\r\n    .ffg-tool .ffg-style-41 { font-family: \"Times New Roman\", serif; font-size: 33px; font-weight: 900; text-transform: uppercase; color: #f8f8ff; text-shadow: 4px 0 0 #4682b4, 0 0 15px #87cefa; }\r\n    .ffg-tool .ffg-style-42 { font-family: Georgia, serif; font-size: 35px; font-style: italic; color: #d8bfd8; text-shadow: 0 0 10px #800080, 0 0 20px #dda0dd; }\r\n    .ffg-tool .ffg-style-43 { font-family: Verdana, sans-serif; font-size: 26px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: #fa8072; text-shadow: 0 0 12px #8b0000; }\r\n    .ffg-tool .ffg-style-44 { font-family: Palatino, serif; font-size: 36px; font-weight: 900; color: #e0ffff; text-shadow: -2px 2px 0 #008b8b, 0 0 25px #00ffff; }\r\n    .ffg-tool .ffg-style-45 { font-family: Impact, fantasy; font-size: 32px; letter-spacing: 3.5px; color: transparent; -webkit-text-stroke: 1.5px #ffd700; text-shadow: 0 0 25px #ff8c00; }\r\n    .ffg-tool .ffg-style-46 { font-family: \"Courier New\", monospace; font-size: 27px; font-weight: 900; text-transform: uppercase; color: #fffafa; text-shadow: 0 0 8px #ff1493, 3px 3px 0 #c71585; }\r\n    .ffg-tool .ffg-style-47 { font-family: Georgia, serif; font-size: 33px; font-weight: 700; letter-spacing: 1.2px; color: #40e0d0; text-shadow: 0 0 10px #008080, 0 0 30px #20b2aa; }\r\n    .ffg-tool .ffg-style-48 { font-family: Arial Black, sans-serif; font-size: 30px; transform: skew(4deg); color: #f5deb3; text-shadow: 0 0 15px #8b4513, -3px 0 0 #a0522d; }\r\n    .ffg-tool .ffg-style-49 { font-family: Garamond, serif; font-size: 34px; font-weight: 900; letter-spacing: 2px; color: #ffebcd; text-shadow: 0 5px 0 #cd853f, 0 0 18px #ff8c00; }\r\n    .ffg-tool .ffg-style-50 { font-family: \"Times New Roman\", serif; font-size: 38px; font-weight: 900; text-transform: uppercase; color: #fff; -webkit-text-stroke: 1px #8a2be2; text-shadow: 0 0 12px #9400d3, 0 0 30px #4b0082, 0 0 50px #000; }\r\n\r\n    @keyframes ffgFadeUp {\r\n      from { opacity: 0; transform: translateY(14px); }\r\n      to { opacity: 1; transform: translateY(0); }\r\n    }\r\n\r\n    \/* Mobile (Smallest) *\/\r\n    @media (min-width: 320px) and (max-width: 374px) {\r\n      .ffg-tool { padding: 42px 12px; }\r\n      .ffg-tool .ffg-container { width: 100%; }\r\n      .ffg-tool .ffg-title { font-size: 30px; }\r\n      .ffg-tool .ffg-subtitle { font-size: 14px; }\r\n      .ffg-tool .ffg-panel { padding: 14px; border-radius: 20px; }\r\n      .ffg-tool .ffg-input-row { grid-template-columns: 1fr; gap: 10px; }\r\n      .ffg-tool .ffg-input { padding: 14px; font-size: 15px; }\r\n      .ffg-tool .ffg-btn { width: 100%; padding: 13px 16px; font-size: 13px; }\r\n      .ffg-tool .ffg-grid { grid-template-columns: 1fr !important; gap: 14px; }\r\n      .ffg-tool .ffg-card { padding: 14px; border-radius: 18px; }\r\n      .ffg-tool .ffg-preview { padding: 14px; font-size: 22px; }\r\n      .ffg-tool [class*=\"ffg-style-\"] { font-size: 22px; letter-spacing: 0.8px; }\r\n    }\r\n\r\n    \/* Mobile (Medium) *\/\r\n    @media (min-width: 375px) and (max-width: 429px) {\r\n      .ffg-tool { padding: 46px 14px; }\r\n      .ffg-tool .ffg-container { width: 100%; }\r\n      .ffg-tool .ffg-title { font-size: 34px; }\r\n      .ffg-tool .ffg-subtitle { font-size: 15px; }\r\n      .ffg-tool .ffg-panel { padding: 16px; border-radius: 22px; }\r\n      .ffg-tool .ffg-input-row { grid-template-columns: 1fr; gap: 12px; }\r\n      .ffg-tool .ffg-input { padding: 15px; font-size: 16px; }\r\n      .ffg-tool .ffg-btn { width: 100%; padding: 14px 17px; font-size: 14px; }\r\n      .ffg-tool .ffg-grid { grid-template-columns: 1fr !important; gap: 16px; }\r\n      .ffg-tool .ffg-card { padding: 16px; border-radius: 20px; }\r\n      .ffg-tool .ffg-preview { padding: 15px; font-size: 23px; }\r\n      .ffg-tool [class*=\"ffg-style-\"] { font-size: 23px; letter-spacing: 1px; }\r\n    }\r\n\r\n    \/* Mobile (Large) *\/\r\n    @media (min-width: 430px) and (max-width: 767px) {\r\n      .ffg-tool { padding: 52px 16px; }\r\n      .ffg-tool .ffg-container { width: 100%; }\r\n      .ffg-tool .ffg-title { font-size: 38px; }\r\n      .ffg-tool .ffg-subtitle { font-size: 15px; }\r\n      .ffg-tool .ffg-panel { padding: 18px; border-radius: 24px; }\r\n      .ffg-tool .ffg-input-row { grid-template-columns: 1fr; gap: 12px; }\r\n      .ffg-tool .ffg-input { padding: 16px; font-size: 16px; }\r\n      .ffg-tool .ffg-btn { width: 100%; padding: 14px 18px; font-size: 14px; }\r\n      .ffg-tool .ffg-grid { grid-template-columns: 1fr !important; gap: 18px; }\r\n      .ffg-tool .ffg-card { padding: 18px; }\r\n      .ffg-tool .ffg-preview { padding: 16px; font-size: 24px; }\r\n      .ffg-tool [class*=\"ffg-style-\"] { font-size: 24px; letter-spacing: 1.1px; }\r\n    }\r\n\r\n    \/* Tablet *\/\r\n    @media (min-width: 768px) and (max-width: 1023px) {\r\n      .ffg-tool { padding: 64px 22px; }\r\n      .ffg-tool .ffg-container { width: 100%; }\r\n      .ffg-tool .ffg-title { font-size: 46px; }\r\n      .ffg-tool .ffg-subtitle { font-size: 16px; }\r\n      .ffg-tool .ffg-input { padding: 17px 18px; font-size: 17px; }\r\n      .ffg-tool .ffg-btn { padding: 15px 20px; font-size: 14px; }\r\n      .ffg-tool .ffg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }\r\n      .ffg-tool .ffg-card { padding: 18px; }\r\n      .ffg-tool .ffg-preview { font-size: 25px; }\r\n    }\r\n\r\n    \/* Laptop *\/\r\n    @media (min-width: 1024px) and (max-width: 1199px) {\r\n      .ffg-tool { padding: 70px 24px; }\r\n      .ffg-tool .ffg-container { width: 100%; }\r\n      .ffg-tool .ffg-title { font-size: 52px; }\r\n      .ffg-tool .ffg-subtitle { font-size: 17px; }\r\n      .ffg-tool .ffg-input { padding: 18px 20px; font-size: 18px; }\r\n      .ffg-tool .ffg-btn { padding: 16px 22px; font-size: 15px; }\r\n      .ffg-tool .ffg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 21px; }\r\n      .ffg-tool .ffg-card { padding: 19px; }\r\n      .ffg-tool .ffg-preview { font-size: 25px; }\r\n    }\r\n\r\n    \/* Desktop *\/\r\n    @media (min-width: 1200px) {\r\n      .ffg-tool { padding: 76px 28px; }\r\n      .ffg-tool .ffg-container { width: 100%; }\r\n      .ffg-tool .ffg-title { font-size: 58px; }\r\n      .ffg-tool .ffg-subtitle { font-size: 17px; }\r\n      .ffg-tool .ffg-input { padding: 18px 20px; font-size: 18px; }\r\n      .ffg-tool .ffg-btn { padding: 16px 22px; font-size: 15px; }\r\n      .ffg-tool .ffg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }\r\n      .ffg-tool .ffg-card { padding: 20px; }\r\n      .ffg-tool .ffg-preview { font-size: 26px; }\r\n    }\r\n  <\/style>\r\n\r\n  <div class=\"ffg-container\">\r\n    <div class=\"ffg-hero\">\r\n      <h1 class=\"ffg-title\">Fantasy Font Generator<\/h1>\r\n      <p class=\"ffg-subtitle\">Create magical, ethereal, and epic text styles with live previews, glowing glassmorphism cards, and one-click copying.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"ffg-panel\">\r\n      <div class=\"ffg-input-row\">\r\n        <input class=\"ffg-input\" type=\"text\" value=\"Fantasy Font\" placeholder=\"Type your magical text here...\" aria-label=\"Enter preview text\">\r\n        <button class=\"ffg-btn ffg-clear\" type=\"button\">Clear<\/button>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"ffg-grid\" aria-live=\"polite\"><\/div>\r\n\r\n    <div class=\"ffg-load-wrap\">\r\n      <button class=\"ffg-btn ffg-load\" type=\"button\">Load More<\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <script>\r\n    (function () {\r\n      var root = document.querySelector(\".ffg-tool\");\r\n      if (!root) return;\r\n\r\n      var input = root.querySelector(\".ffg-input\");\r\n      var clearBtn = root.querySelector(\".ffg-clear\");\r\n      var grid = root.querySelector(\".ffg-grid\");\r\n      var loadBtn = root.querySelector(\".ffg-load\");\r\n\r\n      var defaultText = \"Fantasy Font\";\r\n      var visibleCount = 12;\r\n      var step = 12;\r\n\r\n      var styles = [\r\n        \"Elven Glow\",\r\n        \"Dragon Fire\",\r\n        \"Mystic Rune\",\r\n        \"Mage Spell\",\r\n        \"Dwarven Steel\",\r\n        \"Fairy Dust\",\r\n        \"Dark Sorcery\",\r\n        \"Royal Crown\",\r\n        \"Enchanted Forest\",\r\n        \"Knight's Blade\",\r\n        \"Crystal Magic\",\r\n        \"Wizard's Script\",\r\n        \"Ancient Scroll\",\r\n        \"Mythic Legend\",\r\n        \"Phantom Shadow\",\r\n        \"Celestial Star\",\r\n        \"Arcane Sigil\",\r\n        \"Mermaid Tear\",\r\n        \"Goblin Gold\",\r\n        \"Witch's Brew\",\r\n        \"Paladin Shield\",\r\n        \"Lunar Eclipse\",\r\n        \"Druid's Vine\",\r\n        \"Vampire Bite\",\r\n        \"Golden Chalice\",\r\n        \"Silver Sword\",\r\n        \"Mythical Beast\",\r\n        \"Phoenix Ember\",\r\n        \"Astral Plane\",\r\n        \"Shadow Realm\",\r\n        \"Sorcerer's Stone\",\r\n        \"Ice Kingdom\",\r\n        \"Troll's Bridge\",\r\n        \"Elixir Drop\",\r\n        \"Spell Book\",\r\n        \"Oracle Vision\",\r\n        \"Enchanted Gem\",\r\n        \"Rogue's Dagger\",\r\n        \"Griffin Wing\",\r\n        \"Warlock's Curse\",\r\n        \"Fey Wilds\",\r\n        \"Mystic Aura\",\r\n        \"Demon's Eye\",\r\n        \"Pegasus Flight\",\r\n        \"Dragon's Scale\",\r\n        \"Fairy Ring\",\r\n        \"Necromancer's Call\",\r\n        \"Dwarven Forge\",\r\n        \"Elven Archer\",\r\n        \"Ultimate Fantasy\"\r\n      ];\r\n\r\n      function transformText(text, index) {\r\n        var base = text || defaultText;\r\n        var maps = [\r\n          function (t) { return t; },\r\n          function (t) { return \"\u2727 \" + t.toUpperCase() + \" \u2727\"; },\r\n          function (t) { return \"\u2694 \" + t + \" \u2694\"; },\r\n          function (t) { return t.toUpperCase(); },\r\n          function (t) { return \"\u2605 \" + t + \" \u2605\"; },\r\n          function (t) { return t.split(\"\").join(\" \"); },\r\n          function (t) { return \"\u2742 \" + t.toUpperCase() + \" \u2742\"; },\r\n          function (t) { return \"\u2646 \" + t + \" \u2646\"; },\r\n          function (t) { return \"\ud83d\udd2e \" + t + \" \ud83d\udd2e\"; },\r\n          function (t) { return t.split(\" \").map(function (w) { return w.charAt(0).toUpperCase() + w.slice(1); }).join(\" \"); },\r\n          function (t) { return \"\u2728 \" + t + \" \u2728\"; },\r\n          function (t) { return \"\ud83d\udf32 \" + t.toUpperCase() + \" \ud83d\udf32\"; }\r\n        ];\r\n\r\n        return maps[index % maps.length](base);\r\n      }\r\n\r\n      function render() {\r\n        grid.innerHTML = \"\";\r\n        var currentText = input.value.trim() || defaultText;\r\n\r\n        styles.slice(0, visibleCount).forEach(function (name, index) {\r\n          var card = document.createElement(\"div\");\r\n          card.className = \"ffg-card\";\r\n\r\n          var title = document.createElement(\"p\");\r\n          title.className = \"ffg-style-name\";\r\n          title.textContent = name;\r\n\r\n          var preview = document.createElement(\"div\");\r\n          preview.className = \"ffg-preview ffg-style-\" + (index + 1);\r\n          preview.textContent = transformText(currentText, index);\r\n\r\n          var copy = document.createElement(\"button\");\r\n          copy.className = \"ffg-copy\";\r\n          copy.type = \"button\";\r\n          copy.textContent = \"Copy\";\r\n          copy.addEventListener(\"click\", function () {\r\n            var copyText = preview.textContent;\r\n            if (navigator.clipboard && navigator.clipboard.writeText) {\r\n              navigator.clipboard.writeText(copyText).then(function () {\r\n                copy.textContent = \"Copied!\";\r\n                setTimeout(function () {\r\n                  copy.textContent = \"Copy\";\r\n                }, 1300);\r\n              });\r\n            } else {\r\n              var temp = document.createElement(\"textarea\");\r\n              temp.value = copyText;\r\n              temp.setAttribute(\"readonly\", \"\");\r\n              temp.style.position = \"absolute\";\r\n              temp.style.left = \"-9999px\";\r\n              root.appendChild(temp);\r\n              temp.select();\r\n              document.execCommand(\"copy\");\r\n              root.removeChild(temp);\r\n              copy.textContent = \"Copied!\";\r\n              setTimeout(function () {\r\n                copy.textContent = \"Copy\";\r\n              }, 1300);\r\n            }\r\n          });\r\n\r\n          card.appendChild(title);\r\n          card.appendChild(preview);\r\n          card.appendChild(copy);\r\n          grid.appendChild(card);\r\n        });\r\n\r\n        if (visibleCount >= styles.length) {\r\n          loadBtn.classList.add(\"ffg-hidden\");\r\n        } else {\r\n          loadBtn.classList.remove(\"ffg-hidden\");\r\n        }\r\n      }\r\n\r\n      input.addEventListener(\"input\", render);\r\n\r\n      clearBtn.addEventListener(\"click\", function () {\r\n        input.value = \"\";\r\n        input.focus();\r\n        render();\r\n      });\r\n\r\n      loadBtn.addEventListener(\"click\", function () {\r\n        visibleCount = Math.min(visibleCount + step, styles.length);\r\n        render();\r\n      });\r\n\r\n      render();\r\n    })();\r\n  <\/script>\r\n<\/div><\/div>\n<div class=\"tc-wp-tool-content\"><div class=\"ffg-bottom-content\">\r\n  <style>\r\n    .ffg-bottom-content {\r\n      width: 100%;\r\n      overflow: hidden;\r\n      font-family: inherit;\r\n      color: #1f2430;\r\n      background: #ffffff;\r\n      --ffg-accent: #8b5cf6;\r\n      --ffg-accent-two: #ec4899;\r\n      --ffg-accent-three: #f59e0b;\r\n      --ffg-ink: #1f2430;\r\n      --ffg-muted: #606779;\r\n      --ffg-soft: #fff8fb;\r\n      --ffg-soft-two: #fbf7ff;\r\n      --ffg-border: rgba(139, 92, 246, 0.16);\r\n      --ffg-border-strong: rgba(139, 92, 246, 0.28);\r\n      --ffg-shadow: 0 18px 45px rgba(44, 31, 84, 0.08);\r\n      --ffg-shadow-hover: 0 24px 65px rgba(44, 31, 84, 0.14);\r\n      --ffg-radius: 26px;\r\n    }\r\n\r\n    .ffg-bottom-content,\r\n    .ffg-bottom-content div,\r\n    .ffg-bottom-content section,\r\n    .ffg-bottom-content h2,\r\n    .ffg-bottom-content h3,\r\n    .ffg-bottom-content p,\r\n    .ffg-bottom-content span {\r\n      box-sizing: border-box;\r\n    }\r\n\r\n    .ffg-bottom-content .ffg-section {\r\n      position: relative;\r\n      width: 100%;\r\n    }\r\n\r\n    .ffg-bottom-content .ffg-white {\r\n      background: #ffffff;\r\n    }\r\n\r\n    .ffg-bottom-content .ffg-offwhite {\r\n      background:\r\n        radial-gradient(circle at 8% 12%, rgba(139, 92, 246, 0.08), transparent 34%),\r\n        radial-gradient(circle at 92% 18%, rgba(236, 72, 153, 0.08), transparent 30%),\r\n        linear-gradient(180deg, #fffafb 0%, #fbf7ff 100%);\r\n    }\r\n\r\n    .ffg-bottom-content .ffg-container {\r\n      width: 100%;\r\n      max-width: 1200px;\r\n      margin: 0 auto;\r\n      position: relative;\r\n      z-index: 2;\r\n    }\r\n\r\n    .ffg-bottom-content .ffg-heading {\r\n      text-align: center;\r\n      max-width: 780px;\r\n      margin: 0 auto;\r\n    }\r\n\r\n    .ffg-bottom-content .ffg-badge {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      gap: 8px;\r\n      padding: 8px 14px;\r\n      margin-bottom: 16px;\r\n      border-radius: 999px;\r\n      border: 1px solid var(--ffg-border);\r\n      background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(236, 72, 153, 0.08));\r\n      color: #7444d8;\r\n      font-size: 13px;\r\n      font-weight: 800;\r\n      line-height: 1.2;\r\n    }\r\n\r\n    .ffg-bottom-content .ffg-badge::before {\r\n      content: \"\";\r\n      width: 9px;\r\n      height: 9px;\r\n      border-radius: 50%;\r\n      background: linear-gradient(135deg, var(--ffg-accent), var(--ffg-accent-two));\r\n      box-shadow: 0 0 0 5px rgba(139, 92, 246, 0.12);\r\n    }\r\n\r\n    .ffg-bottom-content .ffg-heading h2 {\r\n      margin: 0;\r\n      color: var(--ffg-ink);\r\n      font-weight: 900;\r\n      letter-spacing: -0.035em;\r\n      line-height: 1.08;\r\n    }\r\n\r\n    .ffg-bottom-content .ffg-heading p {\r\n      margin: 16px auto 0;\r\n      color: var(--ffg-muted);\r\n      line-height: 1.75;\r\n      max-width: 710px;\r\n    }\r\n\r\n    .ffg-bottom-content .ffg-grid {\r\n      display: grid;\r\n      align-items: stretch;\r\n    }\r\n\r\n    .ffg-bottom-content .ffg-card {\r\n      position: relative;\r\n      height: 100%;\r\n      border: 1px solid var(--ffg-border);\r\n      border-radius: var(--ffg-radius);\r\n      background: rgba(255, 255, 255, 0.94);\r\n      box-shadow: var(--ffg-shadow);\r\n      overflow: hidden;\r\n      isolation: isolate;\r\n      opacity: 0;\r\n      transform: translateY(18px);\r\n      transition:\r\n        opacity 0.55s ease,\r\n        transform 0.55s ease,\r\n        box-shadow 0.3s ease,\r\n        border-color 0.3s ease;\r\n    }\r\n\r\n    .ffg-bottom-content .ffg-card.ffg-show {\r\n      opacity: 1;\r\n      transform: translateY(0);\r\n    }\r\n\r\n    .ffg-bottom-content .ffg-card::before {\r\n      content: \"\";\r\n      position: absolute;\r\n      inset: 0;\r\n      border-radius: inherit;\r\n      padding: 1px;\r\n      background: linear-gradient(135deg, rgba(139, 92, 246, 0.55), rgba(236, 72, 153, 0.25), rgba(245, 158, 11, 0.2));\r\n      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);\r\n      -webkit-mask-composite: xor;\r\n      mask-composite: exclude;\r\n      opacity: 0;\r\n      pointer-events: none;\r\n      transition: opacity 0.3s ease;\r\n    }\r\n\r\n    .ffg-bottom-content .ffg-card:hover {\r\n      border-color: var(--ffg-border-strong);\r\n      box-shadow: var(--ffg-shadow-hover);\r\n      transform: translateY(-6px);\r\n    }\r\n\r\n    .ffg-bottom-content .ffg-card.ffg-show:hover {\r\n      transform: translateY(-6px);\r\n    }\r\n\r\n    .ffg-bottom-content .ffg-card:hover::before {\r\n      opacity: 1;\r\n    }\r\n\r\n    .ffg-bottom-content .ffg-icon {\r\n      width: 56px;\r\n      height: 56px;\r\n      border-radius: 19px;\r\n      background: linear-gradient(135deg, rgba(139, 92, 246, 0.13), rgba(236, 72, 153, 0.1));\r\n      border: 1px solid rgba(139, 92, 246, 0.16);\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      margin-bottom: 20px;\r\n      transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n    }\r\n\r\n    .ffg-bottom-content .ffg-card:hover .ffg-icon {\r\n      transform: translateY(-3px) rotate(-2deg);\r\n      box-shadow: 0 14px 30px rgba(139, 92, 246, 0.16);\r\n    }\r\n\r\n    .ffg-bottom-content .ffg-icon::before {\r\n      content: \"\";\r\n      width: 25px;\r\n      height: 25px;\r\n      background: linear-gradient(135deg, var(--ffg-accent), var(--ffg-accent-two));\r\n      clip-path: polygon(50% 0%, 61% 34%, 97% 35%, 68% 56%, 78% 91%, 50% 70%, 22% 91%, 32% 56%, 3% 35%, 39% 34%);\r\n    }\r\n\r\n    .ffg-bottom-content .ffg-icon-copy::before {\r\n      clip-path: polygon(22% 8%, 72% 8%, 72% 24%, 88% 24%, 88% 92%, 35% 92%, 35% 76%, 22% 76%);\r\n    }\r\n\r\n    .ffg-bottom-content .ffg-icon-wand::before {\r\n      border-radius: 4px;\r\n      clip-path: polygon(12% 78%, 72% 18%, 84% 30%, 24% 90%);\r\n    }\r\n\r\n    .ffg-bottom-content .ffg-icon-crown::before {\r\n      clip-path: polygon(8% 78%, 92% 78%, 86% 28%, 65% 52%, 50% 16%, 35% 52%, 14% 28%);\r\n    }\r\n\r\n    .ffg-bottom-content .ffg-icon-scroll::before {\r\n      border-radius: 5px;\r\n      clip-path: polygon(15% 0, 85% 0, 85% 100%, 15% 100%, 15% 0, 32% 15%, 68% 15%, 68% 28%, 32% 28%, 32% 43%, 72% 43%, 72% 56%, 32% 56%);\r\n    }\r\n\r\n    .ffg-bottom-content .ffg-icon-shield::before {\r\n      clip-path: polygon(50% 3%, 88% 18%, 82% 66%, 50% 96%, 18% 66%, 12% 18%);\r\n    }\r\n\r\n    .ffg-bottom-content .ffg-icon-spark::before {\r\n      clip-path: polygon(50% 0%, 59% 35%, 96% 14%, 74% 50%, 96% 86%, 59% 65%, 50% 100%, 41% 65%, 4% 86%, 26% 50%, 4% 14%, 41% 35%);\r\n    }\r\n\r\n    .ffg-bottom-content .ffg-card h3 {\r\n      margin: 0;\r\n      color: var(--ffg-ink);\r\n      font-weight: 850;\r\n      letter-spacing: -0.02em;\r\n      line-height: 1.25;\r\n    }\r\n\r\n    .ffg-bottom-content .ffg-card p {\r\n      margin: 12px 0 0;\r\n      color: var(--ffg-muted);\r\n      line-height: 1.72;\r\n    }\r\n\r\n    .ffg-bottom-content .ffg-step-wrap {\r\n      display: grid;\r\n      gap: 18px;\r\n    }\r\n\r\n    .ffg-bottom-content .ffg-step-card {\r\n      position: relative;\r\n      display: grid;\r\n      grid-template-columns: auto 1fr;\r\n      align-items: center;\r\n      gap: 22px;\r\n      border-radius: var(--ffg-radius);\r\n      border: 1px solid var(--ffg-border);\r\n      background:\r\n        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.82)),\r\n        radial-gradient(circle at 15% 0%, rgba(139, 92, 246, 0.13), transparent 34%);\r\n      box-shadow: var(--ffg-shadow);\r\n      overflow: hidden;\r\n      opacity: 0;\r\n      transform: translateY(18px);\r\n      transition:\r\n        opacity 0.55s ease,\r\n        transform 0.55s ease,\r\n        box-shadow 0.3s ease,\r\n        border-color 0.3s ease;\r\n    }\r\n\r\n    .ffg-bottom-content .ffg-step-card.ffg-show {\r\n      opacity: 1;\r\n      transform: translateY(0);\r\n    }\r\n\r\n    .ffg-bottom-content .ffg-step-card:hover {\r\n      border-color: var(--ffg-border-strong);\r\n      box-shadow: var(--ffg-shadow-hover);\r\n      transform: translateY(-4px);\r\n    }\r\n\r\n    .ffg-bottom-content .ffg-step-card.ffg-show:hover {\r\n      transform: translateY(-4px);\r\n    }\r\n\r\n    .ffg-bottom-content .ffg-step-card::after {\r\n      content: \"\";\r\n      position: absolute;\r\n      right: -42px;\r\n      top: -42px;\r\n      width: 120px;\r\n      height: 120px;\r\n      border-radius: 50%;\r\n      background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(236, 72, 153, 0.1));\r\n      transition: transform 0.3s ease;\r\n    }\r\n\r\n    .ffg-bottom-content .ffg-step-card:hover::after {\r\n      transform: scale(1.12);\r\n    }\r\n\r\n    .ffg-bottom-content .ffg-step-number {\r\n      width: 68px;\r\n      height: 68px;\r\n      border-radius: 22px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      color: #ffffff;\r\n      font-weight: 900;\r\n      background: linear-gradient(135deg, var(--ffg-accent), var(--ffg-accent-two));\r\n      box-shadow: 0 16px 34px rgba(139, 92, 246, 0.24);\r\n      position: relative;\r\n      z-index: 2;\r\n    }\r\n\r\n    .ffg-bottom-content .ffg-step-text {\r\n      position: relative;\r\n      z-index: 2;\r\n    }\r\n\r\n    .ffg-bottom-content .ffg-step-text h3 {\r\n      margin: 0;\r\n      color: var(--ffg-ink);\r\n      font-weight: 850;\r\n      letter-spacing: -0.02em;\r\n      line-height: 1.25;\r\n    }\r\n\r\n    .ffg-bottom-content .ffg-step-text p {\r\n      margin: 10px 0 0;\r\n      color: var(--ffg-muted);\r\n      line-height: 1.72;\r\n    }\r\n\r\n    .ffg-bottom-content .ffg-use-card {\r\n      background:\r\n        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 252, 255, 0.96));\r\n    }\r\n\r\n    .ffg-bottom-content .ffg-use-tag {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      padding: 7px 12px;\r\n      margin-bottom: 17px;\r\n      border-radius: 999px;\r\n      color: #7444d8;\r\n      background: rgba(139, 92, 246, 0.09);\r\n      border: 1px solid rgba(139, 92, 246, 0.14);\r\n      font-size: 12px;\r\n      font-weight: 850;\r\n      line-height: 1.2;\r\n    }\r\n\r\n    .ffg-bottom-content .ffg-trust-card {\r\n      text-align: center;\r\n      background:\r\n        radial-gradient(circle at 50% -20%, rgba(139, 92, 246, 0.14), transparent 38%),\r\n        rgba(255, 255, 255, 0.94);\r\n    }\r\n\r\n    .ffg-bottom-content .ffg-trust-card .ffg-icon {\r\n      margin-left: auto;\r\n      margin-right: auto;\r\n    }\r\n\r\n    .ffg-bottom-content .ffg-bottom-note {\r\n      margin-top: 26px;\r\n      padding: 18px 22px;\r\n      border-radius: 22px;\r\n      border: 1px solid rgba(139, 92, 246, 0.13);\r\n      background: rgba(255, 255, 255, 0.72);\r\n      color: var(--ffg-muted);\r\n      line-height: 1.65;\r\n      text-align: center;\r\n      box-shadow: 0 12px 30px rgba(44, 31, 84, 0.05);\r\n    }\r\n\r\n    @media (min-width: 320px) and (max-width: 374px) {\r\n      .ffg-bottom-content .ffg-section {\r\n        padding: 48px 0;\r\n      }\r\n\r\n      .ffg-bottom-content .ffg-container {\r\n        padding: 0 14px;\r\n      }\r\n\r\n      .ffg-bottom-content .ffg-heading h2 {\r\n        font-size: 27px;\r\n      }\r\n\r\n      .ffg-bottom-content .ffg-heading p {\r\n        font-size: 14px;\r\n      }\r\n\r\n      .ffg-bottom-content .ffg-badge {\r\n        font-size: 12px;\r\n      }\r\n\r\n      .ffg-bottom-content .ffg-grid {\r\n        grid-template-columns: 1fr;\r\n        gap: 16px;\r\n        margin-top: 28px;\r\n      }\r\n\r\n      .ffg-bottom-content .ffg-card {\r\n        padding: 22px;\r\n        border-radius: 22px;\r\n      }\r\n\r\n      .ffg-bottom-content .ffg-card h3,\r\n      .ffg-bottom-content .ffg-step-text h3 {\r\n        font-size: 18px;\r\n      }\r\n\r\n      .ffg-bottom-content .ffg-card p,\r\n      .ffg-bottom-content .ffg-step-text p,\r\n      .ffg-bottom-content .ffg-bottom-note {\r\n        font-size: 14px;\r\n      }\r\n\r\n      .ffg-bottom-content .ffg-step-wrap {\r\n        margin-top: 28px;\r\n      }\r\n\r\n      .ffg-bottom-content .ffg-step-card {\r\n        grid-template-columns: 1fr;\r\n        gap: 16px;\r\n        padding: 22px;\r\n      }\r\n\r\n      .ffg-bottom-content .ffg-step-number {\r\n        width: 58px;\r\n        height: 58px;\r\n        border-radius: 18px;\r\n        font-size: 19px;\r\n      }\r\n    }\r\n\r\n    @media (min-width: 375px) and (max-width: 429px) {\r\n      .ffg-bottom-content .ffg-section {\r\n        padding: 54px 0;\r\n      }\r\n\r\n      .ffg-bottom-content .ffg-container {\r\n        padding: 0 18px;\r\n      }\r\n\r\n      .ffg-bottom-content .ffg-heading h2 {\r\n        font-size: 30px;\r\n      }\r\n\r\n      .ffg-bottom-content .ffg-heading p {\r\n        font-size: 15px;\r\n      }\r\n\r\n      .ffg-bottom-content .ffg-grid {\r\n        grid-template-columns: 1fr;\r\n        gap: 18px;\r\n        margin-top: 32px;\r\n      }\r\n\r\n      .ffg-bottom-content .ffg-card {\r\n        padding: 24px;\r\n      }\r\n\r\n      .ffg-bottom-content .ffg-card h3,\r\n      .ffg-bottom-content .ffg-step-text h3 {\r\n        font-size: 19px;\r\n      }\r\n\r\n      .ffg-bottom-content .ffg-card p,\r\n      .ffg-bottom-content .ffg-step-text p,\r\n      .ffg-bottom-content .ffg-bottom-note {\r\n        font-size: 15px;\r\n      }\r\n\r\n      .ffg-bottom-content .ffg-step-wrap {\r\n        margin-top: 32px;\r\n      }\r\n\r\n      .ffg-bottom-content .ffg-step-card {\r\n        grid-template-columns: 1fr;\r\n        gap: 16px;\r\n        padding: 24px;\r\n      }\r\n\r\n      .ffg-bottom-content .ffg-step-number {\r\n        width: 60px;\r\n        height: 60px;\r\n        border-radius: 19px;\r\n        font-size: 20px;\r\n      }\r\n    }\r\n\r\n    @media (min-width: 430px) and (max-width: 767px) {\r\n      .ffg-bottom-content .ffg-section {\r\n        padding: 60px 0;\r\n      }\r\n\r\n      .ffg-bottom-content .ffg-container {\r\n        padding: 0 22px;\r\n      }\r\n\r\n      .ffg-bottom-content .ffg-heading h2 {\r\n        font-size: 34px;\r\n      }\r\n\r\n      .ffg-bottom-content .ffg-heading p {\r\n        font-size: 16px;\r\n      }\r\n\r\n      .ffg-bottom-content .ffg-grid {\r\n        grid-template-columns: 1fr;\r\n        gap: 20px;\r\n        margin-top: 34px;\r\n      }\r\n\r\n      .ffg-bottom-content .ffg-card {\r\n        padding: 26px;\r\n      }\r\n\r\n      .ffg-bottom-content .ffg-card h3,\r\n      .ffg-bottom-content .ffg-step-text h3 {\r\n        font-size: 20px;\r\n      }\r\n\r\n      .ffg-bottom-content .ffg-card p,\r\n      .ffg-bottom-content .ffg-step-text p,\r\n      .ffg-bottom-content .ffg-bottom-note {\r\n        font-size: 15.5px;\r\n      }\r\n\r\n      .ffg-bottom-content .ffg-step-wrap {\r\n        margin-top: 34px;\r\n      }\r\n\r\n      .ffg-bottom-content .ffg-step-card {\r\n        grid-template-columns: 1fr;\r\n        gap: 18px;\r\n        padding: 26px;\r\n      }\r\n\r\n      .ffg-bottom-content .ffg-step-number {\r\n        width: 62px;\r\n        height: 62px;\r\n        border-radius: 20px;\r\n        font-size: 21px;\r\n      }\r\n    }\r\n\r\n    @media (min-width: 768px) and (max-width: 1023px) {\r\n      .ffg-bottom-content .ffg-section {\r\n        padding: 72px 0;\r\n      }\r\n\r\n      .ffg-bottom-content .ffg-container {\r\n        padding: 0 28px;\r\n      }\r\n\r\n      .ffg-bottom-content .ffg-heading h2 {\r\n        font-size: 42px;\r\n      }\r\n\r\n      .ffg-bottom-content .ffg-heading p {\r\n        font-size: 17px;\r\n      }\r\n\r\n      .ffg-bottom-content .ffg-grid {\r\n        grid-template-columns: repeat(2, minmax(0, 1fr));\r\n        gap: 22px;\r\n        margin-top: 40px;\r\n      }\r\n\r\n      .ffg-bottom-content .ffg-grid.ffg-trust-grid {\r\n        grid-template-columns: repeat(2, minmax(0, 1fr));\r\n      }\r\n\r\n      .ffg-bottom-content .ffg-card {\r\n        padding: 28px;\r\n      }\r\n\r\n      .ffg-bottom-content .ffg-card h3,\r\n      .ffg-bottom-content .ffg-step-text h3 {\r\n        font-size: 21px;\r\n      }\r\n\r\n      .ffg-bottom-content .ffg-card p,\r\n      .ffg-bottom-content .ffg-step-text p,\r\n      .ffg-bottom-content .ffg-bottom-note {\r\n        font-size: 16px;\r\n      }\r\n\r\n      .ffg-bottom-content .ffg-step-wrap {\r\n        margin-top: 40px;\r\n      }\r\n\r\n      .ffg-bottom-content .ffg-step-card {\r\n        padding: 30px;\r\n      }\r\n\r\n      .ffg-bottom-content .ffg-step-number {\r\n        width: 66px;\r\n        height: 66px;\r\n        font-size: 22px;\r\n      }\r\n    }\r\n\r\n    @media (min-width: 1024px) {\r\n      .ffg-bottom-content .ffg-section {\r\n        padding: 88px 0;\r\n      }\r\n\r\n      .ffg-bottom-content .ffg-container {\r\n        padding: 0 30px;\r\n      }\r\n\r\n      .ffg-bottom-content .ffg-heading h2 {\r\n        font-size: 50px;\r\n      }\r\n\r\n      .ffg-bottom-content .ffg-heading p {\r\n        font-size: 17px;\r\n      }\r\n\r\n      .ffg-bottom-content .ffg-grid {\r\n        grid-template-columns: repeat(3, minmax(0, 1fr));\r\n        gap: 24px;\r\n        margin-top: 46px;\r\n      }\r\n\r\n      .ffg-bottom-content .ffg-card {\r\n        padding: 30px;\r\n      }\r\n\r\n      .ffg-bottom-content .ffg-card h3,\r\n      .ffg-bottom-content .ffg-step-text h3 {\r\n        font-size: 22px;\r\n      }\r\n\r\n      .ffg-bottom-content .ffg-card p,\r\n      .ffg-bottom-content .ffg-step-text p,\r\n      .ffg-bottom-content .ffg-bottom-note {\r\n        font-size: 16px;\r\n      }\r\n\r\n      .ffg-bottom-content .ffg-step-wrap {\r\n        margin-top: 46px;\r\n      }\r\n\r\n      .ffg-bottom-content .ffg-step-card {\r\n        padding: 32px;\r\n      }\r\n\r\n      .ffg-bottom-content .ffg-step-number {\r\n        width: 68px;\r\n        height: 68px;\r\n        font-size: 23px;\r\n      }\r\n    }\r\n  <\/style>\r\n\r\n  <section class=\"ffg-section ffg-white\">\r\n    <div class=\"ffg-container\">\r\n      <div class=\"ffg-heading\">\r\n        <span class=\"ffg-badge\">Fantasy Text Styling<\/span>\r\n        <h2>Create Magical Text with a Fantasy Font Generator<\/h2>\r\n        <p>A fantasy font generator helps you turn plain text into enchanting, decorative, and story-inspired styles that feel perfect for names, captions, bios, headings, and creative online profiles.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"ffg-grid\">\r\n        <div class=\"ffg-card\">\r\n          <div class=\"ffg-icon\"><\/div>\r\n          <h3>Instant Font Preview<\/h3>\r\n          <p>Type your words and quickly see fantasy-inspired text styles that make your content feel more magical, dramatic, and visually memorable.<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"ffg-card\">\r\n          <div class=\"ffg-icon ffg-icon-copy\"><\/div>\r\n          <h3>Copy Ready Styles<\/h3>\r\n          <p>Choose a look you like, copy it, and paste it into social profiles, messages, gaming names, or creative posts without extra formatting work.<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"ffg-card\">\r\n          <div class=\"ffg-icon ffg-icon-wand\"><\/div>\r\n          <h3>Creative Text Options<\/h3>\r\n          <p>Explore styles that feel mystical, royal, ancient, magical, or storybook-inspired, giving your text a stronger personality in seconds.<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"ffg-card\">\r\n          <div class=\"ffg-icon ffg-icon-crown\"><\/div>\r\n          <h3>Unique Name Styling<\/h3>\r\n          <p>Make usernames, display names, roleplay names, and fantasy character names stand out with decorative text that feels custom and expressive.<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"ffg-card\">\r\n          <div class=\"ffg-icon ffg-icon-scroll\"><\/div>\r\n          <h3>Story-Like Appearance<\/h3>\r\n          <p>Add a mythical touch to quotes, headings, descriptions, and short lines so your words feel closer to a fantasy world or magical theme.<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"ffg-card\">\r\n          <div class=\"ffg-icon ffg-icon-spark\"><\/div>\r\n          <h3>Fast Creative Upgrade<\/h3>\r\n          <p>Instead of designing text manually, use generated fantasy fonts to improve your content style quickly while keeping the process simple.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <section class=\"ffg-section ffg-offwhite\">\r\n    <div class=\"ffg-container\">\r\n      <div class=\"ffg-heading\">\r\n        <span class=\"ffg-badge\">Simple Process<\/span>\r\n        <h2>How to Use the Fantasy Font Generator<\/h2>\r\n        <p>The tool is made for quick styling, so you can create decorative text without design software, complicated settings, or manual character changes.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"ffg-step-wrap\">\r\n        <div class=\"ffg-step-card\">\r\n          <div class=\"ffg-step-number\">01<\/div>\r\n          <div class=\"ffg-step-text\">\r\n            <h3>Enter Your Text<\/h3>\r\n            <p>Start by typing the word, name, phrase, caption, or short message you want to transform into a fantasy-style font.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"ffg-step-card\">\r\n          <div class=\"ffg-step-number\">02<\/div>\r\n          <div class=\"ffg-step-text\">\r\n            <h3>Preview Fantasy Styles<\/h3>\r\n            <p>Review the generated styles and compare different magical, decorative, gothic, royal, or story-inspired text looks.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"ffg-step-card\">\r\n          <div class=\"ffg-step-number\">03<\/div>\r\n          <div class=\"ffg-step-text\">\r\n            <h3>Copy and Paste Anywhere<\/h3>\r\n            <p>Pick your favorite style, copy it, and paste it into your bio, caption, username, game profile, message, or creative project.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <section class=\"ffg-section ffg-white\">\r\n    <div class=\"ffg-container\">\r\n      <div class=\"ffg-heading\">\r\n        <span class=\"ffg-badge\">Use Cases<\/span>\r\n        <h2>Where Fantasy Fonts Can Make Your Text Stand Out<\/h2>\r\n        <p>Fantasy text works best when you want a name, title, caption, or profile to feel more imaginative, themed, and different from ordinary text.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"ffg-grid\">\r\n        <div class=\"ffg-card ffg-use-card\">\r\n          <span class=\"ffg-use-tag\">Social Profiles<\/span>\r\n          <h3>Fantasy Bios<\/h3>\r\n          <p>Use stylish fantasy text in Instagram, TikTok, Facebook, or other bios to create a profile that feels more creative and memorable.<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"ffg-card ffg-use-card\">\r\n          <span class=\"ffg-use-tag\">Captions<\/span>\r\n          <h3>Magical Post Text<\/h3>\r\n          <p>Make short captions, quotes, and story lines feel more expressive with decorative fonts that match fantasy, dreamy, or mystical content.<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"ffg-card ffg-use-card\">\r\n          <span class=\"ffg-use-tag\">Usernames<\/span>\r\n          <h3>Unique Display Names<\/h3>\r\n          <p>Give your usernames, nicknames, or profile names a fantasy look that helps them feel more personal and less plain.<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"ffg-card ffg-use-card\">\r\n          <span class=\"ffg-use-tag\">Gaming<\/span>\r\n          <h3>Roleplay Profiles<\/h3>\r\n          <p>Fantasy fonts are useful for RPG names, guild titles, clan profiles, character tags, and gaming identities with a mythical feel.<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"ffg-card ffg-use-card\">\r\n          <span class=\"ffg-use-tag\">Branding<\/span>\r\n          <h3>Creative Headings<\/h3>\r\n          <p>Use generated text for small headings, themed names, product ideas, mood boards, or creative concepts that need a fantasy tone.<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"ffg-card ffg-use-card\">\r\n          <span class=\"ffg-use-tag\">Messages<\/span>\r\n          <h3>Stylish Notes<\/h3>\r\n          <p>Add fantasy-styled text to greetings, messages, comments, and short notes when you want your words to feel more playful or special.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <section class=\"ffg-section ffg-offwhite\">\r\n    <div class=\"ffg-container\">\r\n      <div class=\"ffg-heading\">\r\n        <span class=\"ffg-badge\">Helpful Benefits<\/span>\r\n        <h2>Designed for Fast, Clean, and Easy Font Styling<\/h2>\r\n        <p>The fantasy font generator keeps the experience simple, so you can focus on choosing a style that fits your mood, theme, or creative idea.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"ffg-grid ffg-trust-grid\">\r\n        <div class=\"ffg-card ffg-trust-card\">\r\n          <div class=\"ffg-icon ffg-icon-shield\"><\/div>\r\n          <h3>No Signup Needed<\/h3>\r\n          <p>Create fantasy-style text without account steps, long forms, or unnecessary interruptions. Just type, preview, copy, and use.<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"ffg-card ffg-trust-card\">\r\n          <div class=\"ffg-icon ffg-icon-spark\"><\/div>\r\n          <h3>Mobile Friendly<\/h3>\r\n          <p>The tool works smoothly on phones, tablets, and desktops, making it easy to style text whenever inspiration appears.<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"ffg-card ffg-trust-card\">\r\n          <div class=\"ffg-icon ffg-icon-copy\"><\/div>\r\n          <h3>Clean Copying<\/h3>\r\n          <p>Generated text is made for simple copying and pasting, helping you use your favorite fantasy style across different platforms.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"ffg-bottom-note\">\r\n        Use fantasy fonts thoughtfully for names, bios, and decorative text. For long paragraphs, keep readability in mind and choose styles that look beautiful without making the message hard to read.\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <script>\r\n    (function () {\r\n      var root = document.querySelector(\".ffg-bottom-content\");\r\n      if (!root) return;\r\n\r\n      var revealItems = root.querySelectorAll(\".ffg-card, .ffg-step-card\");\r\n\r\n      if (!(\"IntersectionObserver\" in window)) {\r\n        revealItems.forEach(function (item) {\r\n          item.classList.add(\"ffg-show\");\r\n        });\r\n        return;\r\n      }\r\n\r\n      var observer = new IntersectionObserver(\r\n        function (entries) {\r\n          entries.forEach(function (entry) {\r\n            if (entry.isIntersecting) {\r\n              entry.target.classList.add(\"ffg-show\");\r\n              observer.unobserve(entry.target);\r\n            }\r\n          });\r\n        },\r\n        {\r\n          threshold: 0.12,\r\n          rootMargin: \"0px 0px -40px 0px\"\r\n        }\r\n      );\r\n\r\n      revealItems.forEach(function (item, index) {\r\n        item.style.transitionDelay = (index % 6) * 0.06 + \"s\";\r\n        observer.observe(item);\r\n      });\r\n    })();\r\n  <\/script>\r\n<\/div><\/div>\n<\/section>\n<\/div>\n","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-5725","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/fonttor.com\/wp-json\/wp\/v2\/pages\/5725","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fonttor.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fonttor.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fonttor.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/fonttor.com\/wp-json\/wp\/v2\/comments?post=5725"}],"version-history":[{"count":0,"href":"https:\/\/fonttor.com\/wp-json\/wp\/v2\/pages\/5725\/revisions"}],"wp:attachment":[{"href":"https:\/\/fonttor.com\/wp-json\/wp\/v2\/media?parent=5725"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}