On my website I am trying to load a google font. It is called 'Comfortaa' ( see link below ). The font shows up perfectly for English, but when translating the page it does not load the Latin-Extended characters like 'éëèáäà' etc.
Image : Image showing the missing characters problem
Google font link : https://fonts.google.com/specimen/Comfortaa?query=com&selection.family=Comfortaa
On the previous Google Fonts you could add a '&subset=latin,latin-ext', but this doesn't work for the CSS2 google font? I read that the browser will automatically get all the subsets its required for showing the text on the page, but this is apparently not happening on my website. Any ideas what can cause this issue or how to fix it?
Code in header
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&display=swap" rel="stylesheet">
Code in CSS
body {
font-family: 'Comfortaa';
}
Font faces created by the Google Fonts link showing that the latin extended are created, but still are not shown on the page itself.
/* cyrillic-ext */
@font-face {
font-family: 'Comfortaa';
font-style: normal;
font-weight: 300;
src: url(https://fonts.gstatic.com/s/comfortaa/v30/1Pt_g8LJRfWJmhDAuUsSQamb1W0lwk4S4TbMDr4fIA9c.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Comfortaa';
font-style: normal;
font-weight: 300;
src: url(https://fonts.gstatic.com/s/comfortaa/v30/1Pt_g8LJRfWJmhDAuUsSQamb1W0lwk4S4TbMDrcfIA9c.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
font-family: 'Comfortaa';
font-style: normal;
font-weight: 300;
src: url(https://fonts.gstatic.com/s/comfortaa/v30/1Pt_g8LJRfWJmhDAuUsSQamb1W0lwk4S4TbMDrAfIA9c.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Comfortaa';
font-style: normal;
font-weight: 300;
src: url(https://fonts.gstatic.com/s/comfortaa/v30/1Pt_g8LJRfWJmhDAuUsSQamb1W0lwk4S4TbMDrwfIA9c.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Comfortaa';
font-style: normal;
font-weight: 300;
src: url(https://fonts.gstatic.com/s/comfortaa/v30/1Pt_g8LJRfWJmhDAuUsSQamb1W0lwk4S4TbMDr0fIA9c.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Comfortaa';
font-style: normal;
font-weight: 300;
src: url(https://fonts.gstatic.com/s/comfortaa/v30/1Pt_g8LJRfWJmhDAuUsSQamb1W0lwk4S4TbMDrMfIA.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}