Add Preloaded Fonts in Vartheme
Last updated
Last updated
Following the new way in the new Drupal default front end theme
{% include '@olivero/includes/preload.twig' with { olivero_path: olivero_path } only %}
Having the following in Vartheme BS5. And the include.
Custom Vartheme Sub Themes are able to add their preloaded assets on demand.
Example: The font
Go to the web font page and Download the family.
Check the license before using the web font
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"
file
Define the @font-face
for the Lora font.
For sure including a remote web font, But issues with preloading may start follow up
List the "PROJECT_PATH/themes/custom/MYTHEME/fonts/lora/css/lora.css"
file in libraries to be activated in the theme
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 with as="font"
and type
Change the logic in this file in the generated theme for the project. To match the need of your website.
vartheme_bs5_path
: Returns the path to the Vartheme BS5 theme. In the generated cloned Vartheme theme, the variable could be mythemename_path
html_dir
: contains the language direction. It will either be 'ltr' or 'rtl'.
Multilingual websites may use a language selection for preloaded assets.
Sections of the website may have a custom prelead assets for CSS/JS.
These fonts are licensed under the .
Having more file formats if that was available by
Example: The font
Have a look at "Preload critical assets to improve loading speed" for more ideas on what/when/where to use preload.
Vartheme html.html.twig file:
Vartheme preload.twig file: