Change font family based on block type + inline style

[joshfeinsilber]

Hi there!

I am looking to have one font family for a bold header-one, and a different font family for a bold header-two. Is there any way to do this? Currently, the custom styles allows us to specify styles for block type and inline style separately, but not together.

Thanks so much!

[summercity]

Any update on this? I am facing the same issue...

Thank you so much!

[summercity]

I was able to do a workaround.

Note the item = block

1. Use 'code-block'
   eg. if (item.type === 'header-one') { item.type = 'code-block' }

2. Create custom css element and exclude default text styles
   if (!this.isEmpty(item.inlineStyleRanges)) {
   item.inlineStyleRanges.map(i => {
   if (i.style != 'ITALIC'
   && i.style != 'BOLD'
   && i.style != 'LINK'
   && i.style != 'UNDERLINE'
   && i.style != 'STRIKETHROUGH' ) {
   if(originalType === 'header-one') {
   i.style = i.style + '-one';
   } else if (originalType === 'header-two') {
   i.style = i.style + '-two';
   } else if (originalType === 'header-three') {
   i.style = i.style + '-three';
   } else if (originalType === 'header-four') {
   i.style = i.style + '-four';
   } else if (originalType === 'header-five') {
   i.style = i.style + '-five';
   } else if (originalType === 'header-six') {
   i.style = i.style + '-six';
   }
   }

                        })
                    }
   

3. Map CSS to corresponding custom elements
   'merriweather': {
   fontFamily: 'Merriweather',
   },
   'merriweather-one': {
   fontFamily: 'Merriweather',
   fontSize: 32,
   },
   'merriweather-two': {
   fontFamily: 'Merriweather',
   fontSize: 24
   },
   'dancing script': {
   fontFamily: 'Dancing Script',
   },
   'dancing script-two': {
   fontFamily: 'Dancing Script',
   fontSize: 24
   },