CSS Custom Properties and Theme Fields

[SBurnett28]

Hi there,

I'm trying to convert the variables in the theme-overrides file to custom properties however I'm having a specific issue with the font values where, "x.font.variant" for font variants containing a font weight AND a font style (like 700 italic) are being output as "700italic" as one singular value rather than a space separated value. So when I try to use the custom variable in a CSS font property it obviously doesn't understand 700italic as it's supposed to be "700 italic 16px/1.5 arial" for example. I tried doing somrthing like, "x.font.font_style.font_weight" among other things but it doesn't let me target the individual font styles inside the HubL styles variable.

I thought I might have to hide the variation field option (if possible) and instead add font weight/font style as individual option fields, but some of the fonts don't have certain variations e.g. light+italic, or semi-bold, so I don't want someone to mistakenly select that option and not see a change if that particular font doesn't have those options.

Is there a way I'm missing so that I can target specifically the weight or style individually?

[alyssamwilie · Accepted solution]

@SBurnett28 This is how I create a font shorthand from a theme font field.

1. I create a seperate variable for style by checking the variant and setting my variable as "italic" if the variant contains "italic" otherwise it's set to "normal".
2. Then for the weight I use |replace to just completely remove "italic" and change "regular" to 400 (you could just keep it as regular, but I like using the numbers instead lol).

{% set style = "italic" if theme.text_font.variant is containing "italic" else "normal" %}

--{{ slug }}-font: {{
    style
    ~" "~theme.text_font.variant|replace('italic','')|replace('regular','400')
    ~" "~theme.text_font.size~"px"
    ~"/"~theme.line_height
    ~" "~font_stack(theme.text_font.font, theme.text_font.fallback) }};

Would be nice if Hubspot just separated those out to begin with as "style" and "weight" since that's how it's used in CSS....

[SBurnett28]

Hey @alyssamwilie 

That's a great trick actually, I might try that, thank you. I'm also noticing a bit of weirdness when it comes to the font fallbacks where certain fonts have a fallback baked in already (can't remember which ones off the top of my head - I want to say Georgia or Andale Mono) and so when I use "font.font, font.fallback" the fallback is empty, meaning I have an extra comma just floating around which breaks the entire property. Have you noticed this? I managed to work around it by using an if statement but just thought it was mildly annoying (much like the font variants among other things...) to deal with. I don't like using a ton of HubL if I don't have to because I'm paranoid about performance!

[dennisedson]

I feel like @Gonzalo will have some thoughts on this!