Web fonts merge(combining) - css

Question

I am using 'Poppins' font in different variations(Regular,light,bold) on my website
In css it will look like this:
/* Popins 300 */
#font-face {
font-family: 'Popins';
font-display: swap;
font-style: normal;
font-weight: 300;
src: local('Popins'), local('Popins');
url('/fonts/popins/popins-300.woff2') format('woff2'),
url(/fonts/popins/popins-300.woff') format('woff'),
url('/fonts/popins/popins-300.ttf') format('truetype');
}
/* Popins 500 */
#font-face {
font-family: 'Popins';
font-display: swap;
font-style: normal;
font-weight: 500;
src: local('Popins'), local('Popins');
url('/fonts/popins/popins-500.woff2') format('woff2'),
url(/fonts/popins/popins-500.woff') format('woff'),
url('/fonts/popins/popins-500.ttf') format('truetype');
}
/* Popins 700 */
#font-face {
font-family: 'Popins';
font-display: swap;
font-style: normal;
font-weight: 700;
src: local('Popins'), local('Popins');
url('/fonts/popins/popins-700.woff2') format('woff2'),
url(/fonts/popins/popins-700.woff') format('woff'),
url('/fonts/popins/popins-700.ttf') format('truetype');
}
The above code will fetch 3 different http requests(each font).
Is it possible to merge(combaine) these different font weights into one file?
For example :
popins.ttf -> all the variations of ttf font combined
popins.woff -> all the variations of woff font combined
popins.woff2 -> all the variations of woff2 font combined
I would like to make single http request and use the different font variations.
** Using base64 is not an option as it is not being cached **
Any help would be appreciated.
Thanks.