# Migrating to Google Sans Flex This guide helps you migrate from Sharp Grotesk typography to Google Sans Flex (GSF). ## Overview Google Sans Flex is the new typography system. Sharp Grotesk remains available for backward compatibility but is frozen and will not receive updates. ## Migration steps ### 1. Update font loading **Before (Sharp Grotesk):** ```typescript import '@mindvalley/design-system/typography/mindvalley/fonts.css' ``` **After (Google Sans Flex):** Option A - Add to your HTML ``: ```html ``` Option B - CSS @import (Tailwind v4): ```css /* Font import must come FIRST */ @import "https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wdth,wght@75..125,100..900&display=swap"; @import "tailwindcss"; @config "./tailwind.config.js"; ``` > See [Setup Guide](setup.md) for detailed framework examples. ### 2. Update Tailwind plugin **Before:** ```typescript import typography from '@mindvalley/design-system/tailwind/plugins/typography' ``` **After:** ```typescript import typography from '@mindvalley/design-system/tailwind/plugins/typography-gsf' ``` ### 3. Test your app Class names remain the same - your existing markup should work without modification: ```html

Heading

Body text

``` --- ## What changed ### Font family | System | Font Family | |--------|-------------| | Sharp Grotesk | `'Sharp Grotesk Cyr Book 19', Helvetica, Arial, sans-serif` | | Google Sans Flex | `'Google Sans Flex', Helvetica, Arial, sans-serif` | ### Responsive breakpoints | System | Breakpoints | |--------|-------------| | Sharp Grotesk | 2-tier: mobile, desktop | | Google Sans Flex | 3-tier: mobile, tablet (768px), desktop (1024px) | ### Font weights GSF uses CSS `font-weight` values instead of multiple font family files: | Weight | Sharp Grotesk | Google Sans Flex | |--------|---------------|------------------| | Regular | `Sharp Grotesk Cyr Book 19` | `font-weight: 400` | | Medium | `Sharp Grotesk Cyr Medium 20` | `font-weight: 500` | | Semibold | `Sharp Grotesk Cyr Semibold 20` | `font-weight: 600` | | Bold | - | `font-weight: 700` | ### Variable font axes GSF is a variable font with two axes: | Axis | CSS Property | Description | |------|--------------|-------------| | `wdth` | `font-variation-settings` | Width (92 for body, 100 for titles) | | `slnt` | `font-variation-settings` | Slant (-10 for italics) | ### New italic variants (GSF only) GSF introduces italic variants: - `body-italic`, `body-bold-italic` - `body-large-italic`, `body-large-bold-italic` - `body-small-italic`, `body-small-bold-italic` - `body-xs-italic` --- ## Running both systems > **Note:** The recommended approach is to migrate fully from Sharp Grotesk to Google Sans Flex. Running both systems simultaneously is not recommended for production use, but is shown here as a technique for gradual migration or A/B testing. If needed, you can run both typography systems side-by-side using prefixes: ```javascript // tailwind.config.js const sharpGrotesk = require('@mindvalley/design-system/tailwind/plugins/typography').default const googleSansFlex = require('@mindvalley/design-system/tailwind/plugins/typography-gsf').default module.exports = { plugins: [ sharpGrotesk(), googleSansFlex({ prefix: 'gsf-' }), // or whatever prefix you need. ], } ``` > **Warning:** Both plugins generate identical class names (`.body`, `.title-1`, etc.). Using prefixes is **required** when running both systems together to avoid conflicts. Without prefixes, the second plugin will override the first. ```html

Heading

Heading

``` --- ## Troubleshooting ### Font not loading Ensure you've added the Google Fonts link to your HTML ``. ### Missing tablet breakpoint styles The GSF plugin supports 3-tier responsive. Ensure you're using the latest version of the design system. ### Class names not generated Check that your Tailwind content paths include files using typography classes so the JIT compiler includes them. --- ## Related - [Setup Guide](setup.md) - Complete setup instructions - [Typography Overview](README.md) - Class reference