Custom font not working on firefox

  • Hi,

    I have searched for its solution, and I think I am doing everything like the suggestions, but it is still not working. Custom font works on chrome, ie; but not on firefox. I have used font face generator to generate fonts and the code. I have placed the @font-face code in <style>header</style>, custom.css file (in theme_root/css/) and also in style.css but it is not working.

    Placed this in header.php

    <style>

    @font-face {
    font-family: ‘Bebas Neue’;
    src: url(‘fonts/bebasneue.eot’);
    src: url(‘fonts/bebasneue.eot?#iefix’) format(’embedded-opentype’),
    url(‘fonts/bebasneue.svg#Bebas Neue’) format(‘svg’),
    url(‘fonts/bebasneue.woff’) format(‘woff’),
    url(‘fonts/bebasneue.ttf’) format(‘truetype’);
    font-weight: normal;
    font-style: normal;
    }
    </style>

    Placed this in style.css

    @font-face {
    font-family: ‘Bebas Neue’;
    src: url(‘fonts/bebasneue.eot’);
    src: url(‘fonts/bebasneue.eot?#iefix’) format(’embedded-opentype’),
    url(‘fonts/bebasneue.svg#Bebas Neue’) format(‘svg’),
    url(‘fonts/bebasneue.woff’) format(‘woff’),
    url(‘fonts/bebasneue.ttf’) format(‘truetype’);
    font-weight: normal;
    font-style: normal;
    }

    Placed this in custom.css

    @font-face {
    font-family: ‘Bebas Neue’;
    src: url(‘../fonts/bebasneue.eot’);
    src: url(‘../fonts/bebasneue.eot?#iefix’) format(’embedded-opentype’),
    url(‘../fonts/bebasneue.svg#Bebas Neue’) format(‘svg’),
    url(‘../fonts/bebasneue.woff’) format(‘woff’),
    url(‘../fonts/bebasneue.ttf’) format(‘truetype’);
    font-weight: normal;
    font-style: normal;
    }

    Working everywhere but firefox. I am confused
    https://tour.khujbo.com

    What should I do?

Viewing 5 replies - 1 through 5 (of 5 total)

  • All fonts are not supported by all browsers. In any case, browser font support if not a WP issue.

    Thread Starter irtiza104

    (@irtiza104)

    Hi, thank you for your reply. But I know that this font is supported by firefox, as i have used in on a HTML page and firefox shows it perfectly: https://khujbo.com/ (see the text “looking for places to stay or dine in?”)

    But this font is not working on wordpress. Here: https://tour.khujbo.com

    Remove the ones that are in the header.php file. Only keep one copy (either in style.css or custom.css – I suggest keep it in custom.css)

    Hi

    I’m using this font on my website because initially had the font “font-family: ‘BebasNeueRegular'”, but it has no special characters so I switched to the font “font-family: ‘BebasNeue.'” During the exchange of fonts, I enter the following code in style.css.

    BEFORE

    @font-face {
    font-family: 'BebasNeueRegular';
    src: url('css/fonts/BebasNeue-webfont.eot');
    src: url('css/fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('css/fonts/BebasNeue-webfont.woff') format('woff'),
         url('css/fonts/BebasNeue-webfont.ttf') format('truetype'),
         url('css/fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

    AFTER

    @font-face {
    font-family: 'BebasNeue';
    src: url('css/fonts/BebasNeue.eot');
    src: url('css/fonts/BebasNeue.eot?#iefix') format('embedded-opentype'),
         url('css/fonts/BebasNeue.woff') format('woff'),
         url('css/fonts/BebasNeue.ttf') format('truetype'),
         url('css/fonts/BebasNeue.svg#BebasNeue') format('svg');
    font-weight: normal;
    font-style: normal;
}

    Then, I changed the word ‘BebasNeueRegular’ for ‘BebasNeue’ all over the css.
    I put the files of the fonts in the font folder of the css folder.
    It’s working on google chrome, mozilla firefox and internet explorer.

    Hope this helps

    @nelson,

    Please, and as per forum rules, start your own topic.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Custom font not working on firefox’ is closed to new replies.