Modern custom font guide?

General JUCE discussion
#1

Every discussion here about how to use a custom font is dated from 2010 or so.

Can anyone point out how to embed and use a custom font for modern JUCE?

Thanks.

1 Like
Which Fonts Are Available In JUCE?
#2

I’ve done it a few times, I will try to write up a guide. It’s sort of (but not super) convoluted to get working.

1 Like
#3

That would be awesome. Something tells me I’m not the only one who would find it useful. Thanks.

#4

It’s super simple with the Projucer. Just:

  • Add the TTF (or OTF etc) files to the Projucer project. By default it will add them in the BinaryData.
  • Use Typeface::createSystemTypefaceFor() to create the typeface and construct a font.

I’ve never had a problem doing this with a Meyer’s singleton, especially now they’re threadsafe to initialise in C++11. Let’s say you had a font WackyFont.otf and it has been added to the Projucer project. You can have a method to create this font:

static const Font& getWackyFont()
{
    static Font wacky (Font (Typeface::createSystemTypefaceFor (BinaryData::WackyFont_otf,
                                                                BinaryData::WackyFont_otfSize)));
    return wacky;
}

I usually add a method like this to my custom look-and-feel class. They you can get different sizes by doing things like getWackyFont().withHeight (255.0f) etc…

I’m sure there are other patterns that you can use as Typeface::createSystemTypefaceFor() returns a shared Typeface::Ptr.

BTW Watch out for font licenses as many include an exclusion for embedding like this and require a separate (often more costly) license…Slightly different context but there was the My Little Pony case recently…

7 Likes
#5

Regarding the encoding of the font files to the binaryData file you can also use the BinaryBuilder (cf JUCE/extras/binarybuilder). I find it more practical than projucer for that, it makes it easy and fast to update the binaries, and name the binary file as you want

" Usage: BinaryBuilder  sourcedirectory targetdirectory targetclassname [optional wildcard pattern]\n\n"
                     " BinaryBuilder will find all files in the source directory, and encode them\n"
                     " into two files called (targetclassname).cpp and (targetclassname).h, which it\n"
                     " will write into the target directory supplied.\n\n"
                     " Any files in sub-directories of the source directory will be put into the\n"
                     " resultant class, but #ifdef'ed out using the name of the sub-directory (hard to\n"
                     " explain, but obvious when you try it...)\n";
3 Likes
[Guide] Juce Font Embedding (2019)
#6

Full example of embedding.
Here’s my FontAwesome wrapper …


1 Like
#7

Thanks, everyone. It was much easier than I expected. I simply added the .otf file in Projucer, and then added this to my LookAndFeel:

Typeface::Ptr getTypefaceForFont(const Font& f) override
    {
        static Typeface::Ptr myFont = Typeface::createSystemTypefaceFor(BinaryData::uglyFont_otf,
                                                                 BinaryData::uglyFont_otfSize);
        return myFont;
    }

Thanks again, gents.

6 Likes
#8

At some point in the past it was way more complicated :slight_smile:

1 Like
#9

Yeah, when i said I’d post a guide to how I do it this was pretty much the meat of what I was going to show. When I do it however, I usually add an if/else inside the getTypeFaceForFont function that allows the method to pick the font I actually want (whether it’s an embedded font or existing system font) via Font::getTypefaceName() so I can use multiple fonts if needed instead of blindly returning my typeface (which may be what you want in your case).

#10

This thread seems to be the most relevant one so I’ll continue with it.

Is getTypefaceForFont() really works? am I missing something?

I’m only able to use custom fonts when they’re explicitly set. (and I’d like my LookAndFeel to simplify this of course).

Here is a simple PIP to test this:
CustomFontPIP.h (198.0 KB)

Here is what I get when running it on macOS (I’ll test other platforms afterwards) -

image
image.jpg1424×1068 139 KB

I would’ve expected the custom font to show for all text components.

1 Like
#11

I use setDefaultSansSerifTypeface(Fonts::SpartanMB::regular.getTypeface()); in the constructor of my LookAndFeel and that works perfectly, not sure if it’s the right way to do it though :wink:

1 Like
#12

what OS are you using and what branch/juce commit?

(btw, here is similar thread with similar issue:
Embedding Custom Fonts OTF, TTF)
I’m hoping with this PIP to set a reliable test for this behavior that can be easily tested/reproduced.

1 Like
#13

That method works for me with both Windows and macOS, using 5.4.3 master (technically it’s my own fork, but the changes I made are in places completely unrelated to fonts).

#14

It seems this is an important part of actually applying the custom LAF/font to be defaulted:
LookAndFeel::setDefaultLookAndFeel (&customLookAndFeel);

I’ll update the PIP accordingly and test it under additional OSes.

2 Likes
Example code for creating & using Custom Typeface?
#15

Yes, I’m also doing that, forgot to mention it.

1 Like
#16

I’ve always found dealing with custom fonts in JUCE confusing and unintuitive.

Thanks to this and the other thread linked I boiled it down to these 3 lines to set a new default font stored as Binary Data:

In my custom L&F constructor

Typeface::Ptr tface = Typeface::createSystemTypefaceFor(BinaryData::MontserratRegular_ttf, BinaryData::MontserratRegular_ttfSize);
setDefaultSansSerifTypeface (tface);

and then in Main::initialise() or MainComponent constructor:

LookAndFeel::setDefaultLookAndFeel (&customLookAndFeel);
9 Likes