Navigation

    ask avan logo
    • Register
    • Login
    • Search
    • Categories
    • Unsolved
    • Solved

    How to get a custom font to work in CSS

    HTML CSS
    2
    4
    107
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • C
      Cairoshock last edited by 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")

      Reply Quote 1
        1 Reply Last reply

      • avan
        avan last edited by

        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

        Reply Quote 0
          1 Reply Last reply

        • avan
          avan last edited by

          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

          Reply Quote 0
            1 Reply Last reply

          • C
            Cairoshock last edited by

            This worked! Thanks so much!

            Reply Quote 0
              1 Reply Last reply

            • avan
              avan last edited by

              Glad it worked.

              Reply Quote 0
                1 Reply Last reply

              • First post
                Last post