Replace generic CSS font family with custom font

Viewed 35

I want to replace the default font family helvetica in my Chrome-Browser derivate, as it's rendered in an unreadable fashion.

My replacement font-family of choice would be "Helvetica Neue, for which I have licensed copies.

So, inside Chrome, I use the Stylus plugin, and inject the following CSS into every website:

@font-face
{
  font-family: helvetica;
    font-style: normal;
    font-weight: normal;
  src: local("Helvetica Neue");
}

However, using the Chrome developer tools, I can see that the Rendered Font property defaults back to Arial, for an element with style

element.style {
    font-family: helvetica, arial, verdana, sans-serif;
}

Clearly, I am misunderstanding the local(...) argument. If, for example, I redefine

@font-face
{
  font-family: helvetica;
    font-style: normal;
    font-weight: normal;
  src: local("Impact");
}

then the changes apply (in a very ugly way). My question is thus:

What do I specify as the argument to local(...) in order to actually use my local fonts?

Additional information:

  • I'm on windows, my fonts are installed OS-wide to C:\Windows\Fonts.
  • If I drag one of the icons to a different place, I can see its filename is HelveticaNeue.ttf
  • The same file in the font view gets displayed as Helvetica Neue Standard
  • If I open the file in font preview, it displays the title Helvetica Neue (OpenType) and the font name Helvetica Neue (see attached screenshot)
  • font preview
0 Answers
Related