Skip to content

[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 💗

Related Topics
  • Forum customisation

    Customisation
    11
    6 Votes
    11 Posts
    282 Views

    Thank you Mark, the changes look fantastic!!

  • Page control arrows for PWA

    Solved Customisation
    27
    25 Votes
    27 Posts
    2k Views

    @crazycells it is, yes - I think I’ll leave it as there is no specific PWA CSS classes I know of. Well, you could use something like the below, but this means multiple CSS files for different operating systems.

    /** * Determine the mobile operating system. * This function returns one of 'iOS', 'Android', 'Windows Phone', or 'unknown'. * * @returns {String} */ function getMobileOperatingSystem() { var userAgent = navigator.userAgent || navigator.vendor || window.opera; // Windows Phone must come first because its UA also contains "Android" if (/windows phone/i.test(userAgent)) { return "Windows Phone"; } if (/android/i.test(userAgent)) { return "Android"; } if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) { return "iOS"; } return "unknown"; // return “Android” - one should either handle the unknown or fallback to a specific platform, let’s say Android }

    Once you’re in that rabbit hole, it’s impossible to get out of it.

  • build nodebb Warning in entrypoint size limit

    Solved Performance
    2
    0 Votes
    2 Posts
    232 Views

    @eeeee they are nothing to worry about, and can be ignored.

  • [NodeBB] greeting message

    Solved Customisation
    2
    3 Votes
    2 Posts
    645 Views

    @pwsincd welcome to sudonix, and thanks for the comments. What your looking for is here

    https://sudonix.com/topic/195/nodebb-welcome-message/3?_=1648295651358

  • Social icon (Nodebb)

    Solved Customisation
    7
    0 Votes
    7 Posts
    1k Views

    @phenomlab said in Social icon (Nodebb):

    @jac I just tested my theory around using the OG image, and according to the Twitter card validator, it works fine

    73e805e1-997b-41bf-9259-51c5052ca8fc-image.png

    fixed 🙂

  • nodebb-plugin-customize error

    Solved Customisation
    25
    2 Votes
    25 Posts
    2k Views

    @phenomlab it work, thanks 🙂

  • NodeBB Design help

    Solved Customisation
    8
    2 Votes
    8 Posts
    972 Views

    @riekmedia I’ve applied some new CSS to your site. Can you reload the page and try again ?

    For the record, this is what I added

    #footer { background: #2d343e; border-top: 4px solid #2d343e; font-size: 0.9em; margin-top: 70px; padding: 80px 0 0; position: relative; clear: both; bottom: 0; left: 0; right: 0; z-index: 1000; margin-left: -15px; margin-right: -338px; }

    The /categories page seems a bit messed up, so looking at that currently

    EDIT - issued some override CSS in the CATEGORIES widget

    <!--- CSS fix for overspill on /categories page - DO NOT DELETE --> <style> #footer { margin-right: -45px; } </style>

    That should resolve the /categories issue.

  • NodeBB customisation

    Locked Customisation
    332
    27 Votes
    332 Posts
    78k Views

    @jac Given your departure away from your previous project, I’m going to close this thread… 🙂