Join the Webstudio community

Updated 2 months ago

Is it possible to create your own custom font stack in Webstudio?

At a glance

The community member tried to use a custom font in the Advance panel, but everything after the initial font was replaced with sans-serif when they clicked Enter. Other community members suggested that adding custom CSS code to the site settings may work, but it is not reflected in the Webstudio workspace. They also suggested trying different ways of typing the font family, such as without quotes and with comma separation. The community members identified a bug in the Webstudio software and provided a link to a pull request that fixes the issue.

Useful resources
I tried it using the Advance panel but everything after the initial font gets deleted and replace with san-serif when I click Enter.
t
O
16 comments
I see that adding custom css code to site settings works, unfortunately that css code isn't reflected in the Webstudio workspace. It is necessary to publish the project then look at in in a browser to see the fonts as they are intended to be.
You can type any font families in the input there
That's weird, what did you type? Also try font family input in typography section
In the Advanced panel was trying 'EB Garamond', serif; and the serif kept being auto corrected to san-serif. If I try typing EB Garamond and serif into the file in the Typography panel's Family field, Webstudio just ignores all of it.
I see the error, seems like when you typed "EB Garamond", serif we turned it into "EB Garamond, serif" so a single font
seems like its not always the case though
So, is there a way I should type it so that it would work as intended?
Right now just type the EB Garamond
If it's in the system, it will render
Fallback is automatically added to sans-serif
Without quotes may work also with comma separation, need to check
This will be great.
Add a reply
Sign up and join the conversation on Discord