🔤 font

font-family

/* Always provide fallbacks */
font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
font-family: 'Fira Code', 'Courier New', monospace;
font-family: Georgia, 'Times New Roman', serif;

/* Generic families */
font-family: sans-serif;   /* Helvetica/Arial/system-ui */
font-family: serif;        /* Georgia/Times */
font-family: monospace;    /* Courier/Consolas */
font-family: system-ui;    /* OS native UI font */

font-size

/* Absolute */
font-size: 16px;
font-size: 1rem;           /* relative to root (html) font-size */
font-size: 1em;            /* relative to parent's font-size */

/* Keywords */
font-size: small; font-size: medium; font-size: large;

/* Viewport-relative */
font-size: 2vw;            /* 2% of viewport width */

/* Clamp for responsive type */
font-size: clamp(1rem, 2.5vw, 1.5rem);  /* min, preferred, max */

font-weight

font Shorthand

/* font: [style] [variant] [weight] [size]/[line-height] family */
font: 700 1rem/1.5 'Inter', sans-serif;
font: italic bold 18px/1.6 Georgia, serif;
font: 500 clamp(1rem, 2vw, 1.25rem) 'Plus Jakarta Sans', system-ui, sans-serif;

/* Note: using the shorthand resets ALL font properties to their defaults.
   Safest to set individual properties when overriding. */

Web Font Loading Best Practices

<!-- Preconnect first -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- Request only weights you use -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">

/* Self-hosted for best performance */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;  /* show fallback while loading */
}