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.
1
{%- include '@vartheme_bs4/includes/preload.twig' with { vartheme_bs4_path: vartheme_bs4_path, html_dir: html_attributes['dir'] } only -%}
Copied!
1
{%- include '@VARTHEME_BS4_SUBTHEME/includes/preload.twig' with { VARTHEME_BS4_SUBTHEME_path: VARTHEME_BS4_SUBTHEME_path, html_dir: html_attributes['dir'] } only -%}
Copied!
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.
Download directly from fonts.google.com or from the source in github.com
    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" file
    Define the @font-face for the Lora font.
1
/*
2
* Lora https://fonts.google.com/specimen/Lora
3
*/
4
@font-face {
5
font-family: 'Lora';
6
font-style: normal;
7
font-weight: 400;
8
src: url(../webfonts/Lora-Regular.ttf) format('truetype');
9
}
10
@font-face {
11
font-family: 'Lora';
12
font-style: normal;
13
font-weight: 700;
14
src: url(../webfonts/Lora-Bold.ttf) format('truetype');
15
}
Copied!
Having more file formats if that was available by web font conversion tools
1
src: url(../webfonts/Lora-Regular.eot);
2
src: url(../webfonts/Lora-Regular.eot?#iefix) format('embedded-opentype'),
3
url(../webfonts/Lora-Regular.woff2) format('woff2'),
4
url(../webfonts/Lora-Regular.woff) format('woff'),
5
url(../webfonts/Lora-Regular.ttf) format('truetype');
Copied!
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
1
global-styles:
2
css:
3
theme:
4
fonts/lora/css/lora.css: {}
Copied!

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 with as="font" and type
1
<link rel="preload" href="/{{ vartheme_bs4_path }}/fonts/lora/Lora-Regular.ttf" as="font" type="font/tff" crossorigin="anonymous">
Copied!

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 be mythemename_path
    html_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.
Last modified 2mo ago