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

CMS & WordPress
,
1

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 */
}
2

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.

3

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

4

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.

5

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.

6

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?

1 Like
7

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.

fonts
fonts456×603 89.5 KB

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;
}
8

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.

1 Like
9

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.

fuentes instaladas
fuentes instaladas839×638 120 KB

10

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?

11

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

12

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?

13

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.

14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.