skip to Main Content

How do I make a custom font from scratch?

@font-face {
    font-family: JuneBug;
    src: url('https://raw.githubusercontent.com/grannygamer777/DerpFont/main/my%20derp%20handwriting.ttf');
}

h1 {
    font-family: JuneBug
}
<textarea
    class="paint-editor_text-area_27Ci4"
    spellcheck="false"
    style="font-family: Arial, Helvetica, sans-serif; font-size: 40px; line-height: 1.2; display: initial; transform-origin: 0px 36px; transform: matrix(0.5, 0, 0, 0.5, 48.35, 59.25); width: 256.645px; height: 48px;"
></textarea>

The styles aren’t applying to the <textarea>

2

Answers


  1. There are two things you must fix for your code to work:

    1. You applied the style only to h1, not to textarea. I suggest you add the `textarea selector like so:
    h1, textarea {
        font-family: JuneBug
    }
    
    1. In the textarea‘s style attribute, you already have set the font to Arial. Remove the font-family: Arial, Helvetica, sans-serif; part of the style attribute, else the custom font will not show.
    Login or Signup to reply.
  2. Hi just like any other css selector:
    In your css file or style tag :

    textarea {
        font-family: JuneBug;
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search