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!
I'm using opencart in farsi language and I decided to change the font of my website. First I tried to change the font style in "body" element in css. But unfortunately it didn't work. Everything was done carefully, I used "font-face", uploaded fonts and everything. But it didn't work and I did this in main css file.
* {
font-family: something;
}
After I did so, all of the pictures in the website have lost quality, and none of the icons are shown...
how can I fix it...?
Regards
Icons are not shown because you are overriding the font family.
Have a look at Glyphicons or Font-Awesome
http://fontawesome.io/
http://glyphicons.com/
They use a font to print the icons.
For the image quality I have no clue, try to restrict the range of your font override. Maybe it's a bug on the browser that gets angry if you set a font-familty to an img tag (I'm guessing)
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 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.
I wanna create special font containing only icons. and for each letter will be diffirent icon.
I want to embed this font in css.
and use like this
if i need some icon:
<a class="icon">f</a>
and css
<link href='http://fonts.mysite.com/css?family=MyFontWithIcons' rel='stylesheet' type='text/css'>
which contains:
#media screen {
#font-face {
font-family: 'MyFontWithIcons';
font-style: normal;
font-weight: normal;
src: local('MyFontWithIcons'), url('http://fonts.mysite.com/font?MyFontWithIcons') format('truetype');
}
}
and to show icons with icon class:
.icon {font-family: 'MyFontWithIcons'; }
And letter "f" will be replaced with icon inside font which located on the place of f letter.
and css works with font and replacing f with icon inside font.
I think it's good idea or not? font file is less in size than lots of image icons.
and also with this technique I can use diffirent font colors = diffirent icon colors? sizes and so on.
So, it's good idea or not?
The problem with using a custom font for icons is that you've got no backup plan if:
Your user's browser is too old to support #font-face
The user agent isn't your traditional browser (eg. Screen readers for the blind, search engines, HTML-to-text converters, etc.)
The user copy-pastes the text containing the "icon" into something that discards rich formatting information or doesn't have the font in question.
The user agent will never support #font-face (Eg. Textual web browsers like Lynx, Links2, and ELinks for Unix/Linux)
The user is behind a corporate proxy that discards or mangles headers that your browser demands before displaying custom fonts. (more common than you think)
The user is running NoScript with the default font-blocking behaviour enabled to protect against 0-day exploits in the font engine.
Images provide the alt attribute for just this reason.
However, if you're going to use a font for icons, make sure you store your glyphs in a Unicode Private Use Area. That'll mitigate the problem a bit by ensuring there's probably no conflict (Companies can and do sometimes use PUA glyphs to store custom data) and, if they're coded smartly, screen readers could know to gracefully ignore PUA glyphs.
As for implementing a fallback, I'd suggest using Modernizr (specifically, Modernizr.fontface) to test for support.
It's a good idea but it doesn't work in all browsers (yet). Also, it only works with 2 color images (black and transparent), which makes it rather limited. For people with text browsers or text to speech software, it won't make any sense. It's not really 'semantic', because the <img>-tag was meant for images. Using fonts for that won't make any sense from a html-only perspective. It also clutters your css.
So that's a lot of bad things just for a little bit less bandwith; I wouldn't bother.
#font-face is not supported uniformly across browsers. Its a bit of a task to cater to all browsers esp. if including IE6
Accessibility: screen readers won't read icons, they would still see an 'f' and not an icon
You would need some fallback to degrade gracefully
All the other answers focus on the downsides.
I am, personally, a big fan of using icon fonts.
Here are some good reasons to use an icon font:
You can seamlessly use icons inline with text. If you include an icon inside of a block of text, it will inherit the font size and color of its parent, and will be aligned with the accompanying text's baseline.
you can change the color of icon dynamically using css, without having to create and upload additional image files and use js to manipulated the markup. this means that a) you are keeping style determinations where they belong, i.e. in your stylesheets and b) you can simply and easily make your icon colors contextual (e.g. all icons inside headers are white, or else they are black) and themable (e.g. all icons are white if body has class dark-theme, and all icons are pink if body has class tropical-theme)
the icon can easily be scaled without using additional bandwidth (as it would if you were increasing the size of the image file), without having to create and upload additional image files. corollary: you don't have to worry about different screen resolutions and don't need to make any allowances for retina, etc.
your font file will likely have a smaller file size than your image files would so, again, save on bandwidth.
if you use a font generator such as fontello, your collection of icons will automatically be catalogued for you and your designers to scrutinize, in a demo file. in addition, fontello has an API so your font generation can be managed automatically as part of your build process.