Looking at the current font control - it’s fine for users, as they have the flexibility to set the font using font name, resources or choose a google font. Devs need some flexibility to deliver a custom font as the default. I’m hoping we can just place a font in a folder somewhere in the element and then set that font using the default method.
Ideally, you shouldn’t be including fonts, those are part of the theme, users should pick and set those, not developers. Why do you want to include and set a font?
You should just set the default class on the element to “font-body” or “font-heading” and provide the Theme Font control in the inspector. This is what users will expect of nicely built Components.
Because myriad components will need to set a font to get the styling that the dev envisions for whatever part of a layout the control is for, at least initially, (I’m fine with users changing a font down the road if they want), but otherwise how do you expect us to build nice things for the users?
Hmmm, not sure I follow, do you have a screenshot?
I don’t want to show anything in public. If you want to do a screenshare that’s fine in a day or so or we can have a private discussion.
@Bill, from reading a few of your posts, it seems like you’re suggesting that styling should be controlled by the component itself—is that correct?
If so, that’s not how Elements operates. In Elements, all styling configurations—such as colors, fonts, and sizes—are controlled by the Theme (which anyone can create) and managed through the Theme Studio (where users can customize the styling to their needs).
Components don’t dictate their styling; instead, they inherit styles from the theme. The theme informs the components how they should look, ensuring consistency across all components, whether they are built-in, third-party, or custom-made. This approach ensures that users can switch themes seamlessly without breaking their site’s design.
Allowing components to dictate their own styles can lead to inconsistencies, making it unclear whether a component will “just work” within a given project. That’s why components rely on the values defined in the Theme Studio as their defaults, ensuring uniformity. They are not opinionated about the actual values—they just need to know that a value exists for each style.
For example:
Let’s say I have a Heading component. I want to set a default font family and font size. In my properties.json, I would define the default font family as heading and the default font size as 3xl.
The component doesn’t concern itself with the specific values of these properties; it only cares that they exist. This allows themes and users to fully customize the styles while ensuring that all components “just work” in any project.
That said, if you have a scenario where this approach might not apply or meet your needs, we’d love to hear more details and discuss it further.
Ok here’s a really simple scenario w/ font - the design calls for some flare and there’s a great google font that will work, so the dev wants that to be the default, as a plain/boring font would destroy the design intentions and the user won’t be able to see that from the start thus their experience won’t match what they will be expecting from demos, etc.
This is where themes come into play. You can customize font families through a theme.
For example, in your case, you would set the header font family to a Google font. Any component that uses the header font will automatically have the Google font applied when using said theme.
In Elements, design (themes) is separated from functionality (components). As mentioned earlier, this ensures that all components “just work” consistently. Users can switch themes at any time, and they can also customise or override any design aspect through the Theme Studio without breaking functionality.
Ok, so to quote from your style guide:
‘In Elements, all styling configurations—such as colors, fonts, and sizes—are controlled by the Theme (which anyone can create)’
How does a dev create a Theme?
You can’t just yet as the public beta doesn’t have a way of loading them, that’ll come later when we open it up for everyone.
You can find a little more details about how these work in the Dev Docs: