question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Update the documentation & types to show setFontName

See original GitHub issue

FYI, for all who want to set separate fonts on the editor, u can do that by providing the font name to

richEditorRef.current?.setFontName('Caveat');

Make sure to supply fonts to the CssText in editorStyle, we can pass fonts as fontFace with base64 encode, so u dont need to keep the font file, instead it can read from base64 code.

 <RichEditor
          editorStyle={{
            cssText: fontFace,
          }}/>

where fontFace is similar to something like this

const fontFace = `@font-face {
    font-family: 'Allura';
   src : base64Code for your font goes here; 
   }
@font-face {
    font-family: 'Caveat';
   src : base64Code for your font goes here; 
   }
`

Issue Analytics

  • State:open
  • Created 2 years ago
  • Comments:15

github_iconTop GitHub Comments

2reactions
khanh21011999commented, Jan 24, 2022

I’m trying to add font by this @Samykills

I have a sample component to test, it look like this

const App = () => {
  const richText = React.useRef();
  richText.current.setFontName('Montserrat');
  return (
    <SafeAreaView>
      <ScrollView>
        <KeyboardAvoidingView
          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
          style={{flex: 1}}>
          <Text>Description:</Text>
          <RichEditor
            ref={richText}
            editorStyle={{
              cssText: font,
            }}
            onChange={descriptionText => {
              console.log('descriptionText:', descriptionText);
            }}
          />
        </KeyboardAvoidingView>
      </ScrollView>

      <RichToolbar
        editor={richText}
        actions={[
          actions.setBold,
          actions.setItalic,
          actions.setUnderline,
          actions.heading1,
        ]}
        iconMap={{
          [actions.heading1]: ({tintColor}) => (
            <Text style={[{color: tintColor}]}>H1</Text>
          ),
        }}
      />
    </SafeAreaView>
  );
};

export default App;

The font file look like this

https://paste.ofcode.org/PiEu7yNrNAbZHLtUHNHUDQ (this too long, i can’t paste here)

Swear i don’t know why it not work !

Please help @Samykills

1reaction
khanh21011999commented, Jan 27, 2022

I work like charm @Samykills

Read more comments on GitHub >

github_iconTop Results From Across the Web

SetFontName Method (IOcrDocumentManager)
Replaces the specific type of font used in the final document. ... Use GetFontName and SetFontName to get/set the fonts used in the...
Read more >
Font (POI API Documentation) - Apache POI
Modifier and Type, Field and Description. static byte, ANSI_CHARSET. ANSI character set. static short, COLOR_NORMAL. normal type of black color.
Read more >
FAQ Section | Word library
The following code illustrates how to set ligature types for text. ... setFontName("Arial"); //Save and close the document. document.save("Sample.docx", ...
Read more >
How to Change Font in HTML
Learn how to use HTML and CSS to change your font type, size, ... In this post, we'll show you how to change...
Read more >
Customize or create new styles
Modify a style by updating it to match formatting in your document. If you have text in your document that already has a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found