Header with Gradient issue

Some fonts get clipped when choosing ‘Custom Gradient’ in Header, Foundry 3. If you just use a color, no problem. In this case I’m using Google font ‘Bangers.’

Screenshot 2023-03-22 at 10.43.10 AM
Screenshot 2023-03-22 at 10.43.22 AM

Provide us a copy of your project file please, along with a link to the live site.

Create a ZIP file containing your project file. This is the file you open in RapidWeaver to edit your site. After creating the ZIP file, upload it using a service like Dropbox, WeTransfer, Droplr, or a similar service to create download link for us. Paste that download link in your reply.

I knew I was getting off easy the first time :slight_smile:
site
file

Looks like it has to do with how the font is built. I added a border to see where the outer edge of the text is and you can see with your font it gets clipped on the right, while another more standard Google font works as expected.

Unfortunately not all Google Fonts are of the same quality level in their construction. And not all will work well with CSS masking, which is used for applying a gradient to text in CSS. :frowning:

You could use a little padding on the right side to make it appear to work correctly. But I don’t think that is a real solution to the problem. If you’d like to try that you can use one of Bootstrap’s built in preset paddings by adding pe-4 to the Classes field for that Header. This adds preset padding #4 to the end (right side) of the element. Personally though I’d probably opt for a different font as I think you’ll end up running into problems with it elsewhere, too.

1 Like

Thank you so much for looking into it. Was reporting in case it was a bug, and the CSS masking explains it to me.