Customizing in-app message font

Rich in-app messages (Banner, Rich Interstitial, and Star Rating) allow you to change the font of your message text. Using a custom font will change the Title, Message, and any Button text in your message.

Rich_In-App_Message_Font.png

Changing your message font

To change the font in your rich in-app message, you'll have to:

  1. upload a custom font file (must be a Base64-encoded CSS file), and
  2. enter the font family in the field below the file

First, create a new Banner, Rich Interstitial, or Star Rating message. Click the current Font file in the Message Composer to open the file selector/uploader. (The default font for all messages is San Francisco.)

HQfontpicker.gif

Select one of your existing fonts, or click Upload to upload a new CSS file. Once you upload a font file in Leanplum, it will be available for use in later messages.

Convert to Base64-encoded CSS

Most font files are .ttf or .otf files, so you will probably have to convert your font file before uploading. To convert your font file to Base64-encoded CSS:

  1. go to this font generator to convert your file
  2. click Upload, then select your .ttf file 
  3. select Expert to reveal additional settings
    Screen_Shot_2017-09-14_at_4.21.18_PM.png
  4. check the Base64 Encode box in the CSS settings and
  5. (optional) change the CSS Filename in the CSS settingsScreen_Shot_2017-09-14_at_4.23.13_PM.png
  6. check the agreement box, then click Download Your Kit. A zip file with a few different versions of your font file should download.
    Screen_Shot_2017-09-14_at_4.22.17_PM.png

Inside the zip file you downloaded, you should see your .css file. This is the file you should upload to Leanplum. Click the current font in the composer to select a new file, then upload your .css file.

changefontgif.gif
Tip: If your font doesn't seem quite right after conversion, try checking Keep Existing in the Truetype Hinting setting in Font Squirrel.
Screen_Shot_2017-10-02_at_9.03.34_AM.png

Add your font family

The last step in changing your message's font is to add the font family. You can find your font family in the font .css file you just downloaded.

Open the .css file and look for "font-family:" It should be near the top of the file. 

Screen_Shot_2017-09-15_at_8.47.46_AM.png

Copy the name and paste it into the font family field in the message composer. (Only copy the text inside the single quotes.)

Screen_Shot_2017-09-15_at_1.11.17_PM.png

Now, your preview should show your new font for the title, text, and buttons of your message.

 


Was this article helpful?
Have more questions? Submit a request