How to add Google Fonts to your Wick project

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.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=' 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=' Rice' rel='stylesheet'>";

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)


Here’s an example project that uses the method described above. It’s probably much easier to copy-paste the code from here than it is to copy-paste it from the forum post, so please feel free to look at it if you’re interested in this:
google-fonts-example.wick (1.6 KB)


very nice
thankyou for sharing!

1 Like

I didn’t know this was possible :O

Thank you for sharing this tutorial,
it taught me some new stuff :D

1 Like

Can’t you download the font and import it into the asset library?

I don’t think Wick allows u to upload ttf files to ur project…

I tried it with different fonts, doesn't work

I feel like @bluecake’s method is the best one so far

1 Like

Personally, I tried importing .tff files before and it didn’t work. I know you’re supposed to be able to, Wick even lists .ttf as one of the file types it supports when you’re uploading a file, but I really haven’t been able to import a single .ttf file yet…

yeah, i tried making my own font once (i only edited like 1 letter to test) and it refused to upload.

1 Like