lib fonts.ts

0% Statements 0/131
100% Branches 0/0
0% Functions 0/1
0% Lines 0/131
Press n or j to go to the next uncovered block, b, p or k for the previous block.

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  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  /**
 * Font Configuration with Next.js Font Optimization
 *
 * Uses next/font for automatic font optimization:
 * - Self-hosting for better performance
 * - Zero layout shift with font-display: swap
 * - Automatic subsetting
 * - Preloading critical fonts
 *
 * @see https://nextjs.org/docs/app/building-your-application/optimizing/fonts
 */

import { Inter, Roboto, Poppins } from 'next/font/google';
import localFont from 'next/font/local';

/**
 * Primary Font: Euclid Circular A (Custom Local Font)
 *
 * Loaded locally for brand consistency and performance
 */
export const euclidCircularA = localFont({
  src: [
    {
      path: '../app/fonts/euclid-circular-a/EuclidCircularA-Light.woff2',
      weight: '300',
      style: 'normal'},
    {
      path: '../app/fonts/euclid-circular-a/EuclidCircularA-Regular.woff2',
      weight: '400',
      style: 'normal'},
    {
      path: '../app/fonts/euclid-circular-a/EuclidCircularA-Medium.woff2',
      weight: '500',
      style: 'normal'},
    {
      path: '../app/fonts/euclid-circular-a/EuclidCircularA-SemiBold.woff2',
      weight: '600',
      style: 'normal'},
    {
      path: '../app/fonts/euclid-circular-a/EuclidCircularA-Bold.woff2',
      weight: '700',
      style: 'normal'},
  ],
  variable: '--font-euclid',
  display: 'swap',
  preload: true,
  fallback: ['system-ui', 'sans-serif']});

/**
 * Fallback Font: Inter (Google Font)
 *
 * Modern, readable sans-serif font optimized for screens
 * Used as fallback if custom font fails to load
 */
export const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
  display: 'swap',
  weight: ['300', '400', '500', '600', '700'],
  preload: true,
  fallback: ['system-ui', 'sans-serif']});

/**
 * Alternative Font: Poppins (Google Font)
 *
 * Geometric sans-serif with friendly appearance
 * Optional alternative for headings
 */
export const poppins = Poppins({
  subsets: ['latin'],
  variable: '--font-poppins',
  display: 'swap',
  weight: ['300', '400', '500', '600', '700', '800'],
  preload: false, // Only load when needed
});

/**
 * Monospace Font: Roboto Mono (Google Font)
 *
 * For code blocks and technical content
 */
export const robotoMono = Roboto({
  subsets: ['latin'],
  variable: '--font-mono',
  display: 'swap',
  weight: ['400', '500', '700'],
  preload: false, // Only load when needed
});

/**
 * Font class helper
 *
 * Combine multiple font variables for use in className
 *
 * @example
 * ```tsx
 * <html className={fontClasses}>
 *   <body>...</body>
 * </html>
 * ```
 */
export const fontClasses = [
  euclidCircularA.variable,
  inter.variable,
  poppins.variable,
  robotoMono.variable,
].join(' ');

/**
 * Font utilities for specific use cases
 */
export const fonts = {
  /**
   * Primary font for body text
   */
  body: euclidCircularA.className,

  /**
   * Font for headings
   */
  heading: euclidCircularA.className,

  /**
   * Font for monospace/code
   */
  mono: robotoMono.className,

  /**
   * Alternative decorative font
   */
  decorative: poppins.className};