• Font variable

    Read more

    Reduce http requests with one font file handling variations.

    "fontFamilies": [
    				{
    					"fontFamily": "montserrat, sans-serif",
    					"name": "Montserrat",
    					"slug": "default",
    					"fontFace": [
    						{
    							"fontFamily": "montserrat",
    							"fontVariationSettings": "'wght' 400",
    							"fontStyle": "normal",
    							"fontWeight": "400",
    							"src": ["file:./assets/fonts/Montserrat-VariableFont_wght.ttf"]
    						},
    						{
    							"fontFamily": "montserrat",
    							"fontVariationSettings": "'wght' 500",
    							"fontStyle": "normal",
    							"fontWeight": "500",
    							"src": ["file:./assets/fonts/Montserrat-VariableFont_wght.ttf"]
    						},
    						{
    							"fontFamily": "montserrat",
    							"fontVariationSettings": "'wght' 600",
    							"fontStyle": "normal",
    							"fontWeight": "600",
    							"src": ["file:./assets/fonts/Montserrat-VariableFont_wght.ttf"]
    						},
    						{
    							"fontFamily": "montserrat",
    							"fontVariationSettings": "'wght' 400",
    							"fontStyle": "italic",
    							"fontWeight": "400",
    							"src": ["file:./assets/fonts/Montserrat-Italic-VariableFont_wght.ttf"]
    						}
    					]
    				}
    			]
  • Font weights

    Read more

    To set the font weights :

    {
    	"settings": {
    		"typography": {
    			"fontFamilies": [
    				{
    					"fontFamily": "\"Barlow\", sans-serif",
    					"name": "Barlow",
    					"slug": "barlow",
    					"fontFace" : [
    						{
    							"fontFamily": "Barlow",
    							"fontWeight": "400",
    							"src": "file:./assets/fonts/Barlow-Regular-webfont.woff"
    						},
    						{
    							"fontFamily": "Barlow",
    							"fontWeight": "500",
    							"fontStyle": "normal",
    							"src": "file:./assets/fonts/Barlow-Medium-webfont.woff"
    						},
    						{
    							"fontFamily": "Barlow",
    							"fontWeight": "700",
    							"fontStyle": "normal",
    							"src": "file:./assets/fonts/Barlow-Bold-webfont.woff"
    						}
    					]
    				}
    			]
    		}
    	}
    }
    

    Note : reduce a variable font to the required variations: fonttools varLib.instancer ./MyAwesomeVariableFont.ttf wdth=drop opsz=drop wght=300:700

    https://morgan.cugerone.com/blog/how-to-disable-variable-fonts-variation-features-with-open-source-solution