Mobile Custom Font Size

I have trouble getting my custom fonts to be responsive for different platforms (Mobile, desktop, tablets). 

How to you get the fonts to be more responsive? 

If you're using absolute units like "px" to set your font size and overriding the Squarespace default sizing's, your font will likely always be the exact pixel amount that you set.
 

H1 {
font-family: "CUSTOM_FONT_FACE";
font-size: 54px;
}

Will always be 54px regardless of the size of the rest of your content or screen size. You'll likely want to set the maximum size of each of your custom text elements using an absolute unit and use relative units to scale appropriately. Ideally, you'd end up with unit that calculates the size dynamically. Otherwise, you'll need to use media queries to adjust the size for each possible screen size.

Example setting a font size with an absolute unit and using relative units for responsive design could look like this:

h1,h2,h3 {
font-family: "MY_FONT";
font-size: 54px;
}

.myBlock h1 {
font-size: 3rem;
}
.myBlock h2 {
font-size: 1.5rem;
}

You can also use other methods to calculate the sizing/scale of elements using units or formulas like "calc()" or "vmin" or "vmax" and "vw" and "vh".