It may sound obvious:
I'm used to design mockups of my webpages with illustrator.When I translate everything to css and test the page into my browser I can see that fonts are bigger in the illustrator mockup even if I used the same font setting on the css side.
//in css i have
body{font:Georgia,"Times New Roman",Times,serif;font-size:16px;
font-weight:normal;}
//I wrapped the example text inside "h1" tags
h1{font-size:24px;font-weight:normal;}
//in illustrator I have font georgia,24px,font-style "regular" selected
How could I fix that?
thanks
Luca
They seem to be different fonts altogether - look at the lowercase e and g. Check which font IE is using with the inspector. You can activate the inspector by pressing F12.
EDIT: The font IE8 is using looks like Times New Roman, IE's default font. Try replacing the font:Georgia part with font-family:Georgia. The font property is meant to be used as a shorthand to set all font properties at once and will probably not work when used to set only the typeface.
I would imagine that this is because different browsers handle fonts differently to Illustrator. You can control the font size / spacing and that kind of thing using CSS, as you've noticed - have you got any other font settings you're using in Illustrator like kerning or that sort of thing? That could be affecting it.
Related
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!
As fonts are better than images to show icons in different devices, I want to make my custom font icon library like "Font Awesome", in my AngularJS project.
Are there any way to do that?
I created a font in .ttf and .svg with my icons, and the result is fine, but any icon have a related letter. For example, the home icon is the letter "H" in the new font.
This method have a little issue in Firefox. In Firefox, before the icon is changed to home icon, you can see the letter "H".
What is the best practice to do that?
Is posible to solve the little issue in Firefox?
Thanks.
Preload the font. FF is using a fallback typeface until the requested face is available.
Why doesn't it happen with FontAwesome?
<i class="fa fa-something"></i>
generates text and only one face is specified for the generated text even when it's contained in an element with a style that does specify a fallback list.
I suggest you look at the CSS that accompanies FA.
You should try using a tool like Font Custom to generate your custom icon webfonts starting from your svg icons. FontCustom will generate the css and the font files and there are a lot of options that you can configure.
So, I know that this isn't something that is normally a good idea for a website, but I have a special purpose/intent for such a use:
I have a multilingual dictionary that I'm working with online, where I need one of the languages to be in a specific font, from a file that I specify locally. However, I want this language to be rendered ONLY in this font, as if it is rendered using any other font, it will render incorrectly. That's all fine and dandy, and I can load the file in CSS and whatnot.
But I want to make it so that if it can't load that file, either for one reason or another, or something goes wrong, it can't go to another font. Basically, render this text using this font, and if you can't do that, don't just try and render it with Arial or whatever is the default -- show me blocks, show me a stark something.
I've spent a bit looking around, but am not sure what in CSS I would be using for this. Suggestions/help? Thanks :)
As an update to this question, since April 2013 there exists the Adobe Blank Font, which can be used for that purpose.
You may build a cross-browser css with FontQuirrel WebfontGenerator and the Adobe Blank font files.
If you just need the font in OpenType format you can use this single css file with the already embedded font
You can't do this. Text is text and text has to have a font that it is to be rendered in. If you really want, there's probably some weird JavaScript function that can detect the actual font being used for the text and if it doesn't match the one you want, then you can hide it or something. But in the end, your only option is to have the text displayed in some obscure font, or completely hide the text. If the text is visible, it has to be rendered using some font.
You could also theoretically create your own font where all the characters are just blank, but that seems highly illogical and such a waste of resources to make people download a font just so it can display meaningless emptiness.
There is no "don't render fonts" option. It's a font, it needs to be rendered, or else it's hidden visually in the DOM.
You could use Javascript to find out the font being applied to a certain block, and if it's not the font you want, just hide it. Or display a message.
Another solution is somehow specify the content to be empty. For example, I'm trying to override the +/- character that a Webix tree displays using Font Awesome:
#lhn-tree-container .webix_tree_open:before {
content: '';
}
This only works with the :before and :after pseudo-elements though.
I'm stuck with a problem. I'm trying to embed fonts with #font-face but they always looks bolder. I have tried everything: other fonts, change font-weight to "ligher" or "100" etc...
The font looks always as it is bolded. I'm pretty sure it could look good because I've seen it used in many other websites with #font-face and it looks thin and fine.
See the attached image link text (I know it would never look as in PS, but so different?)
thanks
Set the following in your stylesheet on whatever elements you are using font face on and it fixes the issue:
-webkit-font-smoothing: antialiased; /* This needs to be set or some font faced fonts look bold on Mac. */
You are probably using the wrong weight file. Fonts will often be sold in different weights. You should verify that the file you're embedding with #font-face is the right weight.
The way the font looks on photoshop is obviously a graphical version of the font, specially, when photoshop has 5 types of blurring for fonts: none, sharp, crisp, strong and smooth. Those beside the original fonts, which they commonly are in one TTF and have the versions inside or, varios fonts for the different weights and faces.
Maybe if you enlighten us about the font type, the weight, blurring and whatever is useful for reproducing purposes would be useful to help you...
Fonts vary according to OS (Linux, Mac,PC) and even by browser, never mind the Photoshop blurring variants that Billeeb mentioned. For example Safari on windows applies some heavy anti-aliasing to make text smooth, which makes it look blaringly different on Firefox, even on the same machine.
In my opinion, the best way to have a consistent font experience is to use some sort of font replacement technology like Cufon. But this only works for not standard fonts with simple effects, you wouldn't want to use this if you need crazy amounts of drop shadow or blurring. For that its best to stick with images
This could even happen if you are using <h1> tag. h tags makes the font looks bolder.
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.