TABLE OF CONTENTS

• Introduction
• Font Selection
• Web Project Creation
• Use Within Znode

---

Introduction

This article describes how to create an Adobe Font Web Project with font selections and then use the Web Project in a Znode theme.

Font Selection

1. Create an account on Adobe.com It will require a Premium account only.
2. Search Adobe Fonts in SearchBar and Click on the Get Started Button.
   
   
3. Select Adobe Fonts -> All Fonts.
   
   
4. Select the Language from the “Languages and Writing System dropdown”.  (For eg: English)
   
   
5.  Click on the Tags to open the font family and see all of the font weights and styles that are available to use. Choose fonts as per your requirements. (For Eg. Calligraphy)
   
   
6. Choose the template you require from the list of font families.
   
   
7. Click on this </> button.
   
   
8. If you want to select more fonts then repeat the steps mentioned in the Font selection
   
   

Web Project Creation

1. After clicking on this </> Button, a new Window will appear.
   
   
2. Click on the menu > choose Create a new project and provide the name of your project (For Eg: Adobe-Template)
   
   
3. Click on the checkboxes to select the font weights and styles you want to include in your project.
   
   
4. Clicking the Create button will successfully create the project.
   
   
5. If you want to select more fonts then repeat the steps mentioned in Font Selection and Web Project Creation.
   
   

Use Within Znode

1. Once the project has successfully been created, it will appear as mentioned in the image below.
   
   
2. Now Copy the URL from the link tag and open it in a new browser window.
3. You will see the information shown in the screenshot below after opening the URL in a new window.
   
   
4. Copy the import Statement and required font-face.
   
   
5. Paste the copied content into the _font.scss file.
   File path: [Your-Project\Znode.Engine.WebStore\Views\Themes\ {Your-Theme-Name}\Content\sass\base\_fonts.scss]
   
   
6. Create a variable for the font family in _variables.scss file.(For eg: $base-font-family-Condensed-regular).
   File path: [Your-Project\Znode.Engine.WebStore\Views\Themes\ {Your-Theme-Name}\Content\sass\base\_fonts.scss]
   
   
7. Save the code and compile it.
   Note: if you are using Visual Studio 2022 then use the Web Compiler 2022+ tool for compilation and for older version use Web Compiler