Is it possible to reduce the size of a font-variable.woff2 file?
I have this Montserrat font variable from google fonts api, it has 9 weighs, from 100 to 900, but I only need 3 weights which are 400 500 600, after converting the tiff file to woff2, the file size is now at 120kb (it was 400kb before) which is still too large, I would like to drop the weighs and characters which I dont need to minimize the file as much as possible. I tried fontsquirrel.com, but it removes all the weighs except one…
37 Replies
You can just select the 3 weights you want and combine them into a single file. There are mamy online combiners which will help you achieve this
subsetting fonts is generally the easiest way to reduce file size (you mentioned dropping characters you odn't need, this is exactly that): https://the-sustainable.dev/a-guide-to-subsetting-fonts/
the-sustainable.dev
A guide to subsetting fonts – the-sustainable.dev
This guide can help you reduce the weight of individual font files by subsetting them, which can improve page load performance and weight.
you could use a "variable" font so that the browser only has to load one font file to get all the weight
not sure if variable font can be subset
I would think you could just select 400, 500, 600 of Montserrat from Google fonts and download that file then optimize it?
I tried to subset the font-variable on frontsquirrel.com as the article mentions, but it removes all the weights except one, it keeps only the weight 100 and removes 200 - 900, I tried many settings, none of them work. I dont know, could you maybe try it and tell me if it worked for you, only if you have time of course.
Have you done it before? If yes what tool did u use, I cant find anything related to it
I’ll share the link with you.
Oh my Vietnamese brother, did you even read what I wrote? I am using the variable Font, but it contains all the weights from 100 - 900, and i only need 3 of them. I just want one file which contains the weighs and Alphabet I need to keep the file as small as possible
Bro I am using the variable Font, Did you read what i wrote T_T. But i only need 3 weights, i dont want to download theme separately, i want one 1 file
Yes, I read it again 😅
How did you manage to have montserrat file with variable woff2 font having size 120kb or 400kb. I just downloaded the montserrat variable font file for myself and it is 32 kb max
Here is the file I downloaded
this is a very terrible idea, but if you REALLY REALLY REALLY want to crunch the size of a font, just use the regular font weight (400) and then let the browser do its fake bolding, italics and stuff
also, montserrat from google fonts only uses ~394kb while the weights you want take ~198kb * 3. just use the variable font as-is
you save 2 http requests and about 200kb
How are y'all generating file size more than 50kb for variables fonts?
the trick is to read what i said
^ that explains it
My question was not in that sense but in the sense that I have variables fonts with all font weights less than 50kb
well, the font from google takes more than 50kb
i uploaded montserrat font with variables fonts from google in 32kb