# 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 Drift Angular.
Once you hit the **+** icon and customize the different font-weights you need, you can then go to the EMBED tab and then select @STANDARD tab.
Here on this tab, you will need to copy the entire \ 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 page or layout 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 variables in SCSS. For that, you will need to follow the steps explained in **Change Font Variables** 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 / 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: 'NoirPro';
src: url('NoirPro-Light.eot?#iefix') format('embedded-opentype'),
url('NoirPro-Light.woff') format('woff'),
url('NoirPro-Light.woff2') format('woff2');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'NoirPro';
src: url('NoirPro-Regular.eot?#iefix') format('embedded-opentype'),
url('NoirPro-Regular.woff') format('woff'),
url('NoirPro-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'NoirPro';
src: url('NoirPro-Medium.eot?#iefix') format('embedded-opentype'),
url('NoirPro-Medium.woff') format('woff'),
url('NoirPro-Medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'NoirPro';
src: url('NoirPro-SemiBold.eot?#iefix') format('embedded-opentype'),
url('NoirPro-SemiBold.woff') format('woff'),
url('NoirPro-SemiBold.woff2') format('woff2');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'NoirPro';
src: url('NoirPro-Bold.eot?#iefix') format('embedded-opentype'),
url('NoirPro-Bold.woff') format('woff'),
url('NoirPro-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'NoirPro';
src: url('NoirPro-Heavy.eot?#iefix') format('embedded-opentype'),
url('NoirPro-Heavy.woff') format('woff'),
url('NoirPro-Heavy.woff2') format('woff2');
font-weight: 900;
font-style: normal;
}
```
Now, the last thing you need to do is, changing the values of font variables in SCSS. For that, you will need to follow the steps explained in **Change Font Variables** below.
## Change Font Variables
In this step, you could change the SCSS variables in the file given below:
```bash
src / scss / layouts / {layout} / themes / {theme} / _variables.scss
```
{% hint style="info" %}
#### Where
{layout} is the layout you want to work in. For example, default
{theme} is either the existing theme provided by Drift Angular or the one created your own custom one
{% endhint %}
Following are most common font related variables which you might be looking to change values for:
{% code title="src / scss / layouts / {layout} / themes / {theme} / \_variables.scss" %}
```css
$font-family-sans-serif: 'NoirPro', sans-serif;
//$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$font-family-base: $font-family-sans-serif;
// stylelint-enable value-keyword-case
$font-size-base: 1.4rem; // Assumes the browser default, typically `10px`
$font-size-lg: 1.6rem;
$font-size-sm: 1.2rem;
//$font-weight-lighter: lighter !default;
//$font-weight-light: 300 !default;
//$font-weight-normal: 400 !default;
//$font-weight-bold: 700 !default;
//$font-weight-bolder: bolder !default;
//$font-weight-base: $font-weight-normal !default;
$line-height-base: 1.4;
$h1-font-size: 2.2rem;
$h2-font-size: 2rem;
$h3-font-size: 1.8rem;
$h4-font-size: 1.6rem;
$h5-font-size: 1.4rem;
$h6-font-size: 1.2rem;
$headings-margin-bottom: 1.8rem;
//$headings-font-family: null !default;
$headings-font-weight: $font-weight-normal;
//$headings-line-height: 1.2 !default;
$headings-color: $white;
$display1-size: 4rem;
$display2-size: 3.6rem;
$display3-size: 3rem;
$display4-size: 2.4rem;
$display5-size: 2rem !default;
$display6-size: 1.8rem !default;
$display1-weight: $font-weight-normal;
$display2-weight: $font-weight-normal;
$display3-weight: $font-weight-normal;
$display4-weight: $font-weight-normal;
$display5-weight: $font-weight-normal !default;
$display6-weight: $font-weight-normal !default;
$display-line-height: $headings-line-height;
$lead-font-size: 2rem;
$lead-font-weight: 200;
//$small-font-size: 80% !default;
$text-muted: $text-color;
$blockquote-small-color: $text-color;
//$blockquote-small-font-size: $small-font-size !default;
$blockquote-font-size: 1.8rem;
```
{% endcode %}
---
# 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-drift-angular.g-axon.work/stylesheets/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.