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 nameHelvetica Neue(see attached screenshot) 