[NodeBB] Import custom Font

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

  • DownPWundefined DownPW has marked this topic as solved on
  • @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.

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

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

Did this solution help you?
Did you find the suggested solution useful? Why not buy me a coffee? It's a nice gesture, and a great way to show your appreciation💗

  • 2 Votes
    2 Posts

    @dave1904 that’s a really good point actually. I know it was there previously on Persona, but you’re right - no such function exists on harmony.

    However, putting something in place to mimick the behaviour of Persona won’t be hard from the js standpoint, although I wonder if perhaps we should ask the NodeBB developers is this feature was overlooked?

  • 6 Votes
    15 Posts

    No no, I said that in the sense that he told me it was simple ^^
    I was able to see that this was not the case by targeting the elements he had advised me.

  • 11 Votes
    14 Posts

    @dave1904 excellent news. Thanks for the feedback

  • 1 Votes
    2 Posts

    @Sala This should look better

    .sidenav .navbar-brand { padding-top: 0.5rem; padding-bottom: 0.5rem; }


    You can increase the top and bottom padding by increasing the values above.

  • 0 Votes
    6 Posts

    @cagatay You should ask in the NodeBB forums. Perhaps reference this post


  • 5 Votes
    9 Posts


    Very very great Mark 😉
    Thanks again, It’s perfect now !

    –> I share my code that I modified.

    I’ve added French and English comments.
    If you see things to change Mark, don’t hesitate.

    As usual, all the access paths (FA icons, logo) will have to be modified according to your architecture.

    You can also very well add/remove time slots and change welcome messages to suit your needs.

    Widgets ACP/HTML Widget Footer Logo <center> <br><br> <img id="thislogo" src="path/to/my/image"> </center> Widget Welcome Message <!-- IF loggedIn --> <div class="getUsername">, <a href="/me"><span class="username"></span></a></div> <!-- ENDIF loggedIn --> CSS

    – I added the size font-weight: 900; in the CSS because otherwise some FA icon wasn’t displayed correctly and reduce margin :

    i#thisicon { font-family: "Font Awesome 5 Free"; font-style: normal; margin-right: 8px; font-weight: 900; } .getUsername { padding-top: 20px; text-align: right; } /*Smartphone*/ /*On désactive le message de bienvenue"*/ /*We disable the welcome message"*/ @media all and (max-width: 1024px) { .getUsername { display: none; } } JAVASCRIPT // ------------------------------------------ // Welcome Message avec icône et Footer logo // Welcome Message with icon and Footer logo // ------------------------------------------ $(window).on('action:ajaxify.end', function (data) { //On récupère le username dans le DOM et on l'affiche //We retrieve the username from the DOM and display it function updateUsername() { $('.getUsername .username').text(app.user.username); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', updateUsername); } else { updateUsername(); } //On déclare les variables principales (themessage & thehours) ainsi que les variables secondaires correspondants aux plages horaires //We declare the main variables (themessage & thehours) as well as the secondary variables corresponding to the time slots var thehours = new Date().getHours(); var themessage; var wakeup = ('Good day'); var morning = ('Good morning'); var lunch = ('Bon appétit'); var afternoon = ('Good afternoon'); var drink = ('Cheers'); var evening = ('Good evening'); var night = ('Good night'); var welcome = ('Welcome'); var matched = false; //On peux ici tester le résultat du code en spécifiant une heure (!!!IMPORTANT: Commenter une fois le script testé!!!) //Here we can test the result of the code by specifying a time (!!!IMPORTANT: Comment once the script has been tested!!!) //thehours = 20 //On déclare les plages horaires avec les icones FA et les logos //We declare the time slots with FA icons and logos path if (thehours >= 0 && thehours < 6) { themessage = night; theicon = "fa-solid fa-moon"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 6 && thehours < 8) { themessage = wakeup; theicon = "fa-solid fa-mug-hot"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 8 && thehours < 12) { themessage = morning; theicon = "fa-solid fa-sun"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 12 && thehours < 13) { themessage = lunch; theicon = "fas fa-hamburger"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 13 && thehours < 16) { themessage = afternoon; theicon = "fa-solid fa-sun"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 16 && thehours < 18) { themessage = welcome; theicon = "fa-solid fa-rocket"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 18 && thehours < 19) { themessage = drink; theicon = "fa-solid fa-wine-glass"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 19 && thehours < 20) { themessage = lunch; theicon = "fas fa-pizza-slice"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 20 && thehours < 24) { themessage = evening; theicon = "fa-solid fa-tv"; thelogo = "/assets/customlogo/XXX.png"; } // Si la page active est un topic, on désactive/cache le message de bienvenue // If the active page is a topic, we deactivate/hide the welcome message if (window.location.href.indexOf("topic") > -1) { console.log("This is a topic, so hide the user welcome message"); $('#thisuser').hide(); } // Sinon, on affiche le message en fonction, l'icone FA et son emplacement (prepend) // Otherwise, we display the message in function, the FA icon and its location (prepend) else { $('.getUsername').prepend("<i id='thisicon' class='" + theicon + "'></i>" + themessage); $("#thislogo").attr("src", thelogo); //$('.getUsername').prepend("<img id='thisicon' src='" + thelogo + "'></>" + themessage); } });
  • 1 Votes
    6 Posts

    @Hari not sure from the consumer perspective, but Skype has been all but completely consumed by Microsoft Teams when it comes to business usage.

  • 0 Votes
    7 Posts

    @RiekMedia hi. Just following up on this thread (I know it’s old) but was curious to understand if it’s still an issue or not ?