@@ -987,6 +987,7 @@ return [
987987 ->presets([
988988 'heading' => [
989989 'fontFamily' => 'Inter',
990+ 'fontWeight' => '700',
990991 'fontSize' => '2xl',
991992 'lineHeight' => 'tight',
992993 'fontStyle' => 'normal',
@@ -995,6 +996,7 @@ return [
995996 ],
996997 'body' => [
997998 'fontFamily' => 'Inter',
999+ 'fontWeight' => '400',
9981000 'fontSize' => 'base',
9991001 'lineHeight' => 'normal',
10001002 'fontStyle' => 'normal',
@@ -1035,6 +1037,7 @@ This generates CSS for typography styles:
10351037[data-typography = ' heading' ] {
10361038 --typography-font-family : ' Inter' , sans-serif ;
10371039 --typography-font-style : normal ;
1040+ --typography-font-weight : 700 ;
10381041 --typography-font-size : 1.5rem ;
10391042 --typography-line-height : 1.25 ;
10401043 --typography-letter-spacing : 0em ;
@@ -1044,6 +1047,7 @@ This generates CSS for typography styles:
10441047[data-typography = ' body' ] {
10451048 --typography-font-family : ' Inter' , sans-serif ;
10461049 --typography-font-style : normal ;
1050+ --typography-font-weight : 400 ;
10471051 --typography-font-size : 1rem ;
10481052 --typography-line-height : 1.5 ;
10491053 --typography-letter-spacing : 0em ;
@@ -1079,6 +1083,7 @@ h2,
10791083h3 {
10801084 --typography-font-family : ' Inter' , sans-serif ;
10811085 --typography-font-style : normal ;
1086+ --typography-font-weight : 700 ;
10821087 --typography-font-size : 1.5rem ;
10831088 --typography-line-height : 1.25 ;
10841089 --typography-letter-spacing : 0em ;
@@ -1091,6 +1096,7 @@ li,
10911096td {
10921097 --typography-font-family : ' Inter' , sans-serif ;
10931098 --typography-font-style : normal ;
1099+ --typography-font-weight : 400 ;
10941100 --typography-font-size : 1rem ;
10951101 --typography-line-height : 1.5 ;
10961102 --typography-letter-spacing : 0em ;
@@ -1106,6 +1112,7 @@ In your theme's CSS, apply the generated CSS variables to elements:
11061112[data-typography ] {
11071113 font-family : var (--typography-font-family );
11081114 font-style : var (--typography-font-style );
1115+ font-weight : var (--typography-font-weight );
11091116 font-size : var (--typography-font-size );
11101117 line-height : var (--typography-line-height );
11111118 letter-spacing : var (--typography-letter-spacing );
@@ -1120,6 +1127,7 @@ Each preset is an array with the following properties:
11201127| Property | Type | Description | Required | Values |
11211128| --------------- | ------------- | -------------------------------------- | -------- | -------------------------------------------------------------------------------------- |
11221129| ` fontFamily ` | string\| null | Font family name | No | Any font family name |
1130+ | ` fontWeight ` | string | Font weight | Yes | ` 100 ` , ` 200 ` , ` 300 ` , ` 400 ` , ` 500 ` , ` 600 ` , ` 700 ` , ` 800 ` , ` 900 ` |
11231131| ` fontSize ` | string\| array | Font size token or responsive config | Yes | ` xs ` , ` sm ` , ` base ` , ` lg ` , ` xl ` , ` 2xl ` , ` 3xl ` , ` 4xl ` , ` 5xl ` , ` 6xl ` , ` 7xl ` , ` 8xl ` , ` 9xl ` |
11241132| ` lineHeight ` | string\| array | Line height token or responsive config | Yes | ` none ` , ` tight ` , ` snug ` , ` normal ` , ` relaxed ` , ` loose ` |
11251133| ` fontStyle ` | string | Font style | Yes | ` normal ` , ` italic ` |
@@ -1175,6 +1183,7 @@ TypographyPresets::make('typography_presets', 'Typography Presets')
11751183 ->presets([
11761184 'responsive-heading' => [
11771185 'fontFamily' => 'Inter',
1186+ 'fontWeight' => '700',
11781187 'fontSize' => [
11791188 '_default' => '2xl', // Default size
11801189 'mobile' => 'xl', // max-width: 639px
0 commit comments