Skip to content

Fonts

Many custom fonts ship as separate files per weight/style (e.g. Montserrat-Regular, Montserrat-Bold, Montserrat-Italic). React Native often needs the specific font file, not just fontWeight/fontStyle. The fonts prop maps a family + weight to the actual font file name.

import type { FontMap } from '@quanta-studio/react-native-richtext'
const fonts: FontMap = {
Montserrat: {
'400': { normal: 'Montserrat-Regular', italic: 'Montserrat-Italic' },
'700': { normal: 'Montserrat-Bold', italic: 'Montserrat-BoldItalic' },
},
}
;<RichText source={{ html }} baseStyle={{ fontFamily: 'Montserrat' }} fonts={fonts} />

When text resolves to a family/weight/style present in the map, the renderer swaps in the mapped font file. FontMap is Record<family, Record<weight, { normal?: string; italic?: string }>>. Families/weights not in the map fall back to RN’s default fontWeight/fontStyle handling.