Upfront Builder Default Font

Hello,
I hope this messages finds you well. I am working on recreating a theme in Upfront and have a question in regards to setting the default font for all elements. I understand that the Typography manager lets you select a google font, but we are looking to use a font that is already installed on our visitors computers. Currently, we set a font stack for the font-family and have set this font stack within the Global Theme CSS. However, when I edit a Type Element via the Theme Settings, this font is not listed within the Typeface and am forced to select one from the list. The problem with this, even if I add an !important to my global CSS, is that occasionally the text will flip fonts when hovering. This doesn't seam to happen all the time, and it might depend on where the user hovers, but I have seen the text change fonts upon hover.

If I want to set the font for all text items on the site to be Palatino, how do I properly do this? Is there a way to include Palatino in the Typeface area of the Theme Settings? Will I still need to set a font stack, or is there a way to use the users local font and then download the web font version only if not available locally, while not causing issues with Upfront?

I would expect that using a font stack not be ideal as different fonts tend to look, well, different. I also would not want to serve a web font to visitors that already have the font installed, which in this case is most people. So what would be the optimal way of setting this up? Ideally we just want to set all text on the site to be Palatino. I would be OK with serving a web font, but would want that to be downloaded only by users that do not have it. I would be OK with using the font stack with fonts that are in fact very similar and hard to tell the difference. So, how do I set up an @font-face with local priority, then download if needed, then stack if necessary, while not having weird font issues with Upfront? Please let me know.

Thanks,
Michael

  • Dimitris

    Hey there Mtwo,

    hope you're doing good and thanks for reaching us!

    Unfortunately, there isn't currently a workaround for this so all that can be done now are getting down to "Global Theme CSS" section, in where you should declare any font-faces that you should include in your theme and most probably use !important suffixes to override "default" fonts.

    As this may become a great addition/upgrade of UpFront Builder though, I could move this thread to our Features & Feedback section for further consideration and member engagement.

    Warm regards,
    Dimitris

  • Dimitris

    Hello Mtwo,

    I had some more insights on this from our UF dev team and there's a workaround on adding a custom font.

    In settings.php of theme, you can add something like:
    'additional_fonts' => '[{family:"test font", variants:["regular", "italic", "700 italic"]}]',
    in settings array.

    Please keep in mind the following points though:
    1. Fonts still needs to be registered & enqueued, but adding that line as mentioned would add font and variants to upfront interface i.e. dropdowns for font family will have "test font" and dropdowns for variants will have "regular", "italic" and "bold italic".
    2. Variants can be any combination of number 100, 200, ... 900 (those are weights) and words "normal" "italic" and "oblique" so: "100 oblique", "500 italic", "700 normal" are all valid values for variants.
    3. "test font" has to be exact name of the font family that should show in CSS.

    Kind regards,
    Dimitris