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
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!