Custom Font not working?
- Dominant language
- JavaScript
- Stars
- 5.3k
- Forks
- 187
- PR merge metrics
- No merged PRs in 30d
Description
Hi all,
Following the docs we cannot get any custom font working. I know that the woff & woff2 font files are correct because we use them in several other projects just fine, here is the style code we are using, can someone please lend some assistance to what we are doing wrong? Our file structure has the component JS file in the same directory as the woff and woff2 files _(maison_neue_bold-webfont.woff & maison_neue_bold-webfont.woff2 respectively)_
```
```
Attempt 1:
```
const testFont = {
fontFamily: 'maison_neuebold',
src: "url('maison_neue_bold-webfont.woff2') format('woff2')",
fontStyle: 'normal',
fontWeight: 'bold',
}
const styles = StyleSheet.create({
title: {
fontFamily: [testFont],
},
})
```
Attempt 2:
```
const testFont = {
fontFamily: 'maison_neuebold',
src: "url('maison_neue_bold-webfont.woff') format('woff')",
fontStyle: 'normal',
fontWeight: 'bold',
}
const styles = StyleSheet.create({
title: {
fontFamily: [testFont],
},
})
```
Attempt 3:
```
const testFont = {
fontFamily: 'maison_neuebold',
src: "url('./maison_neue_bold-webfont.woff2') format('woff2')",
fontStyle: 'normal',
fontWeight: 'bold',
}
const styles = StyleSheet.create({
title: {
fontFamily: [testFont],
},
})
```
Attempt 4:
```
const testFont = {
fontFamily: 'maison_neuebold',
src: "url('./maison_neue_bold-webfont.woff2') format('woff2')",
fontStyle: 'normal',
fontWeight: 'bold',
}
const styles = StyleSheet.create({
title: {
fontFamily: testFont,
},
})
```
... etc
Contributor guide
No contributing guide indexed for this repository
Research direction
The payload names only the component JS file and the adjacent .woff/.woff2 files; start by comparing the documented custom-font setup with the four snippets and reproducing the behavior. No test, expected output, or concrete code change is specified, so done is not defined until the supported configuration and a verification case are agreed.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 20/100