Font loading optimization

Author: pilafmon

css/layouts/block-duo.html

@@ -10,9 +10,11 @@
 <title>Layout &bull; Block Duo</title>
 <link rel=icon             href=https://centerkey.com/graphics/bookmark.png>
 <link rel=apple-touch-icon href=https://centerkey.com/graphics/mobile-home-screen.png>
+<link rel=preconnect       href=https://fonts.googleapis.com>
+<link rel=preconnect       href=https://fonts.gstatic.com crossorigin>
 <link rel=stylesheet       href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15/css/all.min.css>
-<link rel=stylesheet       href=https://cdn.jsdelivr.net/npm/dna.js@1.7/dist/dna.css>
-<link rel=stylesheet       href=https://cdn.jsdelivr.net/npm/dna.js@1.4/website/static/panel-nav.css>
+<link rel=stylesheet       href=https://cdn.jsdelivr.net/npm/dna.js@1.8/dist/dna.css>
+<link rel=stylesheet       href=https://cdn.jsdelivr.net/npm/dna.js@1.8/dist/panel-nav.css>
 <link rel=stylesheet       href=../../dist/reset.min.css>
 <link rel=stylesheet       href=block-duo.css>
 <style>
@@ -85,8 +87,8 @@ <h3>Block subheader (h3)</h3>
    <p>Copyright &copy; 2151 Enterprise</p>
 </footer>
 
-<script src=https://cdn.jsdelivr.net/npm/jquery@3.5/dist/jquery.min.js></script>
-<script src=https://cdn.jsdelivr.net/npm/dna.js@1.7/dist/dna.min.js></script>
+<script src=https://cdn.jsdelivr.net/npm/jquery@3.6/dist/jquery.min.js></script>
+<script src=https://cdn.jsdelivr.net/npm/dna.js@1.8/dist/dna.min.js></script>
 <script src=https://cdn.jsdelivr.net/npm/web-ignition@1.4/dist/lib-x.min.js></script>
 </body>
 </html>

css/layouts/color-blocks.html

@@ -10,8 +10,10 @@
 <title>Layout &bull; Color Blocks</title>
 <link rel=icon             href=https://centerkey.com/graphics/bookmark.png>
 <link rel=apple-touch-icon href=https://centerkey.com/graphics/mobile-home-screen.png>
+<link rel=preconnect       href=https://fonts.googleapis.com>
+<link rel=preconnect       href=https://fonts.gstatic.com crossorigin>
 <link rel=stylesheet       href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15/css/all.min.css>
-<link rel=stylesheet       href=https://cdn.jsdelivr.net/npm/dna.js@1.7/dist/dna.css>
+<link rel=stylesheet       href=https://cdn.jsdelivr.net/npm/dna.js@1.8/dist/dna.css>
 <link rel=stylesheet       href=../../dist/reset.min.css>
 <link rel=stylesheet       href=color-blocks.css>
 <style>
@@ -118,8 +120,8 @@ <h3>Block subheader (h3)</h3>
    <div>Copyright &copy; 2151 Enterprise</div>
 </footer>
 
-<script src=https://cdn.jsdelivr.net/npm/jquery@3.5/dist/jquery.min.js></script>
-<script src=https://cdn.jsdelivr.net/npm/dna.js@1.7/dist/dna.min.js></script>
+<script src=https://cdn.jsdelivr.net/npm/jquery@3.6/dist/jquery.min.js></script>
+<script src=https://cdn.jsdelivr.net/npm/dna.js@1.8/dist/dna.min.js></script>
 <script src=https://cdn.jsdelivr.net/npm/web-ignition@1.4/dist/lib-x.min.js></script>
 </body>
 </html>

css/layouts/color-slide.html

@@ -10,8 +10,10 @@
 <title>Layout &bull; Color Slide</title>
 <link rel=icon             href=https://centerkey.com/graphics/bookmark.png>
 <link rel=apple-touch-icon href=https://centerkey.com/graphics/mobile-home-screen.png>
+<link rel=preconnect       href=https://fonts.googleapis.com>
+<link rel=preconnect       href=https://fonts.gstatic.com crossorigin>
 <link rel=stylesheet       href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15/css/all.min.css>
-<link rel=stylesheet       href=https://cdn.jsdelivr.net/npm/dna.js@1.7/dist/dna.css>
+<link rel=stylesheet       href=https://cdn.jsdelivr.net/npm/dna.js@1.8/dist/dna.css>
 <link rel=stylesheet       href=../../dist/reset.min.css>
 <link rel=stylesheet       href=color-slide.css>
 <style>
@@ -89,8 +91,8 @@ <h2>Sidebar</h2>
    <div>Copyright &copy; 2151 Enterprise</div>
 </footer>
 
-<script src=https://cdn.jsdelivr.net/npm/jquery@3.5/dist/jquery.min.js></script>
-<script src=https://cdn.jsdelivr.net/npm/dna.js@1.7/dist/dna.min.js></script>
+<script src=https://cdn.jsdelivr.net/npm/jquery@3.6/dist/jquery.min.js></script>
+<script src=https://cdn.jsdelivr.net/npm/dna.js@1.8/dist/dna.min.js></script>
 <script src=https://cdn.jsdelivr.net/npm/web-ignition@1.4/dist/lib-x.min.js></script>
 </body>
 </html>

css/layouts/letterbox.html

@@ -10,8 +10,10 @@
 <title>Layout &bull; Letterbox</title>
 <link rel=icon             href=https://centerkey.com/graphics/bookmark.png>
 <link rel=apple-touch-icon href=https://centerkey.com/graphics/mobile-home-screen.png>
+<link rel=preconnect       href=https://fonts.googleapis.com>
+<link rel=preconnect       href=https://fonts.gstatic.com crossorigin>
 <link rel=stylesheet       href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15/css/all.min.css>
-<link rel=stylesheet       href=https://cdn.jsdelivr.net/npm/dna.js@1.7/dist/dna.css>
+<link rel=stylesheet       href=https://cdn.jsdelivr.net/npm/dna.js@1.8/dist/dna.css>
 <link rel=stylesheet       href=../../dist/reset.min.css>
 <link rel=stylesheet       href=letterbox.css>
 <style>
@@ -49,8 +51,8 @@ <h2 class=hide-me>Video</h2>
    -->
 </main>
 
-<script src=https://cdn.jsdelivr.net/npm/jquery@3.5/dist/jquery.min.js></script>
-<script src=https://cdn.jsdelivr.net/npm/dna.js@1.7/dist/dna.min.js></script>
+<script src=https://cdn.jsdelivr.net/npm/jquery@3.6/dist/jquery.min.js></script>
+<script src=https://cdn.jsdelivr.net/npm/dna.js@1.8/dist/dna.min.js></script>
 <script src=https://cdn.jsdelivr.net/npm/web-ignition@1.4/dist/lib-x.min.js></script>
 </body>
 </html>

css/layouts/neon.html

@@ -10,8 +10,10 @@
 <title>Layout &bull; Neon</title>
 <link rel=icon             href=https://centerkey.com/graphics/bookmark.png>
 <link rel=apple-touch-icon href=https://centerkey.com/graphics/mobile-home-screen.png>
+<link rel=preconnect       href=https://fonts.googleapis.com>
+<link rel=preconnect       href=https://fonts.gstatic.com crossorigin>
 <link rel=stylesheet       href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15/css/all.min.css>
-<link rel=stylesheet       href=https://cdn.jsdelivr.net/npm/dna.js@1.7/dist/dna.css>
+<link rel=stylesheet       href=https://cdn.jsdelivr.net/npm/dna.js@1.8/dist/dna.css>
 <link rel=stylesheet       href=../../dist/reset.min.css>
 <link rel=stylesheet       href=neon.css>
 </head>
@@ -111,8 +113,8 @@ <h2>Random</h2>
    </p>
 </footer>
 
-<script src=https://cdn.jsdelivr.net/npm/jquery@3.5/dist/jquery.min.js></script>
-<script src=https://cdn.jsdelivr.net/npm/dna.js@1.7/dist/dna.min.js></script>
+<script src=https://cdn.jsdelivr.net/npm/jquery@3.6/dist/jquery.min.js></script>
+<script src=https://cdn.jsdelivr.net/npm/dna.js@1.8/dist/dna.min.js></script>
 <script src=https://cdn.jsdelivr.net/npm/web-ignition@1.4/dist/lib-x.min.js></script>
 <script src=neon.js></script>
 <script>

css/layouts/vertical-bars.html

@@ -10,8 +10,10 @@
 <title>Layout &bull; Vertical Bars</title>
 <link rel=icon             href=https://centerkey.com/graphics/bookmark.png>
 <link rel=apple-touch-icon href=https://centerkey.com/graphics/mobile-home-screen.png>
+<link rel=preconnect       href=https://fonts.googleapis.com>
+<link rel=preconnect       href=https://fonts.gstatic.com crossorigin>
 <link rel=stylesheet       href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15/css/all.min.css>
-<link rel=stylesheet       href=https://cdn.jsdelivr.net/npm/dna.js@1.7/dist/dna.css>
+<link rel=stylesheet       href=https://cdn.jsdelivr.net/npm/dna.js@1.8/dist/dna.css>
 <link rel=stylesheet       href=../../dist/reset.min.css>
 <link rel=stylesheet       href=vertical-bars.css>
 <style>
@@ -57,8 +59,8 @@ <h3>Section subheader (h3)</h3>
    <p>Copyright &copy; 2151 Enterprise</p>
 </footer>
 
-<script src=https://cdn.jsdelivr.net/npm/jquery@3.5/dist/jquery.min.js></script>
-<script src=https://cdn.jsdelivr.net/npm/dna.js@1.7/dist/dna.min.js></script>
+<script src=https://cdn.jsdelivr.net/npm/jquery@3.6/dist/jquery.min.js></script>
+<script src=https://cdn.jsdelivr.net/npm/dna.js@1.8/dist/dna.min.js></script>
 <script src=https://cdn.jsdelivr.net/npm/web-ignition@1.4/dist/lib-x.min.js></script>
 </body>
 </html>

css/layouts/zebra-sections.html

@@ -10,8 +10,10 @@
 <title>Layout &bull; Zebra Sections</title>
 <link rel=icon             href=https://centerkey.com/graphics/bookmark.png>
 <link rel=apple-touch-icon href=https://centerkey.com/graphics/mobile-home-screen.png>
+<link rel=preconnect       href=https://fonts.googleapis.com>
+<link rel=preconnect       href=https://fonts.gstatic.com crossorigin>
 <link rel=stylesheet       href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15/css/all.min.css>
-<link rel=stylesheet       href=https://cdn.jsdelivr.net/npm/dna.js@1.7/dist/dna.css>
+<link rel=stylesheet       href=https://cdn.jsdelivr.net/npm/dna.js@1.8/dist/dna.css>
 <link rel=stylesheet       href=../../dist/reset.min.css>
 <link rel=stylesheet       href=zebra-sections.css>
 <style>
@@ -107,8 +109,8 @@ <h2>Random 3</h2>
    <div>Copyright &copy; 2151 Enterprise</div>
 </footer>
 
-<script src=https://cdn.jsdelivr.net/npm/jquery@3.5/dist/jquery.min.js></script>
-<script src=https://cdn.jsdelivr.net/npm/dna.js@1.7/dist/dna.min.js></script>
+<script src=https://cdn.jsdelivr.net/npm/jquery@3.6/dist/jquery.min.js></script>
+<script src=https://cdn.jsdelivr.net/npm/dna.js@1.8/dist/dna.min.js></script>
 <script src=https://cdn.jsdelivr.net/npm/web-ignition@1.4/dist/lib-x.min.js></script>
 </body>
 </html>

css/spec-css.html

@@ -8,8 +8,10 @@
 <meta name=viewport  content="width=device-width, initial-scale=1">
 <title>reset.css &bull; Specification page</title>
 <link rel=icon       href=https://centerkey.com/graphics/bookmark.png>
+<link rel=preconnect href=https://fonts.googleapis.com>
+<link rel=preconnect href=https://fonts.gstatic.com crossorigin>
 <link rel=stylesheet href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15/css/all.min.css>
-<link rel=stylesheet href=https://cdn.jsdelivr.net/npm/dna.js@1.7/dist/dna.css>
+<link rel=stylesheet href=https://cdn.jsdelivr.net/npm/dna.js@1.8/dist/dna.css>
 <link rel=stylesheet href=../dist/reset.min.css>
 <style>
    img.mini { height: 60px; }
@@ -319,8 +321,8 @@ <h2>Videos</h2>
    <div>Copyright &copy; 2175.0 Enterprise<br>Fascinating</div>
 </footer>
 
-<script src=https://cdn.jsdelivr.net/npm/jquery@3.5/dist/jquery.min.js></script>
-<script src=https://cdn.jsdelivr.net/npm/dna.js@1.7/dist/dna.min.js></script>
+<script src=https://cdn.jsdelivr.net/npm/jquery@3.6/dist/jquery.min.js></script>
+<script src=https://cdn.jsdelivr.net/npm/dna.js@1.8/dist/dna.min.js></script>
 <script src=../dist/lib-x.min.js></script>
 </body>
 </html>

js/spec-js.html

@@ -5,8 +5,10 @@
 <meta name=viewport  content="width=device-width, initial-scale=1">
 <title>lib-x.js &bull; Specification page</title>
 <link rel=icon       href=https://centerkey.com/graphics/bookmark.png>
+<link rel=preconnect href=https://fonts.googleapis.com>
+<link rel=preconnect href=https://fonts.gstatic.com crossorigin>
 <link rel=stylesheet href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15/css/all.min.css>
-<link rel=stylesheet href=https://cdn.jsdelivr.net/npm/dna.js@1.7/dist/dna.css>
+<link rel=stylesheet href=https://cdn.jsdelivr.net/npm/dna.js@1.8/dist/dna.css>
 <link rel=stylesheet href=../dist/reset.min.css>
 </head>
 <body>
@@ -125,8 +127,8 @@ <h2>A video link</h2>
    <div>Copyright &copy; 2151 Enterprise</div>
 </footer>
 
-<script src=https://cdn.jsdelivr.net/npm/jquery@3.5/dist/jquery.min.js></script>
-<script src=https://cdn.jsdelivr.net/npm/dna.js@1.7/dist/dna.min.js></script>
+<script src=https://cdn.jsdelivr.net/npm/jquery@3.6/dist/jquery.min.js></script>
+<script src=https://cdn.jsdelivr.net/npm/dna.js@1.8/dist/dna.min.js></script>
 <script src=../dist/lib-x.min.js></script>
 <script>
    const makePageRed = () => $('body').css({ backgroundColor: 'pink' });