# Fonts
In your project, you would want to setup your own selected font. This section is a step-by-step guide on how to setup your custom font to your project.
Before moving further, Lets talk about the ways you can setup font in your project:
There could be two ways you could setup fonts in your project:
* Via online font resources like Google Fonts
* Via your custom web-font kit
Here below, these two ways are going to be detailed one by one.
### Via Online Font Resources (Google Fonts)
For this, you will need to visit Google Fonts and pick the font you want to setup in your project.
Choose a font which you want to use and then select font styles. When you select a font style a style link will generate in right side section to add in your project
You will need to copy the \ tag. Just like this is highlighted in the picture below for reference:
After copying the link, you need to place this in the \ section of your `public/index.html` file .
This is the first step completed successfully and you have font resources included in your project.
Now, the last thing you need to do is, changing the values of font family in your theme. For that, you will need to follow the steps explained in [**Change Font Family in Theme**](/wieldy/settings/fonts.md#change-font-family-in-theme) below.
### Via Custom Web-Font Kit
For this, first of all, you must have a web-font-kit folder having all web font files.
Then you need to copy that folder into `src / assets / vendors / fonts /` and make sure that you have a `style.css` file in your web-font kit folder which has all weights and font-family set as given in below example:
```css
@font-face {
font-family: 'Normal';
src: url('Fonts/Normal-ExtraLight.eot');
src: url('Fonts/Normal-ExtraLight.eot?#iefix') format('embedded-opentype'),
url('Fonts/Normal-ExtraLight.woff2') format('woff2'),
url('Fonts/Normal-ExtraLight.woff') format('woff'),
url('Fonts/Normal-ExtraLight.ttf') format('truetype'),
url('Fonts/Normal-ExtraLight.svg#Normal-ExtraLight') format('svg');
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: 'Normal';
src: url('Fonts/Normal-Light.eot');
src: url('Fonts/Normal-Light.eot?#iefix') format('embedded-opentype'),
url('Fonts/Normal-Light.woff2') format('woff2'),
url('Fonts/Normal-Light.woff') format('woff'),
url('Fonts/Normal-Light.ttf') format('truetype'),
url('Fonts/Normal-Light.svg#Normal-Light') format('svg');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Normal';
src: url('Fonts/Normal-Regular.eot');
src: url('Fonts/Normal-Regular.eot?#iefix') format('embedded-opentype'),
url('Fonts/Normal-Regular.woff2') format('woff2'),
url('Fonts/Normal-Regular.woff') format('woff'),
url('Fonts/Normal-Regular.ttf') format('truetype'),
url('Fonts/Normal-Regular.svg#Normal-Regular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Normal';
src: url('Fonts/Normal-Bold.eot');
src: url('Fonts/Normal-Bold.eot?#iefix') format('embedded-opentype'),
url('Fonts/Normal-Bold.woff2') format('woff2'),
url('Fonts/Normal-Bold.woff') format('woff'),
url('Fonts/Normal-Bold.ttf') format('truetype'),
url('Fonts/Normal-Bold.svg#Normal-Bold') format('svg');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Normal';
src: url('Fonts/Normal-ExtraBold.eot');
src: url('Fonts/Normal-ExtraBold.eot?#iefix') format('embedded-opentype'),
url('Fonts/Normal-ExtraBold.woff2') format('woff2'),
url('Fonts/Normal-ExtraBold.woff') format('woff'),
url('Fonts/Normal-ExtraBold.ttf') format('truetype'),
url('Fonts/Normal-ExtraBold.svg#Normal-ExtraBold') format('svg');
font-weight: 800;
font-style: normal;
}
```
Now include the `style.css` file in `src / assets / vendors / style.js` file .
Now, the last thing you need to do is, changing the values of font family in your theme. For that, you will need to follow the steps explained in [**Change Font Family in Theme**](/wieldy/settings/fonts.md#change-font-family-in-theme) below.
### **Change Font Family in Theme**
In this step, you could change the font-family in the file given below:
```bash
src / styles / global / varriables.less
```
Now change update the font family like below:
```
@font-family: 'NoirPro', sans-serif;
// or
@font-family: 'Roboto', sans-serif;
```
---
# 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-wieldy.g-axon.work/wieldy/settings/fonts.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.