I'm confused about why the <h1> on this website has a font-family of Helvetica (at least when viewed in Chrome).
From Google Developer Tools, it looks like the font-family is being inherited from the Bootstrap CSS's body rule (see bootstrap.min.css).
Shouldn't the names.css file take priority? That sets a font-family of Lobster on the h1 tag explicitly.
It's not a selector priority problem: Chrome won't accept the inherit property for font-family as a fallback. Remove it and you'll get your font as expected.
The standart says that font-family accepts a list of fonts, or the inherit special value, but not a mix of the two. I'm fairly sure that if no font is found in the list, it'll fallback to inherit, though.
When I open that webpage, Chrome gives me a yellow exclamation triangle on that line, so it does not process that CSS font specification.
Did you declare a #font-face {}? It looks to me like the font is not installed correctly, because Chrome doesn't know what to do with it.
EDIT:
Removing the inherit solves the problem.
Related
I use Roboto from google fonts and for some reason chrome renders it the same for 400 and 500 and it's just bull. On mozilla everything is fine and dandy but really what's up with chrome? Also a a 400 italic is thiner than a 400 normal at a smaller size. What the actual deuce?
Css with included font:
#import url(https://fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700,700italic);
I'd also like to mention i use bootstrap 3.5 so i guess the reset is out of the question
It looks like the font is being imported correctly, so I have to assume its an issue with the font-weight property being overridden somewhere else, especially if you are using bootstrap.
Check the inspector styles and computed properties on your text element to make sure something else isn't overriding your font weight values. You will see a line through your font-weight value if it is being ignored.
As a quick test, use font-weight: 500 !important;, see if that fixes it. If so, you'll need to sort out the specificity of your CSS.
In the Chrome's developer pane, I can see these css settings of an element.
As far as I can see, every single font-family value is inherit.
How can I find what is the actual value of the font family? And how can I trace the definition of the root font-family value come from the inheritance hierarchy?
Developer Tools > Elements > Computed > Rendered Fonts
The picture you attached to your question shows the Style tab. If you change to the next tab, Computed, you can check the Rendered Fonts, that shows the actual font-family rendered.
The inherit value, when used, means that the value of the property is set to the value of the same property of the parent element. For the root element (in HTML documents, for the html element) there is no parent element; by definition, the value used is the initial value of the property. The initial value is defined for each property in CSS specifications.
The font-family property is special in the sense that the initial value is not fixed in the specification but defined to be browser-dependent. This means that the browser’s default font family is used. This value can be set by the user.
If there is a continuous chain of elements (in the sense of parent-child relationships) from the root element to the current element, all with font-family set to inherit or not set at all in any style sheet (which also causes inheritance), then the font is the browser default.
This is rather uninteresting, though. If you don’t set fonts at all, browsers defaults will be used. Your real problem might be different – you seem to be looking at the part of style sheets that constitute a browser style sheet. There are probably other, more interesting style sheets that affect the situation.
Your browser's default font-family will be inherited for that case.
You can check the browser default font in chrome:
Settings > Web content > Customize fonts...
I think op wants to know what the font that is used on a webpage is, and hoped that info might be findable in the 'inspect' pane.
Try adding the Whatfont Chrome extension.
I want to do some bold text on h1 on my wordpress-site. I have edited the CSS to use font-weight: bold but it seems to conflict with something else.
What happens is, on load it is bold but after load it jumps back to normal weighted text. Could anyone have a look at it:
http://www.norsktvthailand.net/windows/ ?
Stylesheet can be found at:
http://www.norsktvthailand.net/wp-content/themes/squirrel/style.css
Where am i going wrong? The text i want bold is the H1. I have also tried to use:
font-weight: bold !important;
to override other rules. But it seems to be a no-go..
Use inspect element (Google Chrome), firebug (Firefox), developer tools (IE) to see how the render is changing the styles
The page uses the Cufón replacement technique, so the choice of font weight must be made when generating the Cufón code. From the CSS perspective, the heading is not displayed as text at all but by some routines external to CSS.
My problem is that I am using a locally-hosted webfont (which we'll call Gothic) and the font-size I apply in the stylesheet has a dramatic effect on the backup fonts declared.
Example, using imaginary numbers for ease:
Gothic is sized at 48, px or em, takes up about a width of 300px. Backup font Arial, if it loads instead for whatever reason, at 48 px or em, loads at a width of about 1200 pixels.
I have never seen a typeface behave like this which makes me wonder if the strangeness is due to the construction of the file format, but I am unsure. Any help would be welcome.
First of all, take a look at browser's #font-face support and note that:
EOT format is supported by IE only
WOFF is supported by any browser but IE8
SVG is not supported by IE and Firefox
TTF/OTF is well supported by any browser but IE
Do you cover any browser?
Then you need to provide a fallback for browsers not supporting #font-face at all.
I suggest you to include Modernizer on your document's head section.
Select #font-face and Add CSS classes on Modernizer's download page, or follow this download link.
Modernizer adds classes to your page's <html> element, so you can use this classes to override settings for browsers not supporting a specific feature.
This rule will apply to the whole document:
.no-fontface {
font-size:16px; /* the font size value for Arial only */
}
It must be placed below any other font-size rule.
Alternatively, you can declare font-size:16px !important; and put the rule anywhere in your stylesheet. It will not be overwritten (except by other rules using important! of course).
If you want to target a specific element, you've to put .no-fontface at the beginning of the selector. For example:
.no-fontface #header h1 {
font-size:18px;
}
Ideally, you want to choose a group of fonts with similar proportions for your font stack. If there's no font that you can expect on any OS that's similar to your preferred font, then there's not really you can do at this point in time.
Font-sizes are not something you can rely on anyway, as users can and will modify this. What happens to your designs when they do?
if i use #font-face font and font-variant: small-caps for the same selector the font will fallback to the next system default font in safari. how do i get around that?
I had some trouble creating an example to replicate your issue at first, which made me realize that font-face is not a standard CSS2 attribute; the equivalent is font-family. So I did some quick research on #font-face, and found that it's -- depending on how you look at it -- either a non-standard attribute specific to Firefox 3.5 or a part of the not-yet-mainstream CSS3. Safari has partial support for CSS3, depending on version, but I suspect that this is the cause of your undesired behavior.
This was a WebKit bug. It’s been fixed, and Safari should be fine the next time it’s updated. The current version of Chrome is using a newer version of WebKit where the bug has been fixed. Here’s a good way to detect it (from SafariSmallCapsWebFontFix):
if ((navigator.userAgent.match(/WebKit\/([^.]+)/) || [] )[1] < 534) {
// Broken, work around it!
}
You could use that JavaScript to, say, add a class to the html node and change how you style the page.
Well i think its just a bug :( i now use :first-letter pseudo selector to achieve that