You need to be logged in to post in the forum - Log In

An active JCE Pro Subscription is required to post in the forum - Buy a Subscription

Support is currently Offline

Official support hours
Monday to Friday
09:00 - 17:00 Europe/London (BST)

Please create a new Ticket and we will get back to you as soon as we can.

#112077 Adding Google Font Weights

Posted in ‘Editor’
This is a public ticket

Everybody will be able to see its contents. Do not include usernames, passwords or any other sensitive information.

Latest post by Ryan on Thursday, 20 October 2022 14:14 BST

Wednesday, 19 October 2022 18:39 BST

mciavolino
I've successful added a and editor.css file and three custom GOOGLE fonts which work.

How do make the font weights selectable?

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Parisienne&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Parisienne&display=swap');
@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@400;500;600;700&display=swap');

Thursday, 20 October 2022 11:42 BST

Ryan
Adding the font weights allows the correct display of the font when you format text with the Bold button (equivalent to font-weight:700) or when you style any text with the font-weight css rule.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Thursday, 20 October 2022 14:06 BST

mciavolino
Thanks. Where specifically do "style any text with the font-weight css rule."?

Thursday, 20 October 2022 14:14 BST

Ryan
The best way to do this would be to add some css rules tou your template stylesheet, which you could then select and apply from the editor Styles list, eg: .

font-weight-400 {
    font-weight: 400;
}

.font-weight-500 {
    font-weight: 500;
}

.font-weight-600 {
    font-weight: 600;
}

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.