tinyfont/web-font-loader-generator.html at main · base64converter/tinyfont · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Font Loader Generator Tool | Tinyfont</title>
    <meta name="description" content="Generate optimized JavaScript for loading Google Fonts asynchronously, preventing FOUT/FOIT. Improve web performance and user experience."><meta name="keywords" content="web font loader, font loading, javascript, font optimization, FOUT, FOIT, Google Fonts, web performance">
    <meta name="author" content="Prasoon"><link rel="canonical" href="https://tinyfont.me/web-font-loader-generator.html">
    <meta property="og:title" content="Web Font Loader Generator Tool | Tinyfont"><meta property="og:description" content="Generate optimized JavaScript for loading Google Fonts asynchronously, preventing FOUT/FOIT. Improve web performance and user experience.">
    <meta property="og:image" content="https://tinyfont.me/assets/images/og/homepage.png"><meta property="og:image:alt" content="A code snippet showing JavaScript for loading web fonts.">
    <meta property="og:url" content="https://tinyfont.me/web-font-loader-generator.html"><meta property="og:type" content="website">
    <meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="Web Font Loader Generator Tool | Tinyfont">
    <meta name="twitter:description" content="Generate optimized JavaScript for loading Google Fonts asynchronously, preventing FOUT/FOIT. Improve web performance and user experience."><meta name="twitter:image" content="https://tinyfont.me/assets/images/og/homepage.png">
    <link rel="stylesheet" href="assets/css/main.css">
    <script type="application/ld+json">{
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "Web Font Loader Generator",
  "url": "https://tinyfont.me/web-font-loader-generator.html",
  "description": "Generate optimized JavaScript for loading Google Fonts asynchronously, preventing FOUT/FOIT.",
  "author": {
    "@type": "Person",
    "name": "Prasoon"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Tinyfont.me"
  },
  "applicationCategory": "Utility",
  "keywords": "web font loader, font loading, javascript, font optimization, FOUT, FOIT"
}</script>
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9534887202409405" crossorigin="anonymous"></script>
    <!-- ANALYTICS_PLACEHOLDER -->
</head>
<body>
    <header class="site-header"><div class="container">
        <a href="./index.html" class="logo">TinyFont</a>
        <nav class="main-nav" aria-label="Main Navigation"><ul><li class="nav-item"><a href="#" class="nav-link" aria-haspopup="true">Font Discovery</a><div class="dropdown-menu"><a href="./live-preview-tool.html">Live Google Font Previewer</a><a href="./font-comparison-tool.html">Compare Fonts Instantly</a><a href="./variable-font-finder.html">Discover Variable Google Fonts</a><a href="./language-support-finder.html">Find Fonts for Any Language</a></div></li><li class="nav-item"><a href="#" class="nav-link" aria-haspopup="true">Design & Typography</a><div class="dropdown-menu"><a href="./font-pairing-generator.html">Generate Beautiful Font Pairings</a><a href="./logo-fonts-tool.html">Find the Perfect Font for Your Logo</a><a href="./font-color-tester.html">Test Font Color Contrast</a><a href="./font-performance-checker.html">Analyze Font Performance Impact</a></div></li><li class="nav-item"><a href="#" class="nav-link" aria-haspopup="true">Performance & Web</a><div class="dropdown-menu"><a href="./google-fonts-css-generator.html">Generate Optimized Font CSS</a><a href="./css-font-stack-generator.html">Create Bulletproof CSS Font Stacks</a><a href="./web-safe-fonts-checker.html">Web Safe Font Reference</a></div></li><li class="nav-item"><a href="#" class="nav-link" aria-haspopup="true">Guides</a><div class="dropdown-menu"><a href="./accessibility-checker.html">Check Font Accessibility</a><a href="./subset-text-optimizer.html">Font Subsetting Text Generator</a></div></li></ul></nav>
        <div class="header-controls">
            <button class="dark-mode-toggle" title="Toggle Dark Mode">🌙</button>
            <button class="mobile-nav-toggle" aria-controls="main-nav" aria-expanded="false" aria-label="Toggle Navigation">☰</button>
        </div>
    </div></header>
    <main>
        <header class="page-header"><div class="container">
            <h1>Web Font Loader Generator</h1><p>Generate optimized JavaScript for loading Google Fonts asynchronously, preventing FOUT/FOIT.</p>
        </div></header>
        <div class="container">

    <div class="breadcrumbs">
        <a href="./index.html">Home</a> &raquo; <span>Performance & Web</span> &raquo; <span>Web Font Loader Generator</span>
    </div>

    <center><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9534887202409405" crossorigin="anonymous"></script>
<!-- tf -->
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-9534887202409405" data-ad-slot="2539931563" data-ad-format="auto" data-full-width-responsive="true"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script></center>
        <div class="content-section tool-container">
            <h2>Web Font Loader Generator in Action</h2>

        <div class="tool-wrapper font-loader-tool">
            <div class="control-group"><label for="fontSelector">Select Google Font</label><select id="fontSelector" class="tool-select" disabled><option>Loading...</option></select></div>
            <div class="control-group"><label for="fontDisplay">Font Display Strategy</label><select id="fontDisplay" class="tool-select"><option value="swap">swap (Recommended)</option><option value="auto">auto</option><option value="block">block</option><option value="fallback">fallback</option><option value="optional">optional</option></select></div>
            <div class="export-area"><h4>Generated JavaScript Code</h4><pre><code id="jsOutput"></code></pre><button id="copyBtn" class="tool-button">Copy Code</button></div>
        </div>

        </div>
        <section id="about" class="content-section">
            <h2>About This Tool</h2>
            <p>Optimizing font loading is crucial for web performance. This tool helps you generate the necessary JavaScript to load Google Fonts efficiently, preventing layout shifts and ensuring a smooth user experience.</p>
        </section>
        <section id="how-to" class="content-section">
            <h2>How to Use</h2>
            <div>1. Select your desired Google Font.<br>2. Choose a `font-display` strategy.<br>3. Copy the generated JavaScript code and embed it in your website's `<head>` section.</div>
        </section>
        <section id="faqs" class="content-section">
            <h2>Frequently Asked Questions</h2>
            <pre>Q: What is FOUT/FOIT?
A: FOUT (Flash of Unstyled Text) is when text is briefly displayed in a fallback font before the web font loads. FOIT (Flash of Invisible Text) is when text is invisible until the web font loads.
Q: Which `font-display` strategy should I use?
A: `swap` is generally recommended as it provides a good balance between performance and user experience, showing text immediately with a fallback font and then swapping to the web font once loaded.</pre>
        </section>

    <center><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9534887202409405" crossorigin="anonymous"></script>
<!-- tf -->
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-9534887202409405" data-ad-slot="2539931563" data-ad-format="auto" data-full-width-responsive="true"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script></center>
        </div>
    </main>
    <footer class="site-footer"><div class="container"><div class="footer-grid"><div class="footer-column"><h4>Font Discovery</h4><ul><li><a href="./live-preview-tool.html">Live Google Font Previewer</a></li><li><a href="./font-comparison-tool.html">Compare Fonts Instantly</a></li><li><a href="./variable-font-finder.html">Discover Variable Google Fonts</a></li><li><a href="./language-support-finder.html">Find Fonts for Any Language</a></li></ul></div><div class="footer-column"><h4>Design & Typography</h4><ul><li><a href="./font-pairing-generator.html">Generate Beautiful Font Pairings</a></li><li><a href="./logo-fonts-tool.html">Find the Perfect Font for Your Logo</a></li><li><a href="./font-color-tester.html">Test Font Color Contrast</a></li><li><a href="./font-performance-checker.html">Analyze Font Performance Impact</a></li></ul></div><div class="footer-column"><h4>Performance & Web</h4><ul><li><a href="./google-fonts-css-generator.html">Generate Optimized Font CSS</a></li><li><a href="./css-font-stack-generator.html">Create Bulletproof CSS Font Stacks</a></li><li><a href="./web-safe-fonts-checker.html">Web Safe Font Reference</a></li><li><a href="./google-fonts-downloader.html">Google Fonts Downloader</a></li></ul></div><div class="footer-column"><h4>Guides</h4><ul><li><a href="./accessibility-checker.html">Check Font Accessibility</a></li><li><a href="./subset-text-optimizer.html">Font Subsetting Text Generator</a></li></ul></div></div>
        <div class="footer-bottom">
            <p>&copy; 2025 Prasoon. Built with ❤️ at TinyFont.me.</p>
            <p>Last updated: August 21, 2025</p>
        </div>
    </div></footer>
    <script src="assets/js/main.js"></script>
    <script>
let allFonts = [];
const fontSelector = document.getElementById('fontSelector');
const fontDisplaySelector = document.getElementById('fontDisplay');
const jsOutput = document.getElementById('jsOutput');
const copyBtn = document.getElementById('copyBtn');

async function fetchFonts() {
    try {
        const response = await fetch(`/get-fonts?url=${encodeURIComponent('https://www.googleapis.com/webfonts/v1/webfonts?')}`);
        const data = await response.json();
        allFonts = data.items;
        fontSelector.innerHTML = allFonts.map(f => `<option value="${f.family}">${f.family}</option>`).join('');
        fontSelector.disabled = false;
        generateCode();
    } catch (e) { console.error('Failed to fetch fonts:', e); fontSelector.innerHTML = '<option>Error loading fonts</option>'; }
}

function generateCode() {
    const fontFamily = fontSelector.value;
    const fontDisplay = fontDisplaySelector.value;
    if (!fontFamily) {
        jsOutput.textContent = '// Select a font to generate code';
        return;
    }

    const code = `
<script>
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();
</scr' + 'ipt>

<scr' + 'ipt>
  WebFontConfig = {
    google: {
      families: ['${fontFamily}:${fontDisplay}']
    }
  };
</scr' + 'ipt>
`;
    jsOutput.textContent = code;
}

fontSelector.addEventListener('change', generateCode);
fontDisplaySelector.addEventListener('change', generateCode);
copyBtn.addEventListener('click', () => navigator.clipboard.writeText(jsOutput.textContent));

fetchFonts();
</script>
</body>
</html>