Custom fonts: Google Fonts and Adobe Typekit:
- On the customize screen of your Riddle, go to the Font Dropdown and select “Custom”.
- This will open a new selection menu where you can choose your font provider.
Custom fonts: via Google Fonts
To quickly check out this new tool, it is easiest to start with Google Fonts.
- Go to https://fonts.google.com/ and pick a font you love
- To test the integration works for you, we recommend you pick one that is clearly distinguishable from your normal fonts (like our Baloo Paaji).
- Once you found a font, click on the “Select this font” button.
- At the bottom of your screen, a black bar will appear saying “1 Family Selected”.
- Click on that bar to enlarge it.
- In that window you will see a section called “Specify in CSS”. Copy the font family name from that box (in this case: Baloo Paaji) and paste that into the Riddle Font dialog box into the Families input box and also into the Body (all text) input box.
- You can either use that font for all your text and leave the word “inherit” in the other input boxes or you can choose a custom font for headings, buttons and answers.
Custom fonts: via Adobe TypeKit
Using Adobe Typekit is fairly similar. (Adobe Type Kit is awesome – and they now offer a free service to use one font, so worth checking out.)
- To use Typekit, go TypeKit.com – and pick a font and click ‘Add to kit’
- Then select the font variant you want to use – and click ‘Create a kit’
- Name your kit (ie. Mike’s site) and add riddle.com AND the domain where your quiz with this font will be used (meaning the site where you will embed your riddle).
- Click ‘continue’ – then ‘Publish’
- Close this window and go to the browser tab with TypeKit open.
- Click on ‘View all kits’
- Click on ‘Using fonts in CSS’
- Right – almost there, now you just need to get that Kit ID and font name from your Typekit.
- Paste the Typekit ID in that field in Riddle, then paste the font name in each of the ‘Font override’ fields – and you’re all set. 🙂
Custom fonts via fonts.com
Fonts.com offers a wide variety of paid webfonts. Unfortunately they do not have any free fonts for you to try out their service.
To use their fonts follow these steps, assuming that you have an account with fonts.com
- Create a new web font project from this URL: https://www.fonts.com/web-fonts/projects
- Name your project and open it
- First add fonts to the project either by purchasing them or by adding them from your purchased items
- Next set up domains for the font project. Please add the site where you will embed the Riddle as well as riddle.com to the domain list
- Publish your project by clicking on “Publishing Options” and choose the JS option.
You now need to grab the project ID from the Javascript code. The Project ID is the character string in that line of code before the .js suffix
Now add this to the custom font setting on Riddle and type the name of your font.
Custom fonts: via your hosted font
Have you own custom font? You can easily link to it – so any time you create a quiz, it will display in your font.
Here’s how:
- Select ‘custom’ from the main font menu
- Then choose ‘custom’ from font provider
- Make sure you have the CSS file set up on your server to define your custom font. The CSS will look something like this:
<pre class="wp-block-code"><code>@font-face {
font-family:"MyCustomFontFamilyName";
src:url("MyCustomFontFile.woff") format("woff");
}</code></pre>- Now add the URL to the CSS file where you are hosting your font and the font CSS . (Please note: all links must be https:// to function correctly.) or if your server does not allow cross site access, contact us via chat or hello@www.riddle.com/blog so we can host your font on the Riddle.com servers for you.
- IMPT: Most servers will prevent a font hosted on your servers to be accessed by a Riddle coming from riddle.com. Just email us or ask us on chat – we will happily upload your font file to our CDN and create the necessary font CSS for you.
- Fonts should be saved as .woff (not .ttf and .eot)
- Type the font family name in the ‘families’ section
- If the same URL refers to multiple fonts, just separate them with a comma (no spaces) – for example, “DRPublik-Black,DRPublik-BlackItalic” for these two fonts.
- Add the font name in the ‘font override’ section
- If you’re not sure, here’s a sample URL: https://www.yoururl/fonts/MYFontFamilyName.css (if we host the font for you, we will provide you with this URL)
- URLs vary, but in this case, ‘MYFontFamilyName’ is the font family name, and ‘MYFont’ is the font name.
We’re big font geeks so if you need further help with Typekit, Google Fonts or any other Riddle-related question, please drop us a line at hello@www.riddle.com/blog.
We race each other to read and respond to every message – often in under five minutes.
