Fonts

Setting up a font for your project

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 <link> tag. Just like this is highlighted in the picture below for reference:

After copying the link, you need to place this in the <head> 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:

@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:

src / scss / layouts / {layout} / themes / {theme} / _variables.scss

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

Following are most common font related variables which you might be looking to change values for:

src / scss / layouts / {layout} / themes / {theme} / _variables.scss
$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;
PreviousLayouts & ThemeNextColors

Last updated

Was this helpful?