mirror of
https://github.com/LukeHagar/unicorn-utterances.git
synced 2025-12-07 12:57:45 +00:00
Finish initial draft of npm package section
This commit is contained in:
Corbin Crutchley
144
content/blog/angular-npm-font-usage/index.md
Normal file
144
content/blog/angular-npm-font-usage/index.md
Normal file
@@ -0,0 +1,144 @@
|
|||||||
|
---
|
||||||
|
{
|
||||||
|
title: "Package Font Files on NPM for Angular Usage",
|
||||||
|
description: "",
|
||||||
|
published: '2020-11-15T22:12:03.284Z',
|
||||||
|
authors: ['crutchcorn'],
|
||||||
|
tags: ['angular', 'javascript', 'npm'],
|
||||||
|
attached: [],
|
||||||
|
license: 'cc-by-4'
|
||||||
|
}
|
||||||
|
---
|
||||||
|
|
||||||
|
While working on my company's shared component system, I got a request from our design team. They wanted to keep our branding consistent with internal documents and other assets. As such, they requested we use a font called "Stirling Foundry".
|
||||||
|
|
||||||
|
While we're prepping our shared component system for an open-source release to the public, we quickly acknowledged that we couldn't possibly ship this font with the package we intend for public publishing [due to it's licensing and cost](https://www.fonts.com/font/the-foundry/foundry-sterling).
|
||||||
|
|
||||||
|
However, we have mutliple teams that rely on our shared component system and we don't want to have to copy+paste the relevant `@font-face` definition or font files. What was our solution? Ship a second `npm` package (in our internal `npm` registry) that contained all of our private assets - including font files.
|
||||||
|
|
||||||
|
Let's walk through how we did that.
|
||||||
|
|
||||||
|
# Setup Assets Package {#assets-package}
|
||||||
|
|
||||||
|
As we're wanting to ship our packages seperately, we opted for two Git repositories for the component system and private assets. In a new repository, I have the following for the `package.json`:
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"name": "ecp-private-assets",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"release": "standard-version"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@commitlint/cli": "^11.0.0",
|
||||||
|
"@commitlint/config-angular": "^11.0.0",
|
||||||
|
"husky": "^4.3.0",
|
||||||
|
"standard-version": "^9.0.0"
|
||||||
|
},
|
||||||
|
"husky": {
|
||||||
|
"hooks": {
|
||||||
|
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"commitlint": {
|
||||||
|
"extends": [
|
||||||
|
"@commitlint/config-angular"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
While this package is not going to maintain code, I still believe it important to maintain a semver for the package. If a path of the package changes, the semver will communicate that with your package's consumers alongside the changeling. As such, this `package.json` utilizes [Conventional Commit and `commitlint` to auto-generate changelogs and maintain history version](/posts/setup-standard-version/).
|
||||||
|
|
||||||
|
## Add Font Files {#font-files}
|
||||||
|
|
||||||
|
The "Foundry Stirling" font that I'm shipping is a combination of 7 `.otf` files. I start by creating a `fonts` directory. Inside that directory, I place the `.otf` files in the `fonts` directory.
|
||||||
|
|
||||||
|
Once done, your project repo should look something like this:
|
||||||
|
|
||||||
|
```
|
||||||
|
.
|
||||||
|
├── CHANGELOG.md
|
||||||
|
├── README.md
|
||||||
|
├── fonts
|
||||||
|
│ ├── foundry_sterling_bold.otf
|
||||||
|
│ ├── foundry_sterling_book.otf
|
||||||
|
│ ├── foundry_sterling_book_italic.otf
|
||||||
|
│ ├── foundry_sterling_demi.otf
|
||||||
|
│ ├── foundry_sterling_extra_bold.otf
|
||||||
|
│ ├── foundry_sterling_light.otf
|
||||||
|
│ └── foundry_sterling_medium.otf
|
||||||
|
├── index.js
|
||||||
|
├── package-lock.json
|
||||||
|
└── package.json
|
||||||
|
```
|
||||||
|
|
||||||
|
## `@font-face` CSS Definition {#css-declare}
|
||||||
|
|
||||||
|
Now that we have the fonts in their place, we need to create a common `foundry_stirling.css` file to access those fonts from CSS.
|
||||||
|
|
||||||
|
Because we're planning on using Angular CLI, we'll want to set the `src` property to be prefixed with `/assets/`, since that's where Angular sends it's assets.
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* foundry_stirling.css */
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Foundry Sterling';
|
||||||
|
font-style: normal;
|
||||||
|
/* Light */
|
||||||
|
font-weight: 300;
|
||||||
|
src: local('Foundry Sterling Light'), local('FoundrySterling-light'), url("/assets/foundry_sterling_light.otf") format('opentype')
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ... */
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Foundry Sterling';
|
||||||
|
font-style: normal;
|
||||||
|
/* Extra-Bold */
|
||||||
|
font-weight: 800;
|
||||||
|
src: local('Foundry Sterling Extra Bold'), local('FoundrySterling-extra-bold'), url("/assets/foundry_sterling_extra_bold.otf") format('opentype')
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
> While we're using CSS here, if you wanted to set the `src` to a different location for non-Angular projects, you could use a SCSS `@mixin` to define the `@font-face` declarations with a customizable `$base_path`.
|
||||||
|
>
|
||||||
|
> ```scss
|
||||||
|
> @mixin foundry_sterling($base_path) {
|
||||||
|
> @font-face {
|
||||||
|
> font-family: 'Foundry Sterling';
|
||||||
|
> font-style: normal;
|
||||||
|
> /* Extra-Bold */
|
||||||
|
> font-weight: 800;
|
||||||
|
> src: url("#{$base_path}/foundry_sterling_extra_bold.otf") format('opentype')
|
||||||
|
> }
|
||||||
|
>
|
||||||
|
> // ... Other @font-face declarations
|
||||||
|
> }
|
||||||
|
> ```
|
||||||
|
>
|
||||||
|
> Then, when consuming the package in your client-side app, you'll want to use something like this:
|
||||||
|
>
|
||||||
|
> ```scss
|
||||||
|
> @include foundry_sterling("/assets")
|
||||||
|
> ```
|
||||||
|
|
||||||
|
### Font Name Value Mapping {#font-val-mapping}
|
||||||
|
|
||||||
|
Because our font had multiple files to declare the different CSS values weights, we had to declare the `@font-face` for each of the font files. This is the mapping we used:
|
||||||
|
|
||||||
|
| Value | Common weight name | Related File |
|
||||||
|
| ----- | ------------------------- | --------------------------------- |
|
||||||
|
| 100 | Thin / Hairline | N/A |
|
||||||
|
| 200 | Extra-Light / Ultra-Light | N/A |
|
||||||
|
| 300 | Light | `foundry_sterling_light.otf` |
|
||||||
|
| 400 | Normal / Regular | `foundry_sterling_book.otf` |
|
||||||
|
| 500 | Medium | `foundry_sterling_medium.otf` |
|
||||||
|
| 600 | Semi-Bold / Demi-Bold | `foundry_sterling_demi.otf` |
|
||||||
|
| 700 | Bold | `foundry_sterling_bold.otf` |
|
||||||
|
| 800 | Extra-Bold / Ultra-Bold | `foundry_sterling_extra_bold.otf` |
|
||||||
|
| 900 | Black / Heavy | N/A |
|
||||||
|
|
||||||
|
# Consume Assets Package in Angular CLI {#angular-cli}
|
||||||
|
|
||||||
Reference in New Issue
Block a user