Custom Font not working?

[luskin]

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)

<div className={css(styles.title)}>Title Test</div>

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

[Kim-Andersen]

@luskin Did you ever find a solution to this?

[jafidiesel]

I had the same issue and after a while I realise that it was a url problem.

In my case I was using aphrodite on a react proyect so my url

const cool = {
	fontFamily: "Montserrat",
	fontStyle: "normal",
    fontWeight: "normal",
	src: "url('montserratbold.ttf') format('truetype')",
}

....

title:{
fontFamily: [cool]
}

was trying to point to my public/ folder. After discovering this it just work great!