Why is only the first font loading from my CSS stylesheet?

argosbcn · February 14, 2024, 3:35pm

I’m loading some fonts in the CSS of my WordPress blog https://www.fotov60.com/?LSCWP_CTRL=before_optm, but I can only get the first one to load; the others don’t seem to be recognized. Does anyone have any idea where the issue might be?

All the fonts are in the same folder, and the filenames are correct. The code I’ve used to load the fonts in the CSS sheet is as follows:

@font-face {
    font-family: 'Orkney';
    src: url('web fonts/subset-Orkney-Regular.eot');
    src: local('Orkney-Regular'),
        url('web fonts/subset-Orkney-Regular.eot?#iefix') format('embedded-opentype'),
        url('web fonts/subset-Orkney-Regular.woff2') format('woff2'),
        url('web fonts/subset-Orkney-Regular.ttf') format('truetype'),
        url('web fonts/subset-Orkney-Regular.svg#Orkney-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* raleway-regular - latin_latin-ext_vietnamese */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url('../web fonts/raleway-v29-latin_latin-ext_vietnamese-regular.eot'); /* IE9 Compat Modes */
  src: url('../web fonts/raleway-v29-latin_latin-ext_vietnamese-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../web fonts/raleway-v29-latin_latin-ext_vietnamese-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../web fonts/raleway-v29-latin_latin-ext_vietnamese-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../web fonts/raleway-v29-latin_latin-ext_vietnamese-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../web fonts/raleway-v29-latin_latin-ext_vietnamese-regular.svg#Raleway') format('svg'); /* Legacy iOS */
}
/* raleway-italic - latin_latin-ext_vietnamese */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Raleway-italic';
  font-style: italic;
  font-weight: 400;
  src: url('../web fonts/raleway-v29-latin_latin-ext_vietnamese-italic.eot'); /* IE9 Compat Modes */
  src: url('../web fonts/raleway-v29-latin_latin-ext_vietnamese-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../web fonts/raleway-v29-latin_latin-ext_vietnamese-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../web fonts/raleway-v29-latin_latin-ext_vietnamese-italic.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../web fonts/raleway-v29-latin_latin-ext_vietnamese-italic.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../web fonts/raleway-v29-latin_latin-ext_vietnamese-italic.svg#Raleway') format('svg'); /* Legacy iOS */
}
/* raleway-700 - latin_latin-ext_vietnamese */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Raleway-bold';
  font-style: normal;
  font-weight: 700;
  src: url('../web fonts/raleway-v29-latin_latin-ext_vietnamese-700.eot'); /* IE9 Compat Modes */
  src: url('../web fonts/raleway-v29-latin_latin-ext_vietnamese-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../web fonts/raleway-v29-latin_latin-ext_vietnamese-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../web fonts/raleway-v29-latin_latin-ext_vietnamese-700.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../web fonts/raleway-v29-latin_latin-ext_vietnamese-700.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../web fonts/raleway-v29-latin_latin-ext_vietnamese-700.svg#Raleway') format('svg'); /* Legacy iOS */
}

DaveMaxwell · February 14, 2024, 3:58pm

Because this…

and this…

Don’t point to the same location.

If you have your site running out of a directory call website, the directory structure needs to be

/website
   /web fonts

In option two, it needs to be

/web fonts 
/website

My guess is that you have them all in the folder inside the website directory, so remove the ../ from the urls.

Gandalf · February 14, 2024, 5:41pm

It’s not really a smart move to have a space in a directory name anyway, as that can cause problems.

argosbcn · February 15, 2024, 6:52pm

I tried deleting ../ in one font but nothing changes:

/* raleway-regular - latin_latin-ext_vietnamese */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url('web fonts/raleway-v29-latin_latin-ext_vietnamese-regular.eot'); /* IE9 Compat Modes */
  src: url('web fonts/raleway-v29-latin_latin-ext_vietnamese-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('web fonts/raleway-v29-latin_latin-ext_vietnamese-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('web fonts/raleway-v29-latin_latin-ext_vietnamese-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('web fonts/raleway-v29-latin_latin-ext_vietnamese-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('web fonts/raleway-v29-latin_latin-ext_vietnamese-regular.svg#Raleway') format('svg'); /* Legacy iOS */

The font files are all in the same folder, so the path should be the same. I used this page https://gwfh.mranftl.com/fonts/raleway?subsets=latin to download the Raleway font, and they provided me with the CSS sheet code, similar to the webfont kits from https://www.fontsquirrel.com/. However, while the Font Squirrel one worked for me, the other one did not. The path to the font folder is …/themes/theme/web fonts.

argosbcn · February 15, 2024, 6:58pm

The Orkney font works and is in the “web fonts” folder, so I don’t think the issue lies with the space in the directory name. Otherwise, that font wouldn’t work either.

tracknut · February 15, 2024, 7:17pm

I notice that only on the first/working font, you have:

Any chance you have that font on your machine, and the browser isn’t looking at your url’s because of that, whereas the rest of the fonts need the (not working) url?

argosbcn · February 15, 2024, 11:29pm

I have checked it by disabling the loading of Orkney in the CSS sheet, clearing the cache, and inspecting the website with the browser’s developer tools, and then the font was no longer available. I enabled it again, cleared the cache again, and upon entering the website and inspecting it with the browser’s developer tools, the font was available again.

These are the font files uploaded to the folder from which I load them, in case there could be any conflict with the names, because I can’t think of what else it could be.

I have tried changing the code, making it identical to the Orkney font by changing the font name, but it still doesn’t work:

@font-face {
    font-family: 'Raleway';
    src: url('web fonts/raleway-v29-latin_latin-ext_vietnamese-regular.eot');
    src: local('Raleway-Regular'),
        url('web fonts/raleway-v29-latin_latin-ext_vietnamese-regular.eot?#iefix') format('embedded-opentype'),
        url('web fonts/raleway-v29-latin_latin-ext_vietnamese-regular.woff2') format('woff2'),
        url('web fonts/raleway-v29-latin_latin-ext_vietnamese-regular.ttf') format('truetype'),
        url('web fonts/raleway-v29-latin_latin-ext_vietnamese-regular.svg#Orkney-Regular') format('svg');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

DaveMaxwell · February 16, 2024, 1:47pm

I think you might have missed tracknut’s point. Is the Orkney-regular font installed on the machine you’re browsing to your website on? If it is, that may explain why it’s working but the others aren’t.

The src: local('Orkney-Regular'), will cause the browser to look at your locally installed fonts, and if it’s found, uses that instead of using one of the web fonts from the web server.

argosbcn · February 17, 2024, 9:51pm

If it were installed, it would appear on this screen of the Windows Control Panel, where all the fonts installed on the machine are supposed to be, right? I’ve marked all the fonts that start with “O” to more easily identify the absence of the Orkney font.

argosbcn · March 17, 2024, 8:36pm

Can someone check which font is being loaded when they visit my blog? Is it Orkney? How can I verify if the CSS stylesheet is correctly loading all the fonts I’ve declared with @font-face?

Archibald · March 17, 2024, 8:59pm

As Raleway is only a fallback font if Orkney is not available, I expect it is not loaded unless required.

argosbcn · March 17, 2024, 9:44pm

So you see the text correctly with the Orkney font? I’m worried that the font isn’t loading and the browser is loading another alternative.

Through the browser’s developer tools, shouldn’t it be possible to change the font to Raleway if it’s correctly declared?

Archibald · March 17, 2024, 10:20pm

I am sure I am seeing Orkney. Also in developer tools (I’m using Firefox) > Network > Fonts and click reload button, I see Orkney having been downloaded.

If I use developer tools to delete Orkey from the CSS font-family, then I see a Raleway having been downloaded. The appearance of the font changes.

If I then use developer tools to also delete Raleway from CSS font-family, the appearance of the font changes again: to sans-serif presumably.