# Add Preloaded Fonts in Vartheme {% hint style="info" %} * [Preload critical assets to improve loading speed](https://web.dev/preload-critical-assets/) * [Preload W3C Candidate Recommendation 26 June 2019](https://www.w3.org/TR/preload/) {% endhint %} Following the new way in the new **Drupal** default front end theme [**Olivero**](https://www.drupal.org/project/olivero)\ `{% include '@olivero/includes/preload.twig' with { olivero_path: olivero_path } only %}` {% hint style="info" %} Check the code on [**Olivero**](https://www.drupal.org/project/olivero) The **html.html.twig** file The **preload.twig** file {% endhint %} Having the following in **Vartheme BS5**. And the include. ``` {%- include '@vartheme_bs5/includes/preload.twig' with { vartheme_bs5_path: vartheme_bs5_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**](https://fonts.google.com/specimen/Lora) font * Go to the [**Lora**](https://fonts.google.com/specimen/Lora) web font page and Download the family. {% hint style="info" %} Download directly from [fonts.google.com](https://fonts.google.com/specimen/Lora#glyphs) or from the source in [github.com](https://github.com/cyrealtype/Lora-Cyrillic) {% endhint %} * Check the license before using the web font > These fonts are licensed under the [Open Font License](https://scripts.sil.org/cms/scripts/page.php?site_id=nrsi\&id=OFL). > > 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. {% hint style="danger" %} **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. {% endhint %} * 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. ``` /* * 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](https://www.google.com/search?q=webfont+converter+tools\&newwindow=1\&client=ubuntu\&biw=1864\&bih=851\&sxsrf=ALeKk01rUKpiornNNqbuM8ibJ2Rhr7aaIw%3A1629794566305\&ei=BrEkYd74Eb2C9u8Puc6ouAM\&oq=webfont+converter+tools\&gs_lcp=Cgdnd3Mtd2l6EAM6BwgAEEcQsANKBAhBGABQpUpYpUpgoV1oAXACeACAAZEBiAGKApIBAzAuMpgBAKABAcgBCMABAQ\&sclient=gws-wiz\&ved=0ahUKEwjek7nxocnyAhU9gf0HHTknCjcQ4dUDCA8\&uact=5) ``` 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'); ``` {% hint style="danger" %} For sure including a remote web font, But issues with preloading may start follow up {% endhint %} ### 2. Add the @font-face CSS File to a Library **Example:** The [**Lora**](https://fonts.google.com/specimen/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 {% hint style="success" %} Recommended to add for faster loading of font in pages {% endhint %} * 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` ``` ``` ### 4. Clear Cache And Test The Font ## Content of the Preload.twig File {% hint style="success" %} Change the logic in this file in the generated theme for the project. To match the need of your website. {% endhint %} ### Available Variables * **`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'. {% hint style="info" %} ### **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" for more ideas on what/when/where to use preload. {% endhint %} ### Links to Learn by Example {% hint style="info" %} Check the following links: Vartheme **Fonts** folder: **Vartheme html.html.twig file:** **Vartheme preload.twig file:** {% endhint %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.varbase.vardot.com/10.1.x/developers/theme-development-with-varbase/add-preloaded-fonts-in-vartheme.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.