CODEWITHSUNDEEP
flutterfontsfont-awesomeflutter-web
Suragch
Suragch

Reputation: 511666

Flutter Web FontAwesome fonts download size too big

I noticed that a Flutter Web project that I am making with the font_awesome_flutter plugin is being slowed down by the font_size download. I'm only using one icon from the font. Is there any way I can get this smaller?

Here is the data from webpagetest.org:

enter image description here

Upvotes: 0

Views: 1118

Answers (1)

Suragch
Suragch

Reputation: 511666

Remove the Font Awesome plugin from your project

Remove the font_awesome_flutter plugin from pubspec.yaml and wherever you are using it in your project.

Generate a font with only the icons that you need

You can just extract the icons you need from the font and discard the rest. An east way to do this is to use the IcoMoon site. For example I used the site to generate a font with only the Apple logo icon.

enter image description here

Note the code (eabe). You'll use it later.

Add the font in Flutter

You get get instructions for doing that here. I called my font family Apple.

Use the icon in your app

To use your icon just use a Text widget with the code as the text and specify the font family that you registered in step 2.

FlatButton(
  child: Text(
    '\ueabe',
    style: TextStyle(fontFamily: 'Apple', fontSize: 24),
  ),
  onPressed: () {
    model.onApplePressed();
  },
),

Here is what it looks like in the app:

enter image description here

Check the size

Rebuild your Flutter web app and put it online.

Here is retesting the site at webpagetest.org.

It's not as small as I expected but the font size is definitely better. (The site is also using Material Design icons so that may be contributing to the remaining font size.)

enter image description here

Upvotes: 1

Related Questions