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.
Related
For my Wordpress website, I have added the cufon plugin and uploaded my font. The code (shown below) is what I put in the cufon plugin box to have my uploaded font show. The font is quite faint and there is no "bold" version of the font. I would really appreciate help for the following that I just can't figure out:
Increasing the font weight of the font or making it bold.
Replacing my navbar menu font with this Gruppo font (I'm not sure the replacement code for changing it)
Cufon.set('fontFamily', 'Gruppo').replace('#content');
You would have to access the stylesheet of your theme and just find the block referring to the nav-bar styles and switch out the font right there. Make sure you know what you're looking for (e.g. class name or id name for the specific nav-bar). Something like this:
.nav-bar-style{
font-family: 'Gruppo';
}
You can get to your style.css right from the editor under Appearance tab or if you are in ftp you can just go into the file by navigating to it. Usually the path would look like
domain.com/wp-content/themes/THEMENAME/style.css (or .../THEMENAME/styles/style.css)
Regarding the boldness issue, only the font itself can provide a browser with a bold version of itself. If the font in question has no bold characters, then it seems to me that you have only the following 2 options:
1) choose another font, this time one with bold characters
2) use the CSS text-shadow property to provide the characters with enough text shadow to look a bit darker, e.g.,
nav-bar {
font-family: 'Gruppo';
text-shadow: 5px 5px 0 black;
}
I'm not sure that this second option will make a dramatic difference, and it might make some letters look weird, but it's easy enough to try.
Can anyone tell me why the font in the "NEWS" section of my homepage (the row of three images halfway down http://www.sehkelly.com starting with "Open and shut case") is heavier than the rest of the page?
The font is not bold; it is just heavier.
And seemingly only in Google Chrome.
if you remove the font-family rule that's applied to your body it fixes the problem from my testing.
maybe you could define those font's in a less global way?
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.
I was reading a book about javascript (Javascript & jQuery: The Missing Manual) and when I tried an example from the book I realized that Firefox does not display the strong tag.
All other browsers (Chrome, Safari) have no problem displaying it.
Searching the css file of the html page I saw that the author has done a css reset (including the strong tag) and then he declared strong like this :
strong {
font-family: 'ColaborateMediumRegular', Arial, sans-serif;
}
Maybe if he had added font-weight: bold; inside the new definition he could overcome this problem.
My question is whether there is a reset file that include all these little missing details and works with all major browsers.
Thank you.
CSS reset snippets are not meant to be used strictly and can be altered to your specific needs.
Just remove the strong selector from the reset definition and the behavior will work as you intended. Or, override the resets' definition with:
strong {
font-family: 'ColaborateMediumRegular', Arial, sans-serif;
font-weight: 700;
}
The description “Firefox does not display the strong tag” was probably meant to say that Firefox renders strong elements in normal font weight, not bold. This is exactly what “css reset” is supposed to do: to reset rendering so that browser defaults are not used, so that author-supplied CSS code can start from a clean board, so to say. The author may wish to render strong elements using a distinctive color or background or some other method(s). Bolding, if desired, would have to be specified explicitly.
Without seeing the specific “css reset” code and the HTML page used it is impossible to say why the reset did not work on some browsers.
It is possible that ColaborateMediumRegular is supposed to refer to an embedded (#font face) font, which looks distinctive enough. Font embedding is known to have browser dependencies.
Hey everyone, I'm working on a site and any special characters ("’" "…") turn into garbage at any font size over 19px. I'm using fonts I defined with #font-face, and the garbage disappears when I use a fallback font. This is Firefox 3.6.13.
I've tried defining the fonts in the page with a font: declaration rather than a font-family: declaration (see here) but it doesn't work.
I can use the standard straight quote and skip the special characters, but have you seen a straight quote in a heading at 40px? Ugh.
Anybody seen this bug, and any suggestions to fix it server-side?
Perhaps you will simply have to use another font?
After some more research, I (sort of) figured out what's going on. Firefox 3+ will automatically "optimizeLegibility" for any fonts over 20px (look up CSS "text-rendering" property).
For whatever reason, the fonts I am using don't render correctly when Firefox applies this value. If I specifically declare:
body { text-rendering: optimizeSpeed; }
Suddenly the problem disappears. Obviously this might bother someone who likes the effect of "optimizeLegibility" (it's definitely a nice effect), but if you can't change font-faces and you're getting garbage in your headings, I hope this helps.