Add Preloaded Fonts in Vartheme
Following the new way in the new Drupal default front end theme Olivero
{% include '@olivero/includes/preload.twig' with { olivero_path: olivero_path } only %}
Having the following in Vartheme BS4 and VARTHEM_BS4_SUBTHEME. And the include.
{%- include '@vartheme_bs4/includes/preload.twig' with { vartheme_bs4_path: vartheme_bs4_path, html_dir: html_attributes['dir'] } only -%}
{%- include '@VARTHEME_BS4_SUBTHEME/includes/preload.twig' with { VARTHEME_BS4_SUBTHEME_path: VARTHEME_BS4_SUBTHEME_path, html_dir: html_attributes['dir'] } only -%}Custom Vartheme Sub Themes are able to add their preloaded assets on demand.
Steps to Add a New Web Font
1. Add Web Font Files in the Fonts Folder
Example: The Lora font
Go to the Lora web font page and Download the family.
Check the license before using the web font
These fonts are licensed under the Open Font License.
You can use them freely in your products & projects - print or digital, commercial or otherwise.
This isn't legal advice, please consider consulting a lawyer and see the full license for all details.
Not recommended to use not licensed font!
Buy a license if it was possible and budget for a unique branded font.
Or hire a typography font designer.
Copy the list of web font files to
"PROJECT_PATH/themes/custom/MYTHEME/fonts/lora/webfonts"Create the
"PROJECT_PATH/themes/custom/MYTHEME/fonts/lora/css/lora.css"fileDefine the
@font-facefor the Lora font.
/*
* Lora https://fonts.google.com/specimen/Lora
*/
@font-face {
font-family: 'Lora';
font-style: normal;
font-weight: 400;
src: url(../webfonts/Lora-Regular.ttf) format('truetype');
}
@font-face {
font-family: 'Lora';
font-style: normal;
font-weight: 700;
src: url(../webfonts/Lora-Bold.ttf) format('truetype');
}Having more file formats if that was available by web font conversion tools
src: url(../webfonts/Lora-Regular.eot);
src: url(../webfonts/Lora-Regular.eot?#iefix) format('embedded-opentype'),
url(../webfonts/Lora-Regular.woff2) format('woff2'),
url(../webfonts/Lora-Regular.woff) format('woff'),
url(../webfonts/Lora-Regular.ttf) format('truetype');For sure including a remote web font, But issues with preloading may start follow up
2. Add the @font-face CSS File to a Library
Example: The Lora font
List the
"PROJECT_PATH/themes/custom/MYTHEME/fonts/lora/css/lora.css"file in libraries to be activated in the theme
global-styles:
css:
theme:
fonts/lora/css/lora.css: {}3. Add the Font to The preload.twig File
Recommended to add for faster loading of font in pages
Edit the
"PROJECT_PATH/themes/custom/MYTHEME/templates/includes/preload.twig"file. Add the link rel preload and the patch to the font file withas="font"andtype
<link rel="preload" href="/{{ vartheme_bs4_path }}/fonts/lora/Lora-Regular.ttf" as="font" type="font/tff" crossorigin="anonymous">4. Clear Cache And Test The Font
Content of the Preload.twig File
Change the logic in this file in the generated theme for the project. To match the need of your website.
Available Variables
vartheme_bs4_path: Returns the path to the Vartheme BS4 theme. In the Vartheme Sub theme, the variable could bemythemename_pathhtml_dir: contains the language direction. It will either be 'ltr' or 'rtl'.
Example of logic:
Multilingual websites may use a language selection for preloaded assets.
Sections of the website may have a custom prelead assets for CSS/JS.
Have a look at "Preload critical assets to improve loading speed" https://web.dev/preload-critical-assets/ for more ideas on what/when/where to use preload.
Links to Learn by Example
Last updated