1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

@font-face - How to add a custom font to my site?

Discussion in 'HTML & Website Design' started by mayazir, Dec 6, 2024.

  1. #1
    I want to use a custom font for the site title.
    The font I want is called Hobo Sdt.
    I downloaded the font and created a web font using the fontsquirrel.com service.
    I got files that I uploaded to the "fonts" folder and added them to the style.css:

    @font-face {
    font-family: 'hobo_stdregular';
    src: url('/fonts/hobostd-webfont.woff2') format('woff2'),
    url('/fonts/hobostd-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    }

    ..and then I added the font to the site-title element:

    .site-title {
    font-family: 'Hobo Std';
    }

    It doesn't work.
    What do I do wrong?

    The header.php, style.css, and the folder "fonts" are in the same directory.
     
    Last edited: Dec 6, 2024
    mayazir, Dec 6, 2024 IP
  2. kennedygitahi

    kennedygitahi Active Member

    Messages:
    46
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    63
    Articles:
    2
    #2
    The first thing I would do is clear cache or check out the website using a private tab/browser. Sometimes font caches mess things up.

    Also, the font-family name in
    @font-face {
    font-family: 'hobo_stdregular';
    //Other CSS
    }

    and

    .site-title {
    font-family: 'Hobo Std';
    }

    should be the same.
     
    kennedygitahi, Dec 6, 2024 IP
  3. mayazir

    mayazir Active Member

    Messages:
    274
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    60
    #3
    I don't have any cache.
    Besides, I tried it on a few sites of mine and it doesn't work.
    If I change the site title size or color, then I see changes, so there is not a cache issue.

    This also doesn't work:

    .site-title {
    font-family: font-family: 'hobo_stdregular';
    }
     
    mayazir, Dec 6, 2024 IP
  4. kennedygitahi

    kennedygitahi Active Member

    Messages:
    46
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    63
    Articles:
    2
    #4
    Try this

    @font-face {
    font-family: 'Hobo Std'
    //Other CSS
    }

    and

    .site-title {
    font-family: 'Hobo Std';
    }
     
    kennedygitahi, Dec 6, 2024 IP
  5. mayazir

    mayazir Active Member

    Messages:
    274
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    60
    #5
    nothing
     
    mayazir, Dec 6, 2024 IP
  6. kennedygitahi

    kennedygitahi Active Member

    Messages:
    46
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    63
    Articles:
    2
    #6
    OK, this?

    @font-face {
    font-family: 'Hobo Std';
    src: url('./fonts/hobostd-webfont.woff2') format('woff2'),
    url('./fonts/hobostd-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    }

    Note the dots in front of the URL links


    and

    .site-title {
    font-family: 'Hobo Std';
    }
     
    kennedygitahi, Dec 6, 2024 IP
  7. mayazir

    mayazir Active Member

    Messages:
    274
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    60
    #7
    nope
     
    mayazir, Dec 6, 2024 IP
  8. kennedygitahi

    kennedygitahi Active Member

    Messages:
    46
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    63
    Articles:
    2
    #8
    At this point, I need to see the code.

    DM me with a zip file of the pertinent files and I will take a look.
     
    kennedygitahi, Dec 6, 2024 IP
    mayazir likes this.
  9. mayazir

    mayazir Active Member

    Messages:
    274
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    60
    #9
    Thanks a lot!
    It works!

    So, the issue was in the dot before the path to the font.
    Also, was needed to assign the same font name to the site title which I stated in @font-face.

    For example:

    @font-face {
    font-family: 'Candy Pop';
    src: url('./fonts/candy-pop/candy_pop-demo-font-webfont.woff2') format('woff2'),
    url('./fonts/candy-pop/candy_pop-demo-font-webfont.woff') format('woff'),
    url('./fonts/candy-pop/candy_pop.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    }

    .site-title {
    font-family: 'Candy Pop', Arial, sans-serif;
    }

    Thanks a lot...
     
    mayazir, Dec 6, 2024 IP
  10. hamedtorabi

    hamedtorabi Peon

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #10
    خرید میلگرد از کارخانه های مختلف از طری سایت آهن پرایس
    https://ahanprice.com/Price/%D9%85%DB%8C%D9%84%DA%AF%D8%B1%D8%AF-%D8%A2%D8%AC%D8%AF%D8%A7%D8%B1
     
    hamedtorabi, Feb 16, 2025 at 11:21 PM IP