@@ -33,59 +33,130 @@ function setFontValues() {
3333 let subtitleFontSelect = toolbox . querySelector ( '.font-selectors-container #subtitle-font-selector' ) ;
3434
3535 document . fonts . ready . then ( ( ) => {
36+ const titleFontName = titleFontSelect . value ;
37+ const titleFontUrl = './fonts/' + getFontUrl ( titleFontSelect . value ) ;
3638 let titleFont = getFont ( titleFontSelect . value )
3739 titleFont . load ( ) . then ( function ( loadedFont ) {
3840 document . fonts . add ( loadedFont )
39- console . log ( 'Font loaded an added' ) ;
41+ // injectFontFaceRule(titleFontName, titleFontUrl);
42+
43+ console . log ( 'Font loaded and added' ) ;
4044 title . style . fontFamily = `"${ titleFontSelect . value } ;
4145 } ) . catch ( function ( error ) {
4246 console . log ( 'Failed to load font: ' + error )
4347 } )
4448
45- let subTitlefont = getFont ( subtitleFontSelect . value )
46- subTitlefont . load ( ) . then ( function ( loadedFont ) {
49+ const subTitleFontName = subtitleFontSelect . value ;
50+ const subTitleFontUrl = './fonts/' + getFontUrl ( subtitleFontSelect . value ) ;
51+ let subTitleFont = getFont ( subtitleFontSelect . value )
52+ subTitleFont . load ( ) . then ( function ( loadedFont ) {
4753 document . fonts . add ( loadedFont )
48- console . log ( 'Font loaded an added' ) ;
54+ // injectFontFaceRule(subTitleFontName, subTitleFontUrl);
55+
56+ console . log ( 'Font loaded and added' ) ;
4957 subtitle . style . fontFamily = `"${ subtitleFontSelect . value } ;
5058 } ) . catch ( function ( error ) {
5159 console . log ( 'Failed to load font: ' + error )
5260 } )
5361 } ) ;
5462}
5563
56- function getFont ( fontName ) {
64+ function injectFontFaceRule ( fontName , fontUrl ) {
65+ const style = document . createElement ( 'style' ) ;
66+ style . textContent = `
67+ @font-face {
68+ font-family: '${ fontName }
69+ src: url('${ fontUrl }
70+ }
71+ ` ;
72+ document . head . appendChild ( style ) ;
73+ }
74+
75+ function getFontUrl ( fontName ) {
5776 switch ( fontName ) {
5877 case 'Kalam' :
59- return new FontFace ( 'Kalam' , 'url("./fonts/Kalam -Regular.ttf")') ;
78+ return 'Kalam-Regular.ttf")' ;
6079 case 'Poppins' :
61- return new FontFace ( 'Poppins' , 'url("./fonts/Poppins -Regular.ttf")' ) ;
80+ return 'Poppins-Regular.ttf' ;
6281 case 'Athiti' :
63- return new FontFace ( 'Athiti' , 'url("./fonts/Athiti -Regular.ttf")' ) ;
82+ return 'Athiti-Regular.ttf' ;
6483 case 'MavenPro' :
65- return new FontFace ( 'MavenPro' , 'url("./fonts/MavenPro -Regular.ttf")' ) ;
84+ return 'MavenPro-Regular.ttf' ;
6685 case 'Ubuntu' :
67- return new FontFace ( 'Ubuntu' , 'url("./fonts/Ubuntu -Regular.ttf")' ) ;
86+ return 'Ubuntu-Regular.ttf' ;
6887 case 'IstokWeb' :
69- return new FontFace ( 'IstokWeb' , 'url("./fonts/IstokWeb -Regular.ttf")' ) ;
88+ return 'IstokWeb-Regular.ttf' ;
7089 case 'Courgette' :
71- return new FontFace ( 'Courgette' , 'url("./fonts/Courgette -Regular.ttf")' ) ;
90+ return 'Courgette-Regular.ttf' ;
7291 case 'Quattrocento' :
73- return new FontFace ( 'Quattrocento' , 'url("./fonts/Quattrocento -Regular.ttf")' ) ;
92+ return 'Quattrocento-Regular.ttf' ;
7493 case 'DellaRespira' :
75- return new FontFace ( 'DellaRespira' , 'url("./fonts/DellaRespira -Regular.ttf")' ) ;
94+ return 'DellaRespira-Regular.ttf' ;
7695 case 'Lato' :
77- return new FontFace ( 'Lato' , 'url("./fonts/Lato -Regular.ttf")' ) ;
96+ return 'Lato-Regular.ttf' ;
7897 case 'Martel' :
79- return new FontFace ( 'Martel' , 'url("./fonts/Martel -Regular.ttf")' ) ;
98+ return 'Martel-Regular.ttf' ;
8099 case 'Lancelot' :
81- return new FontFace ( 'Lancelot' , 'url("./fonts/Lancelot -Regular.ttf")' ) ;
100+ return 'Lancelot-Regular.ttf' ;
82101 case 'Playball' :
83- return new FontFace ( 'Playball' , 'url("./fonts/Playball -Regular.ttf")' ) ;
102+ return 'Playball-Regular.ttf' ;
84103 case 'LifeSavers' :
85- return new FontFace ( 'LifeSavers' , 'url("./fonts/LifeSavers -Regular.ttf")' ) ;
104+ return 'LifeSavers-Regular.ttf' ;
86105 default :
87- return new FontFace ( 'Kalam' , 'url("./fonts/Kalam-Regular.ttf")' ) ;
106+ return 'Kalam-Regular.ttf' ;
107+ }
108+ }
109+
110+ function getFont ( fontName ) {
111+ let newFont = null ;
112+ if ( fontName === 'Kalam' ) {
113+ newFont = new FontFace ( 'Kalam' , 'url("./fonts/Kalam-Regular.ttf")' ) ;
114+ newFont . _snapdomSrc = "./fonts/Kalam-Regular.ttf" ;
115+ } else if ( fontName === 'Poppins' ) {
116+ newFont = new FontFace ( 'Poppins' , 'url("./fonts/Poppins-Regular.ttf")' ) ;
117+ newFont . _snapdomSrc = "./fonts/Poppins-Regular.ttf" ;
118+ } else if ( fontName === 'Athiti' ) {
119+ newFont = new FontFace ( 'Athiti' , 'url("./fonts/Athiti-Regular.ttf")' ) ;
120+ newFont . _snapdomSrc = "./fonts/Athiti-Regular.ttf" ;
121+ } else if ( fontName === 'MavenPro' ) {
122+ newFont = new FontFace ( 'MavenPro' , 'url("./fonts/MavenPro-Regular.ttf")' ) ;
123+ newFont . _snapdomSrc = "./fonts/MavenPro-Regular.ttf" ;
124+ } else if ( fontName === 'Ubuntu' ) {
125+ newFont = new FontFace ( 'Ubuntu' , 'url("./fonts/Ubuntu-Regular.ttf")' ) ;
126+ newFont . _snapdomSrc = "./fonts/Ubuntu-Regular.ttf" ;
127+ } else if ( fontName === 'IstokWeb' ) {
128+ newFont = new FontFace ( 'IstokWeb' , 'url("./fonts/IstokWeb-Regular.ttf")' ) ;
129+ newFont . _snapdomSrc = "./fonts/IstokWeb-Regular.ttf" ;
130+ } else if ( fontName === 'Courgette' ) {
131+ newFont = new FontFace ( 'Courgette' , 'url("./fonts/Courgette-Regular.ttf")' ) ;
132+ newFont . _snapdomSrc = "./fonts/Courgette-Regular.ttf" ;
133+ } else if ( fontName === 'Quattrocento' ) {
134+ newFont = new FontFace ( 'Quattrocento' , 'url("./fonts/Quattrocento-Regular.ttf")' ) ;
135+ newFont . _snapdomSrc = "./fonts/Quattrocento-Regular.ttf" ;
136+ } else if ( fontName === 'DellaRespira' ) {
137+ newFont = new FontFace ( 'DellaRespira' , 'url("./fonts/DellaRespira-Regular.ttf")' ) ;
138+ newFont . _snapdomSrc = "./fonts/DellaRespira-Regular.ttf" ;
139+ } else if ( fontName === 'Lato' ) {
140+ newFont = new FontFace ( 'Lato' , 'url("./fonts/Lato-Regular.ttf")' ) ;
141+ newFont . _snapdomSrc = "./fonts/Lato-Regular.ttf" ;
142+ } else if ( fontName === 'Martel' ) {
143+ newFont = new FontFace ( 'Martel' , 'url("./fonts/Martel-Regular.ttf")' ) ;
144+ newFont . _snapdomSrc = "./fonts/Martel-Regular.ttf" ;
145+ } else if ( fontName === 'Lancelot' ) {
146+ newFont = new FontFace ( 'Lancelot' , 'url("./fonts/Lancelot-Regular.ttf")' ) ;
147+ newFont . _snapdomSrc = "./fonts/Lancelot-Regular.ttf" ;
148+ } else if ( fontName === 'Playball' ) {
149+ newFont = new FontFace ( 'Playball' , 'url("./fonts/Playball-Regular.ttf")' ) ;
150+ newFont . _snapdomSrc = "./fonts/Playball-Regular.ttf" ;
151+ } else if ( fontName === 'LifeSavers' ) {
152+ newFont = new FontFace ( 'LifeSavers' , 'url("./fonts/LifeSavers-Regular.ttf")' ) ;
153+ newFont . _snapdomSrc = "./fonts/LifeSavers-Regular.ttf" ;
154+ } else {
155+ // default case
156+ newFont = new FontFace ( 'Kalam' , 'url("./fonts/Kalam-Regular.ttf")' ) ;
157+ newFont . _snapdomSrc = "./fonts/Kalam-Regular.ttf" ;
88158 }
159+ return newFont ;
89160}
90161
91162export { setFontValues } ;
0 commit comments