This is a tutorial on how to add Google Fonts to your Wick project. Google Fonts is a library of over 1000 fonts that you can use for free. You can view a list of Google Fonts here:
If I’m not mistaken, all of the fonts in the Wick Editor are a small selection of Google Fonts. So, if you see a Google Font that is not offered in the editor that you would like to add to your project, I’m going to share a way to implement the new font into a project.
First, I’ll briefly go over how to change a textbox’s font programmatically, using a font that is already provided in Wick. I can create a textbox, name it myText, and put the following code into the default script of the first frame of my timeline:
myText.fontFamily=‘Lemon’;
myText.setText(“This is " + myText.fontFamily + " font”);
Since the Lemon font is already available in Wick Editor, the editor automatically recognizes the font. Here is the output:
Now, we’re going to look at how to use a Google Font that is not natively offered in Wick Editor. For example, there is a Google Font called “Spicy Rice” which is not listed in Wick Editor’s font options. I’ll show you how to add it to your project through code.
Normally, if you were adding a Google Font to an HTML file, all you would have to do is copy-paste the link to the stylesheet into your document head, like this:
<link href='https://fonts.googleapis.com/css?family=Spicy Rice' rel='stylesheet'>
But if you were to simply copy-paste that text into Wick Editor’s code panel, it wouldn’t work. We need to add it to the document head. So, here’s what we can do:
var fontText = document.createElement('fontText');
fontText.innerHTML = "<link href='https://fonts.googleapis.com/css?family=Spicy Rice' rel='stylesheet'>";
document.head.appendChild(fontText);
This will append it to the document. Note that when you add the link to the Google Font, it needs to have quotes around it, like in this example. After adding this text to the top of your script, you can use the new font, like so:
myText.fontFamily=‘Spicy Rice’;
myText.setText(“This is " + myText.fontFamily + " font”);
And here is the output:
You can use this method to put all kinds of Google Fonts in your projects. Feel free to experiment and try substituting the link part of the code with other Google Fonts (you can use the W3Schools How To Google Fonts link from above to find the names of various fonts you can add)
