Quick CSS font query - css

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?

Related

CSS numeric font style - One line height

I have a question regarding one of google web fonts.
Font which i mean is 'Alegreya Sans'
By default numbers are not aligned in same way... Somehow designer send me zeplin file where he is using same font with equal line heights.
You can see here what i mean (its my default html style):
This is how it looks on design:
And this is what i achived with css right now using:
font-variant: diagonal-fractions;
But problem in this solution is - numbers are to small right now... I cant change font size, because its mixed sometimes with letters.
Once in another project I fixed it somehow with css, but i cant remember how I did it. There was some css property which fix this issue.
Okay, so i have answer for my question.
Google web fonts has limited font features when we using it from google cdn - i guess to make it lighter...
So i decided to download this font as desktop font, and then from .ttf files i generated webfont using transfonter.
I simply used
font-variant-numeric: lining-nums;
And font looks perfect now!

increasing font weight of my cufon font

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.

Bold text jumps back to normal

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.

Google fonts different size and jagged

I have one very surprising issue with Google Fonts. This is the site in question.
The title is normaly showing in one ligne but a friend of mine with the same Opera version like me sent me this screenshot. You can see that the title goes in two lines and brakes every think.
It's the first time I use Gfonts and must admit that there is another problem in Firefox too - the font appears so jagged!
Thanks for your advises!
The line break can be prevented simply by adding
h1 { white-space: nowrap; }
Font rendering depends on the font, on the font size, on the browser, on the operating system, on the device, their settings, and probably phase of the moon, too. Some fonts are more difficult than others, so the practical move is to pick up another font.
Unfortunately, not all browsers render all fonts exactly the same way. I guess your problem with the title in Opera is caused by the font being rendered bigger. You can try to target a specific stylesheet for Opera to solve that.
As for the jagged font, well... you have to deal with that, and choose fonts that will look sharp on every browser.
Take a look here : http://css-tricks.com/font-rendering-differences-firefox-vs-ie-vs-safari/
The jagged issue was solved thanks to this Joomla! extention - KC Cufón Font Replacement. A have included just the characters of my text - only 3KB of js and I left the same Google Web Font loading too in order the text to be shown until the extention loads.

Odd font size issue on only my website

I'm currently developing a site for my University's library, and a very strange issue came up. The font on the website, whether the live version or the one on my machine (not the server) is always smaller than it should be. This is only the case on two computers--my own, and my supervisor. It happens in all browsers. I'm pretty sure it's happening on both of ours because we've handled code, but I can't think of any CSS rules that would be affecting it. To make it worse, it's affecting two different CSSs--the old site (which I have not touched) and the new site which is intended to be rolled out tomorrow. I've tried fixing the way the computer displays fonts, the way browsers display fonts, changed the resolution, and tried zooming in. None of those methods worked. Also, other computers with the same resolution and monitors look at it just fine. No other websites that I visit have this issue. I'm stumped. Any ideas?
The site is here: http://library.uis.edu
Comparisons of the text can be seen here: http://imgur.com/a/Tb7Mv
I think this might be a font issue, rather then a font size issue. Myriad pro is not considered a websave font. As your machine and probabaly the one of your supervisor have probabaly Adobe installed, wich comes with Myriad, you are seeing the site in Myriad, while the other machines are seeing the site in Verdana. (not entirely sure though)
It looks like you are calling Myriad Pro as the first font. I have that font installed on my system, but you're calling the font size to be 75%, which on a font like Myriad Pro, will shrink it down considerably. If I clear the font-size, and font-family to just Verdana, it renders okay, but some of your elements such as the tabbed nav, would need to be addressed.
I'd stay away from fonts like that unless you are using #font-face and a web generated font pack. By choosing Myriad Pro as your font, you will only render that font on computers that also have the font. Consider using something like Google Web Fonts: http://www.google.com/webfonts/
Having fonts at the body level is fine, and cross fonts (headings versus paragraph) should be handled at a global level for those elements (not the body). Assume the body will take the bulk of the text in the body. You can define a standard font size such as 1.0em; at the body level if you wanted, and then define em sizes for other elements such as h1, h2 tags, and p tags if you don't want to use 1.0em from the body.

Resources