// Initialize all function init() renderFontCards(); loadWebFontsForPreview(); // ensures that in any browser (even desktop) preview uses actual font style // Add a small note about storage permissions on Android (for better UX) const stylePerm = document.createElement('style'); stylePerm.textContent = ` .btn-primary:active transform: scale(0.96); @media (pointer: coarse) .btn padding: 0.8rem 0; `; document.head.appendChild(stylePerm);
/* header section */ .hero text-align: center; margin-bottom: 3rem;
.warning background: #fff1e0; border-left: 4px solid #e67e22; padding: 0.8rem 1rem; border-radius: 1rem; margin-top: 1rem; font-size: 0.85rem;
.toast-msg position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) scale(0.9); background: #1e2f27; color: #eef5ea; padding: 10px 24px; border-radius: 60px; font-weight: 500; font-size: 0.85rem; z-index: 1000; opacity: 0; transition: 0.2s; pointer-events: none; white-space: nowrap; box-shadow: 0 6px 14px rgba(0,0,0,0.2);
init(); </script> </body> </html>
grid.appendChild(card); );