Fonts
You can add fonts to your theme in the following ways:
- Add a configuration item of type font_picker in the global configuration setting_schema.json, and select the font through the Google font library.
- Use custom fonts or other third-party solutions.
Because the font is a separate file resource, it needs to be downloaded by the browser when the browser is rendered, which will affect the overall performance of the store.
Using Google fonts
1. Add and configure the font_picker control type, allowing merchants to choose fonts directly through the theme editor. The font_picker control return value is just a string of font names.
2. Get the CSS style of the Google Font via Google font API.
For example:
https://fonts.googleapis.com/css?family=Bodoni%20Moda
Output the following CSS style：
/* latin-ext */
@font-face {
font-family: 'Bodoni Moda';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/bodonimoda/v7/aFT67PxzY382XsXX63LUYL6GYFcan6NJrKp-VPjfJMShrpsGFUt8oU7a8Il4snrJcwDiodAY.woff) format('woff');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Bodoni Moda';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/bodonimoda/v7/aFT67PxzY382XsXX63LUYL6GYFcan6NJrKp-VPjfJMShrpsGFUt8oU7a8Id4snrJcwDioQ.woff) format('woff');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
In order to improve font access efficiency, we optimize the configuration of the font_picker type used in the global configuration setting_schema.json, we will try to get the CSS style and inject these configuration fonts through the Google API at the SSR stage and inject it into the head tag, as shown below. To satisfy the theme CSR stage to request font resource file as soon as possible
<style>
/* arabic */
@font-face {
font-family: 'El Messiri';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/elmessiri/v22/K2FhfZBRmr9vQ1pHEey6GIGo8_pv3myYjuXwe55ijDzspLpHh2rHkg.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
/* cyrillic */
@font-face {
font-family: 'El Messiri';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/elmessiri/v22/K2FhfZBRmr9vQ1pHEey6GIGo8_pv3myYjuXwe55jjDzspLpHh2rHkg.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
</style>
3. Quote the selected font file
Quote selected fonts to show any specific CSS style, such as font-family、font-weight and font-style.
.title1 {
font-family: Old Standard TT;
font-style: normal;
font-weight: 400;
letter-spacing: 0em;
line-height: 1.4;
}
Custom Fonts
With most third party font solutions, you have the following options for including the font in your theme:
Third party hosted fonts
If a font is hosted with the third party, then they'll usually provide a <link> tag to include the font in your theme:
<link rel='stylesheet' href='[font-url]' >
The <link> tag is often included in theme.html, or your chosen layout file.
Host fonts in your theme
If you have your own font files, follow these steps to include the font in your theme.
If you're planning on pushing your theme to a store using SHOPLINE CLI, uploading a theme ZIP file or upload font files in the code editor, then you should add your fonts in your theme's assets folder.
- Add your font files to the
assetsdirectory. - Create a CSS
@font-facerule so that you can reference the font. Use theasset_url helperto output the URL to the font file:@font-face {
font-family: 'Font name';
src: url('{{ asset_url '[font-file-name]' }}') format('[font-format]');
}
Error loading component.