Move font loading inside library

it was in the app-example
This commit is contained in:
casper 2021-05-14 19:32:29 +02:00
parent f514c9da45
commit a6eeb3f3f6
2 changed files with 28 additions and 23 deletions

View File

@ -64,33 +64,10 @@ JSONToSketchData(JSON.parse(modelData)).then(data => {
import jss from 'jss';
import preset from 'jss-preset-default';
import normalize from 'normalize-jss';
import abril from './fonts/abril-fatface-v12-latin-regular.woff';
import bellefair from './fonts/bellefair-v6-latin-regular.woff';
import fascinate from './fonts/fascinate-v11-latin-regular.woff';
import joti from './fonts/joti-one-v11-latin-regular.woff';
import lobster from './fonts/lobster-v23-latin-regular.woff';
import oswald from './fonts/oswald-v36-latin-regular.woff';
import play from './fonts/play-v12-latin-regular.woff';
import ranga from './fonts/ranga-v8-latin-regular.woff';
const fontFaces = [
{ url: abril, family: 'Abril Fatface' },
{ url: bellefair, family: 'Bellefair' },
{ url: fascinate, family: 'Fascinate' },
{ url: joti, family: 'Joti One' },
{ url: lobster, family: 'Lobster' },
{ url: oswald, family: 'Oswald' },
{ url: play, family: 'Play' },
{ url: ranga, family: 'Ranga' },
];
jss.setup(preset());
jss.createStyleSheet(normalize).attach();
jss.createStyleSheet({
'@font-face': fontFaces.map(({ url, family }) => ({
'font-family': family,
'src': `url("${url}") format("woff")`
})),
'@global': {
'*': { margin: 0, padding: 0 },
'#app, body, html': { height: '100%', fontFamily: 'sans-serif' },

View File

@ -1,7 +1,35 @@
import { FONT_FACE } from '../constants/general.js';
import * as contextTools from '../constants/contextTools.js';
import FontLoaded from 'font-loaded';
import { load as loadPattern } from '../d2/Shape.js';
import { load as loadMatcapMaterial } from '../d3/MatcapMaterial.js';
import jss from 'jss';
import abril_url from '../../fonts/abril-fatface-v12-latin-regular.woff';
import bellefair_url from '../../fonts/bellefair-v6-latin-regular.woff';
import fascinate_url from '../../fonts/fascinate-v11-latin-regular.woff';
import joti_url from '../../fonts/joti-one-v11-latin-regular.woff';
import lobster_url from '../../fonts/lobster-v23-latin-regular.woff';
import oswald_url from '../../fonts/oswald-v36-latin-regular.woff';
import play_url from '../../fonts/play-v12-latin-regular.woff';
import ranga_url from '../../fonts/ranga-v8-latin-regular.woff';
const fontFaces = [
{ url: abril_url, family: FONT_FACE[contextTools.ABRIL_FATFACE], },
{ url: bellefair_url, family: FONT_FACE[contextTools.BELLEFAIR], },
{ url: fascinate_url, family: FONT_FACE[contextTools.FASCINATE], },
{ url: joti_url, family: FONT_FACE[contextTools.JOTI_ONE], },
{ url: lobster_url, family: FONT_FACE[contextTools.LOBSTER], },
{ url: oswald_url, family: FONT_FACE[contextTools.OSWALD], },
{ url: play_url, family: FONT_FACE[contextTools.PLAY], },
{ url: ranga_url, family: FONT_FACE[contextTools.RANGA], },
];
jss.createStyleSheet({
'@font-face': fontFaces.map(({ url, family }) => ({
'font-family': family,
'src': `url("${url}") format("woff")`
})),
}).attach();
const loadFont = font => {
const fontLoaded = new FontLoaded(font);