androidiosreact-nativeadobetypekit

Using Typekit (Adobe) fonts on React Native project?

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?

Solution

  • 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)