While any Google fonts could be included here, the process of manually adding each font family is arduous and makes this file difficult for developers to navigate. Previously when fonts were applied to themes using the select setting type, each font would have to be added to the list of options in the setting configuration, and the theme would have to implement custom logic to load the font.
You might also like: Understanding Shopify Theme Styles and Presets With settings_data.json. I’ll also show you how you can test and QA your themes to ensure each font variant is displaying correctly. In this article, I’ll demonstrate how you can use the font_picker setting type in your client’s themes, and show you a few ways to set up a stylesheet using the new Liquid font filters. Once the font picker is set up, your clients can quickly and easily choose from a wide range of premium fonts, avoiding any licensing or difficult coding.
#HTML5 FONT PICKER UPDATE#
However, many clients may want to update their existing custom themes to gain access to the new Shopify font library. Currently this feature is natively supported on the Slate starter theme, which is awesome news for developers working on new themes! Your clients will still be able to select premium fonts from the Monotype collection, including Avenir, Linotype Didot, and Charter as well as from the popular Google Fonts collection-including Open Sans and Montserrat.Ī key component of this new feature is the font_picker setting type, which can be implemented into themes from the settings_schema.json file, and section files. The new Shopify font library includes fonts licenced from Monotype, a selection of Google Fonts, and web-safe fonts. Having such a large selection of quality typefaces at your clients’ disposal will give them a strong starting point to communicate their brand identity.
#HTML5 FONT PICKER FOR FREE#
Shopify recently announced a new partnership with Monotype, which has made hundreds of beautiful new fonts available for free to Shopify merchants on their online stores.
0 kommentar(er)
