Add Custom Font for Flutter Web Only

Issue

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">

Solution

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 By – Randal Schwartz

Answer Checked By – Marilyn (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.