Fonts loaded but not displayed

sage
,
1

Hi there,
I am struggling to find out what could be potential reasons why custom web font is properly loaded and displayed after running yarn build but not after running yarn build:production, another custom web font works properly after running both. Both kinds of compilations are finishing successfully.

Sample of not working @font-face

/* Guardian Egyptian Web font family DOES NOT WORK */
@font-face {
  font-family: GuardianEgyp;
  src: url('../fonts/GuardianEgyp/GuardianEgyp-Light-Web.eot');
  src:
    url('../fonts/GuardianEgyp/GuardianEgyp-Light-Web.eot?#iefix') format('embedded-opentype'),
    url('../fonts/GuardianEgyp/GuardianEgyp-Light-Web.woff') format('woff'),
    url('../fonts/GuardianEgyp/GuardianEgyp-Light-Web.ttf') format('truetype'),
    url('../fonts/GuardianEgyp/GuardianEgyp-Light-Web.svg#Guardian Egyptian Web') format('svg');
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
  font-display: optional;
}

/* Garamond font family WORKS */
@font-face {
  font-family: GaramondStd;
  src: url('../fonts/Garamond/ITCGaramondStd-LtCondIta.eot');
  src:
    url('../fonts/Garamond/ITCGaramondStd-LtCondIta.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Garamond/ITCGaramondStd-LtCondIta.woff') format('woff'),
    url('../fonts/Garamond/ITCGaramondStd-LtCondIta.ttf') format('truetype'),
    url('../fonts/Garamond/ITCGaramondStd-LtCondIta.svg#ITCGaramondStd-LtCondIta') format('svg');
  font-weight: 300;
  font-style: italic;
  font-display: optional;
}

$font-garamond: GaramondStd, serif;
$font-guardian: GuardianEgyp, serif;

Sample of @font-face from main.css after yarn build:production

@font-face{font-display:optional;font-family:Guardian-Egyp;font-stretch:normal;font-style:normal;font-weight:300;src:url(/wp-content/themes/pp-wp-theme/dist/fonts/GuardianEgyp/GuardianEgyp-Light-Web_f62efdc3.eot);src:url(/wp-content/themes/pp-wp-theme/dist/fonts/GuardianEgyp/GuardianEgyp-Light-Web_f62efdc3.eot?#iefix) format("embedded-opentype"),url(/wp-content/themes/pp-wp-theme/dist/fonts/GuardianEgyp/GuardianEgyp-Light-Web_e9d04cd0.woff) format("woff"),url(/wp-content/themes/pp-wp-theme/dist/fonts/GuardianEgyp/GuardianEgyp-Light-Web_9369ffc9.ttf) format("truetype"),url(/wp-content/themes/pp-wp-theme/dist/fonts/GuardianEgyp/GuardianEgyp-Light-Web_8fa9ccb5.svg#Guardian Egyptian Web) format("svg")}

Any ideas? Thank you for any suggestions I am getting desperate and starting to think about going live with assets generated by yarn build

Many thanks!

2

The names youā€™re using for your fonts donā€™t seem to match. In you initial @font-face definition you specify:

font-family: GuardianEgyp;

But when defining your variable later, you do this:

$font-guardian: Guardian-Egyp, serif;

Those need to match. Otherwise your browser will be looking for Guardian-Egyp and it wonā€™t exist. Not sure why the other one appears to be working; perhaps you have it installed on your local machine, so your browser is loading it locally? It might be working looking at the inspector to see where you browser is actually loading your font files from.

3

Sry my bad those are identical in the code have edited them on copy and paste and forgot about the reference below. That is not and issueā€¦
Fonts are being loaded via css. There is no other way how could browser load the fonts if not from there or cacheā€¦
Another observation fonts are being loaded after yarn build but sometimes are not loaded on hard refresh and Mozilla developer version dev tools says: Style sheet could not be loaded but everything seems fine apart of the fontsā€¦

4

Did you find the solution to this?
This error is currently happening to me and I donā€™t know what happens, I would like to know the solution.

I have done the following and it has worked for me, but I donā€™t know if it is the correct way.

in my publicPath of config.json put the following

ā€œpublicPathā€: ā€œ/ wp-content / themes / gestionā€

where ā€˜gestionā€™ is the name of my theme.

and replaced ā€˜appā€™ with ā€˜wp-contentā€™ because upon inspection it showed me that on my source path and obviously they are not on that path.

If the solution is actually another, I would like to know it.

5

Have you checked the actual stylesheets from build:production?
What font-faces do they contain and what are their paths?
You can put the minified styles into a CSS beautifier in order to better inspect them.

6

Iā€™m hardly developing the theme, and when building the style sheet it shows me this route

src: url (/wp-content/themes/gestion/dist/fonts/Raleway-Black.ttf);

the font type is ttf.
Before changing my config.json, the path was different, it did not lead to my sources, with this change I have applied it shows me the correct fonts on my pages, this solution has worked for me, but I donā€™t know if it is the way correct to solve it.

1 Like