Bits of .NET

📦 One Font File, Infinite Styles

Normal fonts need separate files for each weight (400, 700). Variable fonts contain all weights in one file. Smaller total size, smoother transitions.

📝 Using Variable Fonts

@font-face {
  font-family: 'InterVariable';
  src: url('InterVariable.woff2') format('woff2');
  font-weight: 100 900;  /* Range of weights */
  font-stretch: 75% 125%; /* Optional width range */
}

body {
  font-family: 'InterVariable', sans-serif;
  font-weight: 400;  /* Normal weight */
}

.bold {
  font-weight: 700;  /* Bold */
}

/* Even custom weights! */
.custom-weight {
  font-weight: 523;  /* Yes, any number in range */
}

🎯 Animating Font Weight

.animated-text {
  font-family: 'InterVariable', sans-serif;
  font-weight: 400;
  transition: font-weight 0.3s ease;
}

.animated-text:hover {
  font-weight: 800;  /* Smooth weight transition! */
}

/* Multiple axes (if font supports) */
.font-with-axes {
  font-weight: 450;
  font-stretch: 110%;
  font-optical-sizing: auto;
}

💡 Popular Variable Fonts

• Inter Variable: Google Fonts (free, excellent for UI)
• Roboto Flex: Google Fonts (very wide weight range)
• Source Sans Variable: Adobe (great for text)
• Recursive: Casual to monospace, weight to slant