How to get a custom font to work in CSS

Cairoshock

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")

avan

Hey again,

Here is what I would do.

Download the @font-face kit on https://www.cufonfonts.com/font/simpsonfont
Then place the .woff file in the same directory as your css file
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

avan