Add Custom Font for Flutter Web Only

Question

How do you add custom font for Web only?

I know that I can add font assets but I'd like to keep using system fonts for ios and android.

Do I embed <link> for google fonts in the <head> in index.html?

For example:

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap" rel="stylesheet">

Randal Schwartz · Accepted Answer · 2021-02-20 16:12:55Z

1

If you are wanting to use a Google font, the https://pub.dev/packages/google_fonts package can defer loading a font until runtime. If you determine you're on the web, load the font and select it in your primary text theme. Otherwise, ignore all that. :)

answered Feb 20, 2021 at 16:12

Randal Schwartz

44.8k4 gold badges51 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

pxsanghyo Over a year ago

Thanks I didn't know about google_fonts package. I ended up doing this: ThemeData(textTheme: kIsWeb ? GoogleFonts.robotoTextTheme() : null)

Collectives™ on Stack Overflow

Add Custom Font for Flutter Web Only

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related