Search code examples
flutterdartfontsadobeflutter-web

How to use Adobe Fonts in a Flutter Web Project?


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.