Improve LCP: preload clock font, async-load external CSS

- Move DSEG14 font to public/fonts/ and declare @font-face in
  index.html so it can be preloaded before React renders
- Add font-display: swap so browser renders fallback instantly
- Load FontAwesome and Google Fonts asynchronously via rel=preload
  + onload trick — no longer render-blocking
- Add preconnect hints for fonts.googleapis.com / fonts.gstatic.com
- Remove duplicate @font-face from App.tsx GlobalStyle

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: ChengaDev

public/fonts/DSEG14ClassicRegular.ttf

@@ -56,13 +56,43 @@
 			src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
 		></script>
 		<title>ShotClock Pro - Basketball Shot Clock Training</title>
+		<!-- Preload clock font so it's ready before React renders the display -->
+		<link rel="preload" href="/fonts/DSEG14ClassicRegular.ttf" as="font" type="font/ttf" crossorigin="anonymous" />
+		<style>
+			@font-face {
+				font-family: 'DSEG14ClassicRegular';
+				src: url('/fonts/DSEG14ClassicRegular.ttf') format('truetype');
+				font-weight: normal;
+				font-style: normal;
+				font-display: swap;
+			}
+		</style>
+
+		<!-- FontAwesome — load async, don't block render -->
 		<link
-			rel="stylesheet"
+			rel="preload"
 			href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
+			as="style"
 			integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
 			crossorigin="anonymous"
+			onload="this.rel='stylesheet'"
+		/>
+		<noscript>
+			<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
+		</noscript>
+
+		<!-- Google Fonts — load async, don't block render -->
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
+		<link
+			rel="preload"
+			href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap"
+			as="style"
+			onload="this.rel='stylesheet'"
 		/>
-		<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet" />
+		<noscript>
+			<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet" />
+		</noscript>
 		<style>
 			body {
 				font-family: 'Roboto', sans-serif !important;

public/index.html

@@ -8,7 +8,6 @@ import Footer from './components/Footer'
 import CookieBanner from './components/CookieBanner'
 import { lightTheme, darkTheme } from './themes/themes'
 import { createGlobalStyle } from 'styled-components'
-import './assets/fonts/dseg14/dseg14.css'
 import { useSpring, animated } from 'react-spring'
 import Themes from './constants/Themes'
 
@@ -169,13 +168,6 @@ const App = () => {
 }
 
 const GlobalStyle = createGlobalStyle`
-  @font-face {
-    font-family: 'DSEG14ClassicRegular';
-    src: url('./assets/fonts/dseg14/DSEG14ClassicRegular.ttf') format('truetype');
-    font-weight: normal;
-    font-style: normal;
-  }
-
   body {
     margin: 0;
     padding: 0;

src/App.tsx

@@ -3,4 +3,5 @@
 	src: url('./DSEG14ClassicRegular.ttf') format('truetype');
 	font-weight: normal;
 	font-style: normal;
+	font-display: swap;
 }