To show characters "ă" and "â" in my website from Poppins font, I need to load 2 different font files. How can I load only one single file? - css

Question

In order to show the character ă în my website, I need to load from google fonts the next font: https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecmNE.woff2
To show the character â in my website, I need to load from google fonts the next font: https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecg.woff2
Here you can see what I'm talking about:
For ă:
<style>
#font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecmNE.woff2) format('woff2');
}
h1{
font-family:Poppins;
font-size:46px
}
</style>
<h1>ă â</h1>
https://jsfiddle.net/y75on1fb/
For ă:
<style>
#font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');
}
h1{
font-family:Poppins;
font-size:46px
}
</style>
<h1>ă â</h1>
https://jsfiddle.net/z3vn9cx1/
Not sure why is this happening, but what should I do to load only one font file ?

Answer 1

Not sure where you got the gstatic URLs, but those appear to be locators for cached, character-subsetted variants of the Poppins Reglar font (or, maybe actually the Poppins Bold font). If you go to the Google Fonts page for Poppins and select Regular, they'll provide you with the specific lines of HTML or CSS they recommend you use to use the font in your site. For one way of doing this, use this in your HTML and CSS:
<style>
#import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
</style>
h1{
font-family:Poppins;
font-size:46px
}
If you want to use a subsetted font to optimize load times, you can use the Google Font API to indicate text that needs to be supported and then include both those characters (URL-encoded) in the text:
<style>
#import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap&text=%c4%83%c3%a2');
</style>
See https://developers.google.com/fonts/docs/getting_started or
https://developers.google.com/fonts/docs/css2 for more info on the API.