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.