Search code examples
htmlcss

HTML Input Font Family Styling for Safari

I have some CSS for a text input in a table.

input.login-form__username {
  -webkit-appearance: none;
  font-family: "Poppins-Regular";
  width: 20vw;
}

For some reason the font-family does not work correctly in Safari on macOS. It still displays the input box in Apple's OS font. This does work correctly in Chrome and other browsers, but not Safari.

Am I missing something that would make it work?

Solution

  • You should see this link, some fonts doesn't work on safari like you said, to solve it you could add another equal font that works on safari, doing something like this:

    code {
   font-family: "Times New Roman", Georgia, serif;
}

    If multiple family names are used, the browser will select the first one it finds either embedded on the page using @font-face or installed on the user's operating system.