Issue adding custom font

[deleted]

Another "oddball" moment...

I'm trying to add a custom font on a test site using the below CSS

/* poppins-regular - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/poppins-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/poppins-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/poppins-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/fonts/poppins-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
}

But all I get is a 404 for each one. The files also exist in /public/assets/fonts so I'm not sure why Flarum can't see them

Any ideas ?

Thanks

[deleted]

What's really odd, is that this works fine

<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=Poppins&display=swap" rel="stylesheet">

pupsik

Get rid of a slash / in front of fonts.

[deleted]

pupsik not sure that will work. I'm positive that needs to be there as it's configured that way on another install I have.

clarkwinkelmann

I have not tried, but looking at your code:

url(/fonts/something.ttf) is an absolute path to the font file.

You say the fonts are in public/assets/fonts. So they must be accessible at /assets/fonts/something.ttf.

Either use a relative path (which is what pupsik achieves) or amend the absolute path to be /assets/fonts/something.ttf.

You can probably see in the browser console that the path used to retrieve the files is wrong.

[deleted]

pupsik Thanks. I really didn't think this would work, but it did 🙂

/* poppins-regular - latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/poppins-v15-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('fonts/poppins-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('fonts/poppins-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('fonts/poppins-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
  }

pupsik

Oh. Another problem I had was I couldn't not place it in assets folder. It didnt work for some reason. Try placing it in other folder. Or /fonts/ in home directory

pupsik

assets path needs to be there.

luceos

[deleted] that won't (or shouldn't) work when you hit your community with a subpath (eg /d/), prefix the URL's with /assets/fonts/poppins... if your fonts live in public/assets/fonts.

[deleted]

luceos That works perfectly 🙂

Thanks!

clarkwinkelmann

luceos that won't (or shouldn't) work when you hit your community with a subpath (eg /d/)

I believe a relative path in a CSS file is relative to the CSS file path, not the current page path. So since the CSS file is always loaded using the same URL, the relative path should also always points to the same URL.