Hello everybody,
recently I had a Idea about how to implement most of the Google Fonts offline and any other font files to a Wick Project.
So I took the Code from @bluecake of his Topic about how to add Google Fonts to a Wick Project and the Code from a open-source project called “Google Webfonts Helper” by Mario Ranftl to try it and it worked!
Note: All of the code is written as a syntax to easily customise it. At the end of this post I also made a example with the font “Poppins”. Text in [square brackets] needs to be customised.
At first, you need ether a own font file (ttf, woff, woff2) or you download one from the earlier mentioned Google Webfonts Helper Project.
Next, we’re creating some CSS code for every font file used after the following syntax:
@font-face {
font-family: '[font name]';
font-style: [normal or italic];
font-weight: [100/200/300/400/500/600/...];
src: local(''),
url('../[font file name].woff2') format('woff2'),
url('../[font file name].woff') format('woff'),
url('../[font file name].ttf') format('truetype');
}
If needed, you can add this before src: local(''), :
src: url('../[font file name].eot');
…and this directly after src: local(''),:
url('../[font file name].eot?#iefix') format('embedded-opentype'),
url('../[font file name].svg#[font name]') format('svg'),
…but you don’t realy need them because these file types are rarely used for fonts these days.
Before we get to the next step, we need to put all of the new created CSS Code into one line:
@font-face { font-family: '[font name]'; font-style: [normal or italic]; font-weight: [100/200/300/400/500/600/...]; src: local(''), url('../[font file name].woff2') format('woff2'), url('../[font file name].woff') format('woff'), url('../[font file name].ttf') format('truetype'); }
(yeah I know it’s not in one line here)
After you have done that, you need to add this JS code to the first frame of your Project:
// create a HTML Element for the CSS code
let fontText = document.createElement('fontText');
// define the inner HTML-Text of this new Element and add it to the document
fontText.innerHTML = "<style>[css code from the last step in one line]</style>";
document.head.appendChild(fontText);
…and we’re nearly finished!
Now, we need this code for every Text Asset that should use one of the new fonts:
this.[Text Asset name].fontFamily=‘[font name]’;
Add it to the frame where the Text Asset exists.
Eventually you need this too:
this.[Text Asset name].fontStyle='[normal or italic]';
this.[Text Asset name].fontWeight=[100/200/300/400/500/600/...];
It’s done! You only need to export the HTML and put all files in one folder.
Example with Poppins
Here is a .zip file with the files I use in this example: implementFontsOfflineExample.zip (547.1 KB)
CSS code:
@font-face {
font-family: 'Poppins';
font-style: italic;
font-weight: 500;
src: url('../poppins-v19-latin-500italic.eot');
src: local(''),
url('../poppins-v19-latin-500italic.eot?#iefix') format('embedded-opentype'),
url('../poppins-v19-latin-500italic.woff2') format('woff2'),
url('../poppins-v19-latin-500italic.woff') format('woff'),
url('../poppins-v19-latin-500italic.ttf') format('truetype'),
url('../poppins-v19-latin-500italic.svg#Poppins') format('svg');
}
…in short:
@font-face {font-family: 'Poppins';font-style: italic;font-weight: 500;src: url('../poppins-v19-latin-500italic.eot');src: local(''),url('../poppins-v19-latin-500italic.eot?#iefix') format('embedded-opentype'),url('../poppins-v19-latin-500italic.woff2') format('woff2'),url('../poppins-v19-latin-500italic.woff') format('woff'),url('../poppins-v19-latin-500italic.ttf') format('truetype'),url('../poppins-v19-latin-500italic.svg#Poppins') format('svg');}
JS Code:
let fontText = document.createElement('fontText');
fontText.innerHTML = "<style>@font-face {font-family: 'Poppins';font-style: italic;font-weight: 500;src: url('../poppins-v19-latin-500italic.eot');src: local(''),url('../poppins-v19-latin-500italic.eot?#iefix') format('embedded-opentype'),url('../poppins-v19-latin-500italic.woff2') format('woff2'),url('../poppins-v19-latin-500italic.woff') format('woff'),url('../poppins-v19-latin-500italic.ttf') format('truetype'),url('../poppins-v19-latin-500italic.svg#Poppins') format('svg');}</style>";
document.head.appendChild(fontText);
this.t.fontFamily='Poppins';
this.t.fontStyle='normal';
this.t.fontWeight=500;
If you have any questions or something not works please give Feedback here!
Thanks for your time,
Towim
