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
google fonts gives a 4mb file with all the fonts
how do y'all add fonts in your html file if you are using @font-face syntax if you are serving the font-files?
the same way that google does
For the value of src in the font-face syntax, do y'all pass the url from google fonts or the path of the font file stored locally in your folder
I'm talking about the scenario when you want to serve files locally and not use @import from google fonts
the only option, if your website can be accessed in europe in any way, shape or form, is to download the files and serve them yourself, as google violates the gdpr law by selling user data without consent
Let's take this scenario, what would your font-face syntax look like ?
I'm most interested in the value for src key
literally just yoink from google, throw in my css, tweak the path and done
im not going to write all the stuff manually, as different fonts have different definitions, and google does it all for me
I was asking for a specific reason because when you don't rely on google fonts '@import' and serve files locally, the file size for any font-family should not be more than 50kb
Also , I'm curious as to how people download .woff2 fonts from google fonts or variable woff2 fonts from google?
it has a download button
you're right, it shouldnt, but not all fonts are that optimized
does that not lead to having a file size of + or - 4mb
also, different versions will have different variable features which vary the size
no, its ~398kb or something
True but it should not be in mb
i was talking about the zip filr you get from google fonts
you wont use the zip file: just the 2 variable fontd
fonts
I'm curious if you know this way of downloading fonts:
1. Choose your font-family [ eg: Roboto from Google Fonts]
2. Click on get font button
3. Click on get embed code
4. Go to import
5. Copy the url part without the quotes and paste it in new tab
6. Copy the url from latin format of the font-weight you desire and voila you have yourself a font with that specified weight with a size less than 100kb
yes, i know how to violate the rgpd
gdor
gdpr
as i said, in europe, you have 3 options:
1- self-host the google fonts font family
2- use a different service that doesnt violate gdpr
3- use system fonts
@Internet_Rambo137
1. Subset guide: https://barrd.dev/article/create-a-variable-font-subset-for-smaller-file-size/
2. Limit the weight in your code, for example 300-600
barrd.dev
Create a variable font subset for smaller file size : barrd.dev
How to use the python fonttools library to reduce a fonts file size by removing elements you do not need using a technique called subsetting.
- oh and make sure you only have
woff2 in your project, don't bother using any file types other than woff2
- Self host your font, put it in your project, do not use Google services‚font-weight to : 300 - 600‘, I still have to download the file tho ;D, the purpose is to minimize the file as much as possible, because I want to get the best google light house score! I will try your second suggestion.
if you only type latin characters on your website, subset can remove other characters that aren't latin
it can be a massive size reduction
Yes i tried subletting the variable font, but it removes all the weights except one
use that python fonttools cmd thingy, it works really well on my variable Inter
Yes I will try
Thank you my Vietnamese Brozer