Choose variable font
In Fonts Google find font you would like to use, select it, and click "Get Font" button at the top right corner of the screen:
After the font has been selected, now you will need to grab the font link. To do that, click the "<> Get embed code" button, and copy the link:
On the left side of the screen, you will find the "Weight" of a font. Remember that when you'll create your axis in the editor.
Create font in Semplice
Now when we have a font link on our hands we can then move on to Semplice. Navigate to the "Customize" > "Webfonts", click "+ Add Source" button. Select the "Service" option, write your font name, and paste the link provided by Fonts Google:
Now we need to create a font style, click on the "+ Add New" button on the top right corner of the screen. In the "System Name" field make sure to add the correct font system name (without it font won't be connected. In our case we use "Montserrat" font which has the same system name. You can check your font system name in Fonts Google where you copy font link, under the "CSS class for a variable style" look for "font-family"). Then write the name of your font in the "Display Name" field (you can write whatever you need there):
After this is done, switch to the "Variable" tab, click the "+ Add Axis". Write "wght" and add your font weight. Repeat this process for "wdth":
Save your changes.
Create Variable Style
Now we have successfully connected our font and can create our styles. Click "+ Add Variable Style" to do that. From there you can create as many font styles as needed:
If you would like to add variable fonts using self-hosted fonts, you can check out the following guide: Using Variable Fonts in Semplice