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)
Related
We want to modify default font in HTML using #font-face
#font-face {
font-family: Times;
font-style: normal;
font-weight: 400;
src: local('serif');
}
in the above code we want to override Times font to serif, but above code is not working and Times font is getting used all the time instead of serif
Try this example, it works for me -- https://jsfiddle.net/gbk4rLw3/16/. However, it doesn't seem to work if you try to switch a font with a generic font type such as serif or sans-serif, but any other web-safe font seems to work.
Test code is here as well.
HTML
<div class="test">
TESTING
</div>
CSS
.test{
font-family: Times;
}
#font-face {
font-family: Times;
font-style: normal;
font-weight: 400;
src: local("Impact"); /* Try replacing with Arial, Comic Sans MS, etc....*/
} /*Doesn't seem to work with generic font types (serif, sans-serif)*/
If you want a serif font, try using "Courier New".
In our project we use Fira Sans Bold for thickening text segments. As a fallback we would like to use Lucida Sans Unicode with font-weight set to bold.
However, we run into a problem that we need to pre-set font-weight property for Lucida Sans Unicode.
What are possible ways to do this?
We tried #font-face.
#font-face {
font-family: 'Lucida Bold';
font-weight: bold;
src: local('Lucida Sans Unicode');
}
However, the problem is, while using Fira Sans Bold we rely only on the font-family and do not use any other other ways of thickening the font, such as font-weight:bold, strong, b, etc. This is insufficient for the #font-face (I raised the question over here: What can be the reason for #font-face failing to work?)
Would be grateful for any ideas.
I think a simple
.supposedly-bolded-text {
font-family: 'Fira Sans Bold', 'Lucida Bold';
font-weight: bold;
}
would do the trick for you.
Declaring font-weight/ font-style etc only affects which text 'matches' a #font-face rule.
As a font face is either bold or it isn't, declaring font-weight:bold won't force it to become bold. It'll just make it show up whenever your text is supposed to be bold.
Presumably the text that uses Fira Sans Bold is bold when font-weight of your text is normal. That means you'll want the bold face of Lucida to match whenever font-weight is normal, like this:
#font-face {
font-family: 'MyLucidaFont';
font-weight: normal;
src: local('Lucida Sans Unicode Bold');
}
"Whenever my text is font-weight:normal and uses font-family:"MyLucidaFont" then this font-face is applied"
Then:
font-family:"Fira Sans Bold","MyLucidaFont"
This is assuming that you can't change your Fira Sans Bold definition. If you can, then it'd be better to change that instead to make sure it applies whenever your texts text-weight is bold:
/* We don't need to declare Lucida at all if we change this one */
#font-face {
font-family: 'Fira Sans';
font-weight: bold; /* That's more like it! */
src: url('/FiraSansBold.woff');
}
Whenever your text has font-weight:bold and font-family:"Fira Sans","Lucida Sans Unicode" it'll be bolded with a fallback.
Keep in mind that "Lucida Sans Unicode" is a font family; a group of font faces.
I have several google fonts which I import into stylesheet with using #import rule. All of them render fine except of Roboto Condensed. It falls back to default sans-serif font, in my case Helvetica.
#import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400&subset=latin,latin-ext);
font-family: 'Roboto Condensed', sans-serif;
font-style: normal;
font-weight: 400;
I already tried removing local Roboto font, changing font-weight and font style, playing with font-family name but dev tools still show that the rendered font is Helvetica. Other Google fonts render just fine. What could be an issue?
Included #import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400&subset=latin,latin-ext); in my stylesheet and
html, body {
font-family: 'Roboto Condensed', sans-serif;
font-style: normal;
font-weight: 400;
}
worked just fine for me. Do you have any errors in your console?
I'm using webfonts on a site. For certain headings (h1, h2, etc.) I'm using bold variants (and setting font-weight to normal) because they look much better than using the regular variant and leaving the h-tags with the default bold weight. It's necessary to specify font-weight: normal because otherwise "the bold is bolded", which looks really terrible.
The problem I'm having is, how do I specify standard web fonts as fallback fonts and have the bold setting "restored"?
So for example I might do something like:
#font-face {
font-family: "My bold webfont";
src: url("url/of/webfont/bold/variant");
}
h1 {
font-family: "My bold webfont", Arial, sans-serif;
font-weight: normal;
}
As long as the webfont is present we have no problem, but if the webfont fails we end up with non-bold Arial.
Is there a way to specify "Arial Bold" in the font-family of the h1 (I know that doesn't work, but it's the desired goal)? Or perhaps in the #font-face definition I can say "this applies only to the bold version of whatever it's assigned to" – so I can omit the font-weight: normal from the h1 style?
Try specifying font-weight: bold in both places:
#font-face {
font-family: "My bold webfont";
src: url("url/of/webfont/bold/variant");
font-weight: bold;
}
h1 {
font-family: "My bold webfont", Arial, sans-serif;
font-weight: bold;
}
Here's a demo. p#one shows this technique in use; if you look at it in a browser that doesn't support WOFF webfonts, you'll see the default font in bold.
I have done this before, but still haven't mastered it. I downloaded a font kit from fontsquirrel.com and tried to get my custom font to work on my site. I have tried so many variations including the "bullet proof" methods found online that I have now confused myself. Could someone look at the code below and show me how to correctly get a custom font to work on a website using #font-face?
I have a style sheet named fonts.css located in a folder named css. This is being used to call the custom font. The font files are located in a folder from the root named fonts.
The css for the style sheet fonts is:
#font-face {
font-family: 'BebasNeueRegular';
src: url('../fonts/bebasneue-webfont.woff') format('woff'),
url('../fonts/bebasneue-webfont.ttf') format('truetype'),
url('../fonts/bebasneue-webfont.webfontABYyK1dn') format('svg');
font-weight: normal;
font-style: normal;
The other styles sheets for layout, etc call the font like this:
}
#merchandise h1 {
font-family: "Bebas Neue", Arial, Helvetica, sans-serif;
font-size: 33px;
font-weight: normal;
line-height: normal;
text-transform: uppercase;
letter-spacing: 1px;
}
Anything obvious? Of course, it works locally on my machine because I have the font installed.
In #merchandise h1, font-family: "Bebas Neue" needs to be font-family: "BebasNeueRegular"
or
In #font-face, font-family: 'BebasNeueRegular' needs to be font-family: 'Bebas Neue'