How to use Adobe Fonts in a Flutter Web Project?

Question

Our Design Team uses Adobe Fonts and gave us a https://use.typekit.net/qwertyuiop.css URL to embed in our Flutter Web Project.

/*
 * The Typekit service used to deliver this font or fonts for use on websites
 * is provided by Adobe and is subject to these Terms of Use
 * http://www.adobe.com/products/eulas/tou_typekit. For font license
 * information, see the list below.
 *
 * anton:
 *   - http://typekit.com/eulas/00000000000000003b9b1327
 *
 * © 2009-2020 Adobe Systems Incorporated. All Rights Reserved.
 */
/*{"last_published":"2020-10-08 12:06:43 UTC"}*/

@import url("https://p.typekit.net/p.css?s=1&k=uws7ddb&ht=tk&f=10881.10882.10884.10885.15357.15358.15361.15362.15898.32874.32875&a=11875597&app=typekit&e=css");

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

.tk-anton { font-family: "anton",sans-serif; }

Do you know how to embed such a CSS File in a Flutter Web Project?

Thank you!

Solution

Flutter is an app development platform, and Adobe Fonts does not support app licensing, so most fonts at Adobe Fonts cannot be used in an app. However, you're in luck this time, because the font in question, Anton, is an open-source font and is also available from Google Fonts.

So in this case, you can download Anton from Google Fonts and then follow Flutter's Use a custom font tutorial.

As for the majority of the Adobe Fonts library, the designer and/or type foundry that made the typeface is listed on every page, so check there first. Many of them sell app licenses through their own website, or they'll have links from their website to the marketplaces where they license their fonts, like Fontspring and MyFonts.

Comments

[Thierry]

Anton is merely an example. I'm trying to push our Designers to only use Google Fonts... But trying is not enough. Hahaha! Since we currently work on a Flutter Web (only) application, defining the font as asked by Adobe in the index HTML seems to work smoothly on some browser but not all. We encountered a lot of problems on iPads, iPhones and Apple products in general. Anyway, thanks for your answer. :-)