January 18, 2020 4

Optimize Fonts for the Web using FontForge

Optimize Fonts for the Web using FontForge


In this tutorial I’m going to show you how to optimize a font file for the web using FontForge. I’m going to do this in two ways. First I’m going to remove any symbols that I don’t think I’m going to use on my website such as stuff for other languages… …and then I’m going to save it as a Web Open Font Format file. Alright so I’m going to open a font in FontForge. I’m going to change the view, so I can see it a little better. By default FontForge shows all the possible Unicode symbols even if the font doesn’t have them in it, so you got to scroll through millions of characters. Well what you do to just fix that is select “Encoding” and “Compact”, and then it just shows the symbols that are actually in the font. Now start selecting all the symbols you know you’re never going to use in your website. Alright so now I have a bunch of the symbols that I don’t want. And to remove them I select “Encoding” and “Detach and Remove Glyphs…” And then I’ll reset the compact view. Some of these I probably don’t really need, but I’m just leaving them in there to be on the safe side. Now to save it as a Web Open Font Format file. You goto “File” then “Generate Fonts…” and you select your location and “Web Open Font”. Then on the “Options”, “OpenType” and “Old style ‘kern'” are selected by default, but I have these unselected because it makes it a little bit smaller it still works on all the different web browsers. Then when you do “Save” it pops up with some errors, but you can just ignore them and it will still work. And now the file is over 90% smaller. Then of course you’ll want to test it on all the different web browsers to make sure it’s actually displaying your font and to make sure it’s not just displaying a fall back font that looks really similar, because that’s gotten me before. And then also I like to put right above the license for the font that I changed the font so that it’s now in the Web Open Font Format and that I removed a bunch of the symbols that I didn’t need.

4 Replies to “Optimize Fonts for the Web using FontForge”

  • Grant Ojanen's Creations says:

    Thanks for watching! Please post questions or feedback. Also if you use this in one of your creations, it would be great if you shared it here.

  • عــلاء العــراقــي says:

    Hi the game Gun Upgrade is very nice but I can not buy the full version Is it possible to give me the full version without buying for Android

  • عــلاء العــراقــي says:

    Grant Ojanen's Creations
    I mean I do not have money to buy the full version is it possible to give me the full version without buying

  • عــلاء العــراقــي says:

    give me the game please

Leave a Reply

Your email address will not be published. Required fields are marked *

Recent Posts
Recent Comments
Tags
© Copyright 2019. Amrab Angladeshi. Designed by Space-Themes.com.