Firefox 40.0.3 (Windows) not working with font-family - html

I have the following CSS directive:
body {
font-family: system, -apple-system, ".SFNSDisplay-Regular", "Helvetica Neue", "Helvetica", "Calibri", sans-serif !important;
}
In Firefox 40.0.3 for Windows, the font displayed is an aliased (jagged) version of Arial:
In Firefox 40.0.3 for Mac OS X, the text is rendered correctly:
If I remove the Apple system font portion of the CSS, then the Windows version of Firefox works better and uses a typeface available to Windows that can be rendered correctly (either Calibri or whichever anti-aliasable sans serif that is available to Firefox):
body {
font-family: "Helvetica Neue", "Helvetica", "Calibri", sans-serif !important;
}
Instead of using a platform- or user-agent-specific CSS file, is there a way to modify the CSS so that Firefox under Windows ignores the portion of the font-family directive it doesn't like?


Fixed up with the following directive:
body {
font-family: ".SFNSDisplay-Regular", -apple-system, "Helvetica Neue", "Helvetica", "Calibri", sans-serif !important;
}

Related

CSS font-spacing issue with Calibri and the letters "ti"

I'm starting a website build for a small business that uses Calibri as the primary font for their branding and I have come across an issue with using this font in certain web browsers.
In Google Chrome and Opera, the letters "ti" appear to be joined. When I apply some letter-spacing, they will not separate. This doesn't happen in Mozilla Firefox or Microsoft Edge.
Is there an issue with the font, or is it the browser?
Is there anything I can do to fix it?
I've created a snippet for testing (or you can test at https://codepen.io/whitenoise83/pen/KyXWWL)
#site-title {
font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif !important;
color: #e00b00;
font-size: 6em;
font-weight: bold;
/*letter-spacing: 0.25em;*/
}
<span id="site-title">Audiomation</span>

You can use font-variant-ligatures: none; in your CSS to prevent the browser using special ligature characters for some combinations of characters/letters.
See also this article: http://www.cssportal.com/css-properties/font-variant-ligatures.php
#site-title {
font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif !important;
font-variant-ligatures: none;
color: #e00b00;
font-size: 6em;
font-weight: bold;
letter-spacing: 0.05em;
}
<span id="site-title">Audiomation</span>

Never seen that but after some search :
Maybe a font ligature option to choose ?
https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures
Hope its help ;)

How to set the font for an element to be Boostrap's default?

I have a page on my website where I want to use a google font for the whole page except for the navbar. I want the navbar to keep the default bootstrap font. I set the body font to be my chosen google font. I am not exactly sure how I can change the navbar to be default bootstrap font.
.nav-link{
font-family: $font-family-base;
}
I read on the bootstrap site that this is the variable that contains the font. I'm not sure if this is the proper usage of it.

The base font family refers to the following line:
"Helvetica Neue", Helvetica, Arial, sans-serif
Thus, simply do the following:
.nav-link{
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

Font Trebuchet MS won't work

So I got this the body css as followed:
body {
font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
}
There is no other css rule that overwrites this rule (checked with Firebug). For some reason my Trebuchet MS font doesn't work. In Firebug it just shows
font-family: Arial, Helvetica, sans-serif;
The font is active on my computer so that shouldn't be the problem. If I write Trebuchet MS infront of Arial in Firebug it does work.
Solution: Always make sure to clear your cache/turn cache off when developing websites..

Solution: Always make sure to clear your cache/turn cache off when developing websites..

using 'lighter' weight of a font

I'm trying to use the "Helvetica Light" font, which comes bundled with Helvetica. To do this I read that I had to specify "Helvetica Light" AND font-weight: lighter. I've gotten this to work only by doing this (in SASS):
p
font: "Helvetica Light", Arial, sans-serif
font-size: 12px
font-weight: lighter
and in other instances,
h2.light
font: Helvetica, Arial, sans-serif
font-size: 12px
font-weight: lighter
(or with font-family instead of font)
which is really weird and the only combos that works so far (combining all properties into 'font' doesn't work, and calling the font: as font-family: sometimes doesn't work.
In another rule, I wasn't able to get it to work unless I ONLY had font-weight: lighter with no font specified (but it inherited Helvetica).
Now I copied the exact same font styles as the p and put it in an h4 and it no longer works. Wtf? What am I doing wrong/why is this so buggy?
EDIT: THIS IS NOT A SYNTAX PROBLEM. To the answers below, note that I am using SASS. No semicolons and brackets needed. Also the file I am editing is 5k lines long (a hand me down) and grouped into somewhat organized sections. So I'd like to keep the sections intact until I can refactor it, but then I can't group all the p's and h2.lights together since they are in different sections.
Thanks!

Try this.
p
font: 'Helvetica Light', 'Helvetica', Arial, sans-serif
font-size: 12px
font-weight: 100
Just for reference, lighter works relative to the inherited value. It's better to use absolute values.
http://www.w3.org/TR/CSS2/fonts.html#font-boldness

what finally worked for me was to have font-family as Helvetica, and font-weight as lighter (but not the condensed format, which doesn't work).

Note: this answer was written before the OP specified SASS. It applies to CSS only.
A couple of things you should do to clean this up:
Semi-colons
All your CSS rules should end with a semi-colon, such as font-weight:lighter;
Grouping
As you have 2 identical CSS rules, the fastest and most concise way to do it is this:
p,
h2.light,
other_rules {
font: Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: lighter;
}
Then for the one rule where you want a different font,
p{ font: "Helvetica Light", Arial, sans-serif; }
Be sure to put your exceptions below the general rules (i.e. in the order I've shown you here) because CSS is implemented in order, and a rule further down the document will take priority.

Try this:
p, h2.light
font: "Helvetica Light", Arial, sans-serif
font-size: 12px
font-weight: lighter

inheritance, establish a base metric typography, so device doesn't crack-up style intersections
body[role="put something here"] h1, p, etc
font-size: 62.5%
Helvetica light, mix with unix-mac-windows-webfont (webfont needs js, may pull you up over edge
font-family
Helvetica Light, Helveticaneue Light, Calibri Light, Helveticaneue, Helvetica, Gill Sans, Myriad Pro, Arial, Lucida Grande, sans-serif
degrade per Meyer, or try just 2 hl, ss... also, check out your mixin
https://github.com/less/less.js/issues/389
Sass for Web Designers by Dan Cedarholm and Chris Coyier

How many font families are available for Google Font API?

I think the service is great but are these few the only fonts that are available:
http://code.google.com/webfonts
?
Or are there others and if so where can I see them?

Currently those are the only ones available. You can host your own opentype font, however, using the following CSS.
#font-face {
font-family: Kabel;
src: url("ItcKabel-Demi.otf") format("opentype");
}
h2{
font-family: Kabel, "Lucida Grande", Lucida, Verdana, sans-serif;
}