Adding Fonts in Windframe

Windframe is a powerful tool that allows for customization, including the use of custom fonts. Here's how to add your chosen fonts in Windframe.

Adding Predefined Fonts

Windframe has a selection of predefined fonts that you can use in your projects. In Windframe, you have the flexibility to add and use different fonts in your designs. Here is how you can add fonts using the Windframe editor:

1. Select the Text: Start by selecting the text on the project you want to change the font on.

2. Navigate to the Fonts Menu: Start by clicking on the Fonts menu located in the right sidebar of your Windframe editor.

3. Select the front family bar: Locate the font family bar from the dropdown of the fonts menu.

4. Select the predefined fonts:On the font family bar, choose from the preefined fonts.

Adding Custom Fonts in Windframe

Windframe also allows you to add custom fonts that may not be available in common font libraries. Here is how you can add custom fonts:

1. Click the import button: Go to the import button located at the top right corner of the canvas.

2. Select the what you will like to add: From the dropdown menu of the import button, select the custom css.

3. Input the Custom Fonts: Paste the custom css you wish to add to your project, in our case we want to add the poppins font family.

4. Applying the custom css font: Now, select the text you want to apply the fonts on, then go to the search bar and type the class you have just uploaded

5. Adding the custom fonts: After typing the custom css class, you can click add button beside the search bar. This will apply the custom fonts to the text. In our case, the poppins fonts.

Now the font family should be added to your project fonts

Note: If your font family name contains spaces, you should replace the spaces with underscores when using it in Tailwind CSS. This is necessary because Tailwind requires font family names to be wrapped in brackets and treated as a single string. For example, if you import the font using:

@import url('https://fonts.googleapis.com/css2?family=Delicious+Handrawn&display=swap');

You should write it in Tailwind like this:

<div class="font-['Delicious_Handrawn']"></div>

Remember, adding custom fonts gives you more control over the aesthetics of your design. It allows you to create a more unique and personalized look for your project.