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.
- 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
-
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
-
This worked! Thanks so much!
-
Glad it worked.