Khan / Khan/aphrodite

Custom Font not working?

Open
#346 2 comments 0 reactions 0 assignees View on GitHub
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)_

```

Title Test

```

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.