Why i can't use custom font in <Text> property in react-native-web?

Hey guys i try to use a rtl font in react-native-web (using cmd npx-create-next-app with-react-native-web) and font loaded without any problems but when i want to use it in a Text component or any components except View component its not working! font load in _document.js :

const normalizeNextElements = `
  #__next {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  @font-face {
    font-family : 'Vazir';
    src: url("/Vazir-Regular.woff2");
  }
  * {
    font-family : 'Vazir';
  }
`

using font:

<View style={{width:'100%',height:'100%',justifyContent:'center',alignItems:'center'}}>
      <View style={{display:'flex',width:100,height:100,}}>
      تست
       <Text>
         تست
       </Text>
       <TextInput placeholder="تست" />
    </View>
    </View>

and result: https://pasteboard.co/LwS9K1rtkGVW.png what's wrong with it?