I’m unclear about how to make use of the “System Fonts” category in the Font Panel, and how and when to specify a font stack.
Under the All Fonts tab, one has access to the library of Google Web Fonts, and any local fonts added to the project file (which can also be seen under the Custom Fonts tab).
Under the System Fonts tab, one can see a list of all the system fonts with preloaded font stacks associated with each system font. (Many of these system fonts do not appear in the Font Name pop-up menu under the Style tab, by the way, e.g., Andale Mono, Big Caslon, etc.)
So, my question is this: how does one make use of all of this?
If one selects an active Google web font, or a custom font imported from the desktop, is it the case that these WOFF files require no font stack because there is 100% certainty that they will be delivered and render properly in the user’s browser?
Is it possible to build and assign a font stack as a failsafe for a Google web font or an imported custom font?
If one wanted to assign a system font like Andale Mono with a font stack to a paragraph style like “Body”, how would one go about that?
A font stack is a list of fonts in the CSS font-family declaration. The fonts are listed in order of preference that you would like them to appear in case of a problem, such as a font not loading.
Now that you know what a font stack is, what would you like to do that involves a font stack?
I do know what a font stack is. What I don’t understand is how and when to specify a font stack using Sparkle’s Font Panel, whether it applies only to system fonts or can also apply to web fonts and custom fonts.
Perhaps you can answer the questions I posted above.
Ok, The font stack is basically a statement in the CSS of a web page. It looks something like this:
body {
font-family: Georgia, "Times New Roman", serif;
}
What this says is if the Georgia font isn’t available for some reason, use Times New Roman instead. You can include a whole list of fonts in preferential order. The only thing you must remember is that the fonts must be separated with a comma. The browser will run down the list of fonts until it finds one that it can use.
Normally, if you specify a web font, such as a google font, it will load without any issues at all. However, if for some reason that font is not available the next fallback will be used instead. Ending the font-stack with either serif or sans-serif should ensure that a suitable system font is used as a fall back, which should produce an acceptable result.
In Sparkle, you would add your font stack between style tags in a code widget.
So, you’re saying that font stacks are not necessary or relevant to web fonts because web fonts will render correctly everywhere. Therefore, the Font Panel interface in Sparkle offers font stack configuration options for system fonts only.
That makes sense, but then I have several questions about how to assign system fonts with their respective font stacks to paragraph styles via the Sparkle interface.
When I click on the pop-up menu for font face selection in the Style tab of the inspector panel, only a subset of six system fonts are available for selection, in spite of the fact that the System Fonts tab in the Font Panel reveals many more system fonts with their own respective font stacks. If I wanted to assign a system font other than one of the six that show up in the font face pop-up menu to my Body paragraph style, how would I achieve that?
So there is no need to add tags in a “code widget”, as @francbrowne suggested. It can be done directly in the Sparkle font panel.
I did a bit of experimenting:
I added system fonts to the SKIA font stack:
Then I added the Skia font to the main font list, via the „All Fonts“ panel and used it to style some text.
The font stack shows up in the CSS / HTML:
It seems you can only use System Fonts and not Web Fonts for stacks. This is what I have found out, I hope it will help you a little bit, otherwise I think we’ll have to ask @duncan for more information.
As for Google web fonts … as Duncan mentioned on the blog some time ago:
Hahaha!
Thanks @mOehlschlager
I’m glad I could help a little bit …
I can always learn something new every day … and I’m always amazed that I still find things in Sparkle, that I didn’t know about, it’s a little bit like finding an Easter egg as a child.
Sorry for not replying earlier. Basically what @Shadowfax said.
In Sparkle font stacks are a bit of a neglected feature, mostly because you don’t really need it. Native fonts don’t play well with Sparkle’s text measuring algorithms which are the basis of layout.
