3

I recently opened some mobile app mockups that I have to develop. I'm using React Native (with Expo). The thing is, this mockups use a lot of Adobe fonts (Typekit).

I came across the doc: https://helpx.adobe.com/fonts/using/embed-codes.html, that can be used on web apps, not on compiled mobile apps.

I can't find any questions about it, but I wonder how mobile apps dev are implementing Typekit fonts in their projects?

enguerranws
  • 8,087
  • 8
  • 49
  • 97

2 Answers2

4

From the font licensing page on Adobe's website:

Can I embed the fonts in a mobile or desktop application I’m building? No. The font licensing does not allow you to embed the fonts within mobile or desktop applications. This requires an appropriate license to be purchased directly from the foundry or one of their authorized resellers.

Tedious method: (informational or testing purposes only)

Warning: The following method of downloading a font for offline use might not allowed by Adobe. Instead, you should get the font files from somewhere else, google fonts allows you to download them.

Once you've added your fonts to your web project on Typekit, get the embed link (href), that would be used to get the .css for your normal web project, e.g. https://use.typekit.net/XXXXXX.css. Visit the site in a browser to see the content, and download the first link from each @font-face css block. Rename it to "fontName".woff2.

@font-face {
font-family:"bungee";
src:url("https://use.typekit.net/af/dd8be0/00000000000000003b9b2a4f/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/dd8be0/00000000000000003b9b2a4f/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/dd8be0/00000000000000003b9b2a4f/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:400;
}

Convert it into .ttf* somewhere, rename it to the font name and follow the usual way of installing fonts. (i.e. using react-native.config.js and an assets/fonts/ directory, and use font names** (not font file names) in style objects in your project.

My experience: I have managed to download a font from Typekit in woff2 format from the css file, convert it into ttf, renamed the font file into the font name, place it in the project, run npx react-native link (even though im using autolinking) and so its working on both iOS and Android apps.

I recently answered a question on how to install fonts for react-native.

*Why are we converting into ttf?: Each @font-face block comes with multiple different formats, but the first link (woff2 format) works only on iOS for me on react native. Android isn't able to load it, and even android studio cannot open the file. And the last link (otf format), works only on Android, and iOS can't load it. So the solution is just to take the woff2 file and convert it ttf, which is what I usually use for custom fonts on react native.

**Why do i need to rename the file to the font name?: Remember that iOS uses the font name, but android uses the file name. Easiest solution is to rename the file to be the font name, so your code runs on iOS and android without using the Platform module. (Find out the font name is by opening the font with the Fonts app)

Ben Butterworth
  • 22,056
  • 10
  • 114
  • 167
  • There was a previous answer about typekit on mobile. It simply hasn't been done, and maybe it shouldn't be done, for legal reasons?: https://stackoverflow.com/questions/10147394/using-custom-fonts-in-ios-with-typekit-by-adobe – Ben Butterworth Jan 13 '20 at 06:26
  • Thank you for your answer. I was aware of Adobe policies regarding their font, but well, I think the actual answer is: do not use Adobe fonts on a compiled project. – enguerranws Jan 13 '20 at 08:17
  • Yes, I guess they reserve the power to brick your website styling. It would be nice if downloading the fonts was the recommended and possible option. – Ben Butterworth Jan 13 '20 at 16:42
  • I wanted to try downloading the font during the app startup, but apps need to work offline, so I did not bother going down that route. – Ben Butterworth Jan 13 '20 at 16:59
  • Yes, I came up with that idea, but the app I'm currently working on is 100% offline, so I gave up quickly. – enguerranws Jan 14 '20 at 09:36
  • Your answer is pretty complete. I think you should add that even if it's possible (but, well... tedious), it doesn't seem to be allowed by Adobe Typekit policies. – enguerranws Jan 14 '20 at 09:38
  • I wasn't able to find much information about the policies, and didn't want to go into legal aspects. I will add a warning. – Ben Butterworth Jan 14 '20 at 16:40
  • Oh, I found it. Its against their font licensing policy, so I've edited it accordingly – Ben Butterworth Jan 15 '20 at 07:48
-1

The right way would be to specify whichever font you need to use in the react native code. Meaning just use it. And then in your android and ios build projects simply import the fonts to your resources. Hope this helps

Haseeb
  • 9
  • 4
  • "simply import the fonts to your resources" => the question is how, using Typekit / Adobe fonts? – enguerranws Jan 13 '20 at 08:15
  • Ohh my bad. I just saw that typekit fonts cannot be downloaded. All custom fonts need to be manually imported into react native. So i don't think there is a workaround for it atm. However, have you tried using the import tag in a custom style sheet in your RN project? @import url("https://use.typekit.net/xxxxxxx.css"); Try using this maybe? – Haseeb Jan 13 '20 at 08:54
  • @Haseeb that is not something that's possible with RN styles – Jelle Van de Vliet May 10 '20 at 14:43