# Custom CSS for Font Sizes

Webflow does not [**yet**](https://x.com/leinwand/status/1898901668483485730) allow custom values to be applied to variables. However, if any of the following apply to you, **custom CSS** can help you implement font size changes more efficiently:

* You want true fluid behavior on text and your custom classes.
* You want to **override** the default absolute values in the **Text** > **Font Size** variables.
* You prefer not to manually input fluid values for each class in the Style panel.

To simplify this process, we've prepared a CSS template that allows you to override font size variables and the font sizes of text classes effortlessly.

Simply copy and paste values generated by the [**Fluid Type Scale Calculator**](https://www.fluid-type-scale.com/) into the template and place the code inside `css_custom` in the <mark style="color:green;">**Global Code**</mark> component.

```html
<style>
/* overriding values of the font size variables */
:root {
  --_text---font-size--3xs: ;
  --_text---font-size--2xs: ;
  --_text---font-size--xs: ;
  --_text---font-size--sm: ;
  --_text---font-size--base: ;
  --_text---font-size--lg: ;
  --_text---font-size--xl: ;
  --_text---font-size--2xl: ;
  --_text---font-size--3xl: ;
  --_text---heading--h6: ;
  --_text---heading--h5: ;
  --_text---heading--h4: ;
  --_text---heading--h3: ;
  --_text---heading--h2: ;
  --_text---heading--h1: ;
}
/* applying the above variables to the text classes */
body       { font-size: var(--_text---font-size--base); }
.text-3xs  { font-size: var(--_text---font-size--3xs); }
.text-2xs  { font-size: var(--_text---font-size--2xs); }
.text-xs   { font-size: var(--_text---font-size--xs); }
.text-sm   { font-size: var(--_text---font-size--sm); }
.text-base { font-size: var(--_text---font-size--base); }
.text-lg   { font-size: var(--_text---font-size--lg); }
.text-xl   { font-size: var(--_text---font-size--xl); }
.text-2xl  { font-size: var(--_text---font-size--2xl); }
.text-3xl  { font-size: var(--_text---font-size--3xl); }
h6, .h6    { font-size: var(--_text---heading--h6); }
h5, .h5    { font-size: var(--_text---heading--h5); }
h4, .h4    { font-size: var(--_text---heading--h4); }
h3, .h3    { font-size: var(--_text---heading--h3); }
h2, .h2    { font-size: var(--_text---heading--h2); }
h1, .h1    { font-size: var(--_text---heading--h1); }
</style>
```



**Example of a larger font size setup:**

✦ [Configuration from --3xs to --base →](https://www.fluid-type-scale.com/calculate?minFontSize=18\&minWidth=360\&minRatio=1.1095\&maxFontSize=24\&maxWidth=1280\&maxRatio=1.13375\&steps=3xs%2C2xs%2Cxs%2Csm%2Cbase\&baseStep=base\&prefix=_text---font-size-\&useContainerWidth=false\&includeFallbacks=false\&useRems=true\&remValue=16\&decimals=3\&previewFont=Inter\&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground\&previewWidth=1280)\
✦ [Configuration from --base to --3xl →](https://www.fluid-type-scale.com/calculate?minFontSize=18\&minWidth=360\&minRatio=1.057475\&maxFontSize=24\&maxWidth=1280\&maxRatio=1.15475\&steps=base%2Clg%2Cxl%2C2xl%2C3xl\&baseStep=base\&prefix=_text---font-size-\&useContainerWidth=false\&includeFallbacks=false\&useRems=true\&remValue=16\&decimals=3\&previewFont=Inter\&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground\&previewWidth=1280)\
✦ [Configuration from --h6 to --h1 →](https://www.fluid-type-scale.com/calculate?minFontSize=18\&minWidth=360\&minRatio=1.24577245\&maxFontSize=24\&maxWidth=1280\&maxRatio=1.347625\&steps=h6%2Ch5%2Ch4%2Ch3%2Ch2%2Ch1\&baseStep=h6\&prefix=_text---heading-\&useContainerWidth=false\&includeFallbacks=false\&useRems=true\&remValue=16\&decimals=3\&previewFont=Inter\&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground\&previewWidth=1280)

```html
<style>
/* overriding values of the font size variables */
:root {
  --_text---font-size--3xs: clamp(0.742rem, 0.288vi + 0.678rem, 0.908rem);
  --_text---font-size--2xs: clamp(0.824rem, 0.358vi + 0.743rem, 1.029rem);
  --_text---font-size--xs: clamp(0.914rem, 0.44vi + 0.815rem, 1.167rem);
  --_text---font-size--sm: clamp(1.014rem, 0.538vi + 0.893rem, 1.323rem);
  --_text---font-size--base: clamp(1.125rem, 0.652vi + 0.978rem, 1.5rem);
  --_text---font-size--lg: clamp(1.19rem, 0.943vi + 0.977rem, 1.732rem);
  --_text---font-size--xl: clamp(1.258rem, 1.291vi + 0.968rem, 2rem);
  --_text---font-size--2xl: clamp(1.33rem, 1.703vi + 0.947rem, 2.31rem);
  --_text---font-size--3xl: clamp(1.407rem, 2.192vi + 0.914rem, 2.667rem);
  --_text---heading--h6: clamp(1.125rem, 0.652vi + 0.978rem, 1.5rem);
  --_text---heading--h5: clamp(1.401rem, 1.078vi + 1.159rem, 2.021rem);
  --_text---heading--h4: clamp(1.746rem, 1.701vi + 1.363rem, 2.724rem);
  --_text---heading--h3: clamp(2.175rem, 2.602vi + 1.59rem, 3.671rem);
  --_text---heading--h2: clamp(2.71rem, 3.892vi + 1.834rem, 4.947rem);
  --_text---heading--h1: clamp(3.376rem, 5.724vi + 2.088rem, 6.667rem);
}
/* applying the above variables to the text classes */
body       { font-size: var(--_text---font-size--base); }
.text-3xs  { font-size: var(--_text---font-size--3xs); }
.text-2xs  { font-size: var(--_text---font-size--2xs); }
.text-xs   { font-size: var(--_text---font-size--xs); }
.text-sm   { font-size: var(--_text---font-size--sm); }
.text-base { font-size: var(--_text---font-size--base); }
.text-lg   { font-size: var(--_text---font-size--lg); }
.text-xl   { font-size: var(--_text---font-size--xl); }
.text-2xl  { font-size: var(--_text---font-size--2xl); }
.text-3xl  { font-size: var(--_text---font-size--3xl); }
h6, .h6    { font-size: var(--_text---heading--h6); }
h5, .h5    { font-size: var(--_text---heading--h5); }
h4, .h4    { font-size: var(--_text---heading--h4); }
h3, .h3    { font-size: var(--_text---heading--h3); }
h2, .h2    { font-size: var(--_text---heading--h2); }
h1, .h1    { font-size: var(--_text---heading--h1); }
</style>
```



