• 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.


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


  • Myself on my server


  • @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


  • @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.


  • @phenomlab

    Check yourPM 😉


  • @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');
    }
    

  • 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.


  • 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 🙂

  • Topic has been marked as solved  DownPW DownPW 

  • @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.


If this thread resolved an issue for you, or was useful, why not buy me a coffee? It's a nice gesture, and there's other ways to donate if you wish 💗

Discover More