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
  • nodebb-plugin-custom-pages

    Solved Customisation
    5
    3 Votes
    5 Posts
    577 Views

    @DownPW it’s possible, yes, but you may inadvertently end up targeting other elements using the same class which of course isn’t desired.

    Can you provide a link in DM for me to review?

  • Composer options on nodebb

    Solved Configure
    8
    3 Votes
    8 Posts
    371 Views

    @Panda You should be able to expose the CSS for these using F12 to get into console

    3591518c-e3a3-4ada-a43c-6b32a5e0359c-image.png

    a2b8ed46-4157-4ff2-85f0-576543380107-image.png

    That should then expose the element once selected

    89d9c545-a47a-40d1-98f4-80cf3b958e8f-image.png

    Here’s the below CSS you need based on the screenshot provided.

    .composer .formatting-bar .formatting-group li[data-format="picture-o"], .composer .formatting-bar .formatting-group li[data-format="spoiler"] { display: none; }
  • Upgrade Problem from 2.8.3 to 2.8.4

    Solved Configure
    35
    8 Votes
    35 Posts
    2k Views

    @cagatay No, you can ignore that.

  • who is read NodeBB

    Customisation
    6
    0 Votes
    6 Posts
    606 Views

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

    https://discuss.flarum.org/d/23066-who-read

  • [NODEBB] Scroll Button

    Solved Customisation
    7
    0 Votes
    7 Posts
    829 Views

    @downpw ooops. Forgot that. Thanks for adding.

  • NodeBB Footer

    Solved Customisation
    10
    1 Votes
    10 Posts
    1k Views

    @phenomlab said in NodeBB Footer:

    @jac and you. Hope all is well and you recover quickly

    Thanks pal 😁🤝🏻

  • NodeBB Design help

    Solved Customisation
    8
    2 Votes
    8 Posts
    917 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.

  • Customising NodeBB

    Locked Customisation
    3
    0 Votes
    3 Posts
    733 Views

    Closing this thread as a duplicate of https://sudonix.com/topic/12/nodebb-customisation