Your One Stop Website For Daily Leaks

Self-Host Fonts In An Angular SPA

Get real time updates directly on you device, subscribe now.

I recently needed to use a font for a website that is different from the default provided by the Bootstrap CSS framework. Initially I tried loading the font from the Google Fonts CDN, but observed some security warnings in my browser. For various reasons, you are probably better off self-hosting fonts within your Angular SPA itself. So let’s walk through how to acquire a font from the Google Fonts website, generate a stylesheet and font set for it, and add the resulting CSS and fonts to your Angular SPA. The Sample Angular SPA also include a font-demo component for displaying samples of the font family members.

Demo code available at: https://github.com/novaluno/angular-fonts

Download A Font From Google Fonts

NOTE: This step is optional only if you wish to use a Google Font. If you have your own font(s) proceed to the next section called Generate A CSS Font Face.

Navigate to the Google Fonts website, and filter for only Sans Serif fonts.

Search for the Open Sans font (or any font of your choice) and click the Select fontbutton.

The font gets added to the Family Selected tab that appears at the bottom of your browser window.

Click on the Family Selected tab to expand it.

Make a copy of the code shown in the Specify in CSS section, as you will need this information later on in this post.

font-family: 'Open Sans', sans-serif;

Click on the font download icon.

The Save As dialog appears.

Save the font zip file in the desired location on your hard drive.

Right-click on the zip file and a context menu appears.

Click the Extract All menu item.

The Extract Files dialog appears.

Click the Extract button.

The Extraction app extracts the fonts from the zip file into the specified folder.

Generate A CSS Font Face

Navigate to the Transfonter website.

Click the Add fonts button.

The Open dialog appears.

Select all of the font files and click the Open button.

Scroll down the page until the Font Face configuration for is vissible.

Ensure all of the font type checkboxes are checked in the Formats field.

Click the Save icon to preserve this configuration.

Scroll back up to the top of the page.

Click the Convert button.

The Convert button appearance changes to indicate the font faces are being processed.

Once the generator finishes processing the new CSS font faces, the following new section appears in the page:

Click the Preview link, and a view like the following appears showing samples of all of the font faces processed.

Close this view.

Click on the Download link.

The Save As dialog appears. Navigate to the desired location in which to save the zip file and click the Save button.

Right click on the zip file, and click the Extract All menu item.

The Extract Files dialog appears.

Click the Save button.

Navigate to the extracted fonts folder to see the web fonts, which should look something like the following, but will likely have more fonts that show above.

Create An Angular SPA

Create a new Angular SPA in which to host and test the custom font face.

From a command line run the following Angular CLI command:

ng new angular-fonts --defaults=true

The Angular CLI creates a new Angular project with a single page, has no routing, and uses plain CSS for styles.

Open the source directory for the angular-fonts project in your favorite code editor. Mine happens to be Visual Studio Code for JavaScript development.

Navigate to the src/assets folder, and create a new css folder.

Copy all of the generated CSS font face files into this new css folder.

In the src/assets/css folder, find the file called stylesheet.css and rename it to reflect the name of your font.

e.g.,

open-sans.css

Locate the index.html file and open it for editing.

Add the new CSS stylesheet to the head section.

<link rel="stylesheet" href="./assets/css/open-sans.css">

Run the Angular app by opening a terminal and running the following command:

npm run start --open

Ope the app in a browser and open the developer tools to the Network tab.

You should see the new CSS stylesheet in the list of files loaded.

Add the following to the styles.css file:

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* common styles */
body {
    background: #f1f1f1;
    color: #000;
}

Create A Font Demo Component

From a terminal window in VS Code, run the following command:

ng g c font-demo

The Angular CLI generates a new font-demo.component files.

Add the following styles to the font-demo.component.css file:

.page {
    background: #fff;
    width: 920px;
    margin: 0 auto;
    padding: 20px 20px 0 20px;
    overflow: hidden;
}

.font-container {
    overflow-x: auto;
    overflow-y: hidden;
    margin-bottom: 40px;
    line-height: 1.3;
    white-space: nowrap;
    padding-bottom: 5px;
}

h1 {
    position: relative;
    background: #444;
    font-size: 32px;
    color: #fff;
    padding: 10px 20px;
    margin: 0 -20px 12px -20px;
}

.letters {
    font-size: 25px;
    margin-bottom: 20px;
}

.s10:before {
    content: '10px';
}

.s11:before {
    content: '11px';
}

.s12:before {
    content: '12px';
}

.s14:before {
    content: '14px';
}

.s18:before {
    content: '18px';
}

.s24:before {
    content: '24px';
}

.s30:before {
    content: '30px';
}

.s36:before {
    content: '36px';
}

.s48:before {
    content: '48px';
}

.s60:before {
    content: '60px';
}

.s72:before {
    content: '72px';
}

.s10:before,
.s11:before,
.s12:before,
.s14:before,
.s18:before,
.s24:before,
.s30:before,
.s36:before,
.s48:before,
.s60:before,
.s72:before {
    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: normal;
    font-style: normal;
    color: #999;
    padding-right: 6px;
}

pre {
    display: block;
    position: relative;
    padding: 9px;
    margin: 0 0 10px;
    font-family: Monaco, Menlo, Consolas, "Courier New", monospace !important;
    font-size: 13px;
    line-height: 1.428571429;
    color: #333;
    font-weight: normal !important;
    font-style: normal !important;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    overflow-x: auto;
    border-radius: 4px;
}

pre:after {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    content: 'Usage';
    line-height: 1;
    padding: 5px 8px;
    font-size: 12px;
    color: #767676;
    background-color: #fff;
    border: 1px solid #ccc;
    border-right: none;
    border-top: none;
    border-radius: 0 4px 0 4px;
    z-index: 10;
}

/* responsive */
@media (max-width: 959px) {
    .page {
        width: auto;
        margin: 0;
    }
}

Add the following to the font-demo.component.html file:

<div class="page">
    <!-- <div class="demo" style="font-family: 'Open Sans'; font-weight: 600; font-style: normal;"> -->
    <div class="demo" [ngStyle]="{'font-family': fontFamily, 'font-weight': fontWeight, 'font-style': fontStyle}">
        <h1>{{ fontDescription }}</h1>
        <pre>
.your-style {{ '{' }}
    font-family: '{{ fontFamily }}';
    font-weight: {{ fontWeight }};
    font-style: {{ fontStyle }};
}</pre>
        <div class="font-container">
            <p class="letters">
                abcdefghijklmnopqrstuvwxyz<br>
                ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
                0123456789.:,;()*!?'@#<>$%&^+-=~
            </p>
            <p class="s10" style="font-size: 10px;">{{ sampleText }}</p>
            <p class="s11" style="font-size: 11px;">{{ sampleText }}</p>
            <p class="s12" style="font-size: 12px;">{{ sampleText }}</p>
            <p class="s14" style="font-size: 14px;">{{ sampleText }}</p>
            <p class="s18" style="font-size: 18px;">{{ sampleText }}</p>
            <p class="s24" style="font-size: 24px;">{{ sampleText }}</p>
            <p class="s30" style="font-size: 30px;">{{ sampleText }}</p>
            <p class="s36" style="font-size: 36px;">{{ sampleText }}</p>
            <p class="s48" style="font-size: 48px;">{{ sampleText }}</p>
            <p class="s60" style="font-size: 60px;">{{ sampleText }}</p>
            <p class="s72" style="font-size: 72px;">{{ sampleText }}</p>
        </div>
    </div>
</div>

Add the following to the font-demo.component.ts file:

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-font-demo',
  templateUrl: './font-demo.component.html',
  styleUrls: ['./font-demo.component.css']
})
export class FontDemoComponent implements OnInit {

  @Input() fontDescription: string;
  @Input() fontFamily: string;
  @Input() fontWeight: string;
  @Input() fontStyle: string;

  public sampleText = 'The quick brown fox jumps over the lazy dog.';

  constructor() { }

  ngOnInit() {
  }

}

Replace all of the html in the app.component.html file with the following:

<app-font-demo [fontDescription]="'Open Sans Light'" [fontFamily]="'Open Sans'" [fontWeight]="'300'"
  [fontStyle]="'normal'">
</app-font-demo>

<app-font-demo [fontDescription]="'Open Sans Light Italic'" [fontFamily]="'Open Sans'" [fontWeight]="'300'"
  [fontStyle]="'italic'">
</app-font-demo>

<app-font-demo [fontDescription]="'Open Sans Regular'" [fontFamily]="'Open Sans'" [fontWeight]="'normal'"
  [fontStyle]="'normal'">
</app-font-demo>

<app-font-demo [fontDescription]="'Open Sans Italic'" [fontFamily]="'Open Sans'" [fontWeight]="'normal'"
  [fontStyle]="'italic'">
</app-font-demo>

<app-font-demo [fontDescription]="'Open Sans SemiBold'" [fontFamily]="'Open Sans'" [fontWeight]="'600'"
  [fontStyle]="'normal'">
</app-font-demo>

<app-font-demo [fontDescription]="'Open Sans SemiBold Italic'" [fontFamily]="'Open Sans'" [fontWeight]="'600'"
  [fontStyle]="'italic'">
</app-font-demo>

<app-font-demo [fontDescription]="'Open Sans Bold'" [fontFamily]="'Open Sans'" [fontWeight]="'bold'"
  [fontStyle]="'normal'">
</app-font-demo>

<app-font-demo [fontDescription]="'Open Sans Bold Italic'" [fontFamily]="'Open Sans'" [fontWeight]="'bold'"
  [fontStyle]="'italic'">
</app-font-demo>

<app-font-demo [fontDescription]="'Open Sans ExtraBold'" [fontFamily]="'Open Sans'" [fontWeight]="'800'"
  [fontStyle]="'normal'">
</app-font-demo>

<app-font-demo [fontDescription]="'Open Sans ExtraBold Italic'" [fontFamily]="'Open Sans'" [fontWeight]="'800'"
  [fontStyle]="'italic'">
</app-font-demo>

Sample Code

You can find the source code for this project at the following GitHub location:

https://github.com/novaluno/angular-fonts

You have now successfully generated a custom CSS stylesheet and web fonts for an Angular app and displayed the results using a custom component.

Get real time updates directly on you device, subscribe now.

You might also like

Leave A Reply

Your email address will not be published.