How to create a Font Family package with Lerna monorepo for Vue and Angular projects?

Viewed 262

Working on a private npm custom package to apply a specific Font Family to Vue2 and Angular repos. I have created Vue component packages before but never for "frame-work agnostic" features and Fonts are also quite particular.

Here it the file structure

Here it the file structure

And here is the code...

fonts.scss : Unsure the @font-face is the best approach

 @font-face {
    font-family: 'Effra';
    src: url('./assets/Effra-Italic_1.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Effra';
    src: url('./assets/EffraHeavy-Regular.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    ...
}...

index.js

import './fonts.scss'  // do not think I am importing correctly

const Fonts = () => {
    const app = document.body;
    app.style.fontFamily = 'Effra', sans-serif;
}

export default Fonts

package.json : what dependecies will I need?

{
    "name": "@company/fonts",
    "version": "1.0.1",
    "description": "company fonts",
    "main": "src/index.js",
    "files": [
        "src/*"
    ],
    "repository": {
        "type": "git",
        "url": "git+https://bitbucket.org/company/repo.git"
    },
    "browserslist": [
        "> 1%",
        "last 2 versions"
    ]
}

Do I need a node_modules file?

Note: I do not have publishing rights.

Thanks a lot!

0 Answers
Related