We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

Ok, I Agree

Adding custom font to UI .html

Home › Forums › General Questions › Adding custom font to UI .html

Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • 2021-11-19 at 11:35 pm #47048
    mrmac
    Participant

    Hello

    I’m attempting to add a custom font to my UI without any success.
    I’ve added files index.html, styles.css, and fonts folder to my application folder

    I’ve tried:
    – @font-face in my CSS file.
    – Loading the font in my init puzzle.
    – Linking the my styles.css to [app-name].html (core files)

    Theres no 404 console logs so it seems to be loading the font files and I’ve triple checked the relative paths to the font files.

    2021-11-19 at 11:48 pm #47049
    mrmac
    Participant

    In the “Network” tab of chrome under the font filter there are no font files, so the fonts are not being loaded with any of the methods of tried.

    2021-11-19 at 11:59 pm #47050
    mrmac
    Participant

    CSS
    @font-face {
    font-family: “fakt-blond”;
    src: url(“fonts/FaktPro-Blond.ttf”) format(“ttf”);
    font-weight: normal;
    font-style: normal;
    }

    body {
    font-family: “fakt-blond”, sans-serif;
    }

    *Frustrated emoji

    2021-11-20 at 6:40 am #47051
    haris
    Customer

    Can you share the source file? i can help you :)

    harisimran1012@gmail.com

    2021-11-20 at 8:27 am #47052
    mrmac
    Participant

    Hi Haris

    I cant share the actual project so I’ve set up a dummy project thats set up the same way.

    Here is a zip of the project
    https://jmp.sh/GNt02M6

    Attachments:
    You must be logged in to view attached files.
    2021-11-20 at 9:21 am #47054
    mrmac
    Participant

    I figured it out…
    I changed the src paths to “../fonts/[font file name]”
    and added .ttf, .otf, .woff, .woff2 resources

    Looks like its using the .woff format type

    :wacko:

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.