[NodeBB] Import custom Font

[DownPW]

Hi @phenomlab

I have a custom Font and I would like to use it for my Title Website.
The font are not in Google Font.

I was test @fontface with fontSquirel but it doesn’t work
no problem with google fonts

Have you got a solution ?

Thanks for your precious help.

[phenomlab]

@downpw yes. Are you hosting the font yourself or from a remote source ?

[DownPW]

Myself on my server

[DownPW]

@downpw said in [NodeBB] Import custom Font:

Myself on my server

Test to create Woff files with https://transfonter.org

no chance

I search again

[phenomlab]

@downpw can you provide the path where the font files are stored ? Feel free to use PM if you’d prefer. As long as they are in the same relative path as the NodeBB assets, this should work but will need some custom css.

[DownPW]

@phenomlab

Check yourPM

[phenomlab]

@downpw Typically, it should work as per the below example

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/poppins-v15-latin-regular.eot');
  src: local(''),
       url('/assets/fonts/poppins-v15-latin-regular.woff2') format('woff2'), 
       url('/assets/fonts/poppins-v15-latin-regular.woff') format('woff'),
       url('/assets/fonts/poppins-v15-latin-regular.ttf') format('truetype'),
}
@font-face {
  font-family: 'Syncopate';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/syncopate-v12-latin-regular.eot');
  src: local(''),
       url('/assets/fonts/syncopate-v12-latin-regular.eot?#iefix') format('embedded-opentype'),
       url('/assets/fonts/syncopate-v12-latin-regular.woff2') format('woff2'),
       url('/assets/fonts/syncopate-v12-latin-regular.woff') format('woff'), 
       url('/assets/fonts/syncopate-v12-latin-regular.ttf') format('truetype'),
       url('/assets/fonts/syncopate-v12-latin-regular.svg#Syncopate') format('svg');
}

[phenomlab]

Looking further at this, if we decide to use

@font-face {
  font-family: 'Exodar';
  font-style: normal;
  font-weight: 400;
  src: url('https://domain.net/assets/customfonts/Exodar.eot');
  src: local(''),
       url('https://domain.net/assets/customfonts/Exodar.eot?#iefix') format('embedded-opentype'),
       url('https://domain.net/assets/customfonts/Exodar.woff2') format('woff2'),
       url('https://domain.net/assets/customfonts/Exodar.woff') format('woff'), 
       url('https://domain.net/assets/customfonts/Exodar.ttf') format('truetype'),
       url('https://domain.net/assets/customfonts/Exodar.svg#Exodar') format('svg');
}

Then this will fail because of the CORS policy at the remote end - see below from the console log

xx.xx.xxx.xxx/:1 Access to font at 'https://domain.net/assets/customfonts/Exodar.woff2' from origin 'http://xx.xx.xxx.xxx:32775' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
domain.net/assets/customfonts/Exodar.woff2:1 GET https://domain.net/assets/customfonts/Exodar.woff2 net::ERR_FAILED
xx.xx.xxx.xxx/:1 Access to font at 'https://domain.net/assets/customfonts/Exodar.woff' from origin 'http://xx.xx.xxx.xxx:32775' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
domain.net/assets/customfonts/Exodar.woff:1 GET https://domain.net/assets/customfonts/Exodar.woff net::ERR_FAILED
xx.xx.xxx.xxx/:1 Access to font at 'https://domain.net/assets/customfonts/Exodar.ttf' from origin 'http://xx.xx.xxx.xxx:32775' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
domain.net/assets/customfonts/Exodar.ttf:1 GET https://domain.net/assets/customfonts/Exodar.ttf net::ERR_FAILED

To work around this

1. Copy the font files to the local server (they need to be in the assets location for the server to be able to see them)
2. Modify the CSS block so that it looks like the below

@font-face {
  font-family: 'Exodar';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/customfonts/Exodar.eot');
  src: local(''),
       url('/assets/customfonts/Exodar.eot?#iefix') format('embedded-opentype'),
       url('/assets/customfonts/Exodar.woff2') format('woff2'),
       url('/assets/customfonts/Exodar.woff') format('woff'), 
       url('/assets/customfonts/Exodar.ttf') format('truetype'),
       url('/assets/customfonts/Exodar.svg#Exodar') format('svg');
}

Then, you should be able to target any CSS class with

font-family: "Exodar";

Just be aware of the capital “e” / “E” when referring to the fonts as Linux is case sensitive, whereas Windows is not.

[DownPW]

Great, that worked !

I understand better why it didn’t work.

The error in the log “No 'Access-Control-Allow-Origin” is may be due to my nginx config.

But specify directly in the assets without specifying the domain name suits me just fine.

It’s even simpler at the syntax level

[phenomlab]

@downpw plus the fact that it’s up to 5 less html requests your server needs to perform which means less resources are being used.

It’s always best to host fonts locally from the performance perspective.

[cagatay]

@phenomlab i m using like below;

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
body {
font-family: 'Poppins', sans-serif;

}

But how can i play font size 14px or 15px or 16px etc cant find.

[phenomlab]

@cagatay you’ll need to define this in the body tag (or another element if you want greater or more granular targets) - for example

body {
font-family: "Poppins";
font-size: 16px;
}

Essentially, you use the font-size CSS directive.