can't load font in macOS MAMP local dev environment

[protro]

Using latest PW with Rockfrontend … I have in my custom.less

@font-face {
    font-family: 'Eurostile Extended';
    src:local('Eurostile Extended'),
        url('/site/templates/styles/fonts/eurostile-extended-regular.ttf') format('truetype');
    font-style: normal;
    font-weight: 300;
}

But the inspector shows

GET http://localhost:8888/mysite/site/templates/site/templates/styles/fonts/eurostile-extended-regular.ttf 404 (Not Found)

The path is correct and the files exist at the location. What am I missing ? I suspect the localhost:8888/mysite path is causing an issue.

Thank you

Edited July 16, 2024 by protro

[protro]

Looks like I solved the problem by changing the declaration. At least this path works on local now. Haven't test on production.

@font-face {
    font-family: 'Eurostile Extended';
    src:local('Eurostile Extended'),
        url('../styles/fonts/eurostile-extended-regular.ttf') format('truetype');
    font-style: normal;
    font-weight: 300;
}

[da²]

1 hour ago, protro said:

The path is correct

Really? ?

Quote

http://localhost:8888/mysite/site/templates/site/templates/styles/fonts/eurostile-extended-regular.ttf

Maybe check the root directory you set in Apache config. It looks like it's targeted on mysite/site/templates/ instead of mysite/.

Personally I use relative paths in CSS (url('../font/NotoSansDisplay-Regular.ttf')), but that doesn't matter, if I enter url('/site/templates/font/NotoSansDisplay-Regular.ttf') it works fine too since Apache root directory is set on parent directory of /site/.

Edited July 16, 2024 by da²

[Stefanowitsch]

1 hour ago, protro said:

Using latest PW with Rockfrontend … I have in my custom.less

@font-face {
    font-family: 'Eurostile Extended';
    src:local('Eurostile Extended'),
        url('/site/templates/styles/fonts/eurostile-extended-regular.ttf') format('truetype');
    font-style: normal;
    font-weight: 300;
}

But the inspector shows

GET http://localhost:8888/mysite/site/templates/site/templates/styles/fonts/eurostile-extended-regular.ttf 404 (Not Found)

The path is correct and the files exist at the location. What am I missing ? I suspect the localhost:8888/mysite path is causing an issue.

Thank you

The path seems to be correct. I am using the same path in my font declarations:

@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Barlow Regular';
  font-style: normal;
  font-weight: 400;
  src: url('/site/templates/fonts/barlow-condensed-v12-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

I would try out this advice from @da²

1 hour ago, da² said:

Maybe check the root directory you set in Apache config. It looks like it's targeted on mysite/site/templates/ instead of mysite/.

 

[protro]

1 hour ago, da² said:

Maybe check the root directory you set in Apache config. It looks like it's targeted on mysite/site/templates/ instead of mysite/.

Thanks @Stefanowitsch @da²

I haven't done this before but yeah that looks like the issue.
Is this okay to change to the root (i.e. mysite/) without any unwanted downstream effects when deploying to production (with Duplicator module for instance) ?