mirror of
https://github.com/LukeHagar/unicorn-utterances.git
synced 2025-12-06 21:07:47 +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