How to get a custom font to work in CSS



  • Hello,

    I'm using a custom font in my CSS but it doesn't seem to be pulling it correctly. It shows up on my local computer, but not on different devices without the font installed. I want my buttons to have this font.

    Here is my CSS:

    @font-face {
    font-family: 'Simpsonfont';
    src: url('fonts/SimpsonfontDEMO.otf');
    font-weight: normal;
    font-style: normal;
    }
    
    .enterTopicField {
    padding-left: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: bold;
    }
    
    .topic_button {
    font-family: Simpsonfont;
    background-color: #FFD90F;
    border-radius: 5px;
    }
    
    #topic-text {
    width: 300px;
    }
    

    Here is how I'm creating the buttons in JS:

    function createTopicButtons() {
        // Create topic buttons and add to html page
        // Step 1) Iterate through the topics
        console.log("createTopicButtons..."); //Second command
        $(".topic-buttons").empty(); //Third...
        for (i = 0; i < topics.length; i++) {
    
            // Step 2) Create button element for each topic 
            var topicsDiv = $("<button>");
            topicsDiv.text(topics[i]);
    
            // Adds a class of movie to our button
            topicsDiv.addClass("topic_button p-2 m-1");
    
            // Added a data-attribute
            topicsDiv.attr("data-name", topics[i]);
    
            // Step 3) Attach button element to page/div
            $(".topic-buttons").append(topicsDiv);
        } $(document).on("click", ".topic_button", displayGiphy);
    }
    });
    

    The font is located in the following folder:
    giphy-api > assets > fonts > SimpsonfontDEMO.otf
    (The name of the font in the fonts folder is "Simpsonfont")



  • Hey again,

    Here is what I would do.

    1. Download the @font-face kit on https://www.cufonfonts.com/font/simpsonfont
    2. Then place the .woff file in the same directory as your css file
    3. Change your @font-face CSS styling to the following
    @font-face {
    font-family: 'Simpsonfont';
    font-style: normal;
    font-weight: normal;
    src: local('Simpsonfont'), url('Simpsonfont.woff') format('woff');
    }
    

    That should do it.

    The font-face kit that you downloaded also comes with an example. That might help you too.

    Hope this helps.

    Avan



  • Hey again,

    Here is what I would do.

    1. Download the @font-face kit on https://www.cufonfonts.com/font/simpsonfont
    2. Then place the .woff file in the same directory as your css file
    3. Change your @font-face CSS styling to the following
    @font-face {
    font-family: 'Simpsonfont';
    font-style: normal;
    font-weight: normal;
    src: local('Simpsonfont'), url('Simpsonfont.woff') format('woff');
    }
    

    That should do it.

    The font-face kit that you downloaded also comes with an example. That might help you too.

    Hope this helps.

    Avan



  • This worked! Thanks so much!



  • Glad it worked.


Log in to reply