A project that I'm working on is making use of icon fonts. Is there some way of seeing what icons are included in the file? I can see what the icons are labeled in the generated css file (i.e. .icon-mail-alt:before { content: '\e808'; } ), but I would like to see the what the "images: look like. Is this possible?
If you are using a mac you can open it in fontbook and see all of the characters/symbols available.
On PC you can use charmap.exe, though it hasn't changed significantly in decades and is no longer really great. A quick search turned up BabelMap as an alternative which looks much more usable.
Related
bit.ly/ZwCln9
I have like 3-4 Google Web Fonts going on here and it looks mint in IE/FF, but the fonts are choppy and gross in Chrome. I read you can download svg files or something onto the server? I'm using Wordpress and need step-by-step help with this because I suck.
Where do I get the files and where do I upload them to via ftp? Whats the code I use in CSS?
Thanks for all of your help :)
You don't need to use SVG if you don't want to. The fonts will never look the same across all browsers because each uses a different engine. However, you can always reset to make it look as close as possible. Here is a quick reset that you can add at the top of your css file that will solve this issue.
h1,h2,h3,h4,h5,h6 {
font-size: 100%;
font-weight: normal
}
Or you could just get a full CSS Reset, like the YUI reset, or Normalize.
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.
I've been wondering myself why on windows my font looks smaller, and much crappier than on OSX.
Screenshot Mac VS Windows : http://screencast.com/t/UUxqLRhM
Is that because i used "em" on some rules instead of "px" ?
Thanks.
(This is from a comment, but I'll post as an answer.)
This is nothing on your end, and the culprit is different font rendering engines. Mac OS X tries to render fonts exactly as they were designed, whereas Windows tries to alter them slightly to make them more readable. The problem is, with certain fonts and sizes, it actually makes them look worse. (This article is a good read on the subject.)
If you make the font bigger, it will probably make it look better on Windows. I would venture to say that if you removed the bold font-weight, it would also look cleaner. You could also try a different font.
Overall though, all you can do is just play with different settings and see what looks good and what doesn't; the actual rendering is out of your control.
Different browsers do have different standard font-sizes. Maybo other font-types and the different way to show fonts of the OS.
100% same look is... not possible
The way MAC and PC handle fonts is different, but that is not what is happening here. You have set a font that is not web-safe, "MyHelveticaBold", and the font windows is using is clearly not the same as the one on your Mac. If you don't want to use a web-safe font then you should use open source web fonts that you can serve to the user upon visiting.
There are some CSS properties that can adjust how a font is rendered such as -webkit-font-smoothing. Read more here: http://blog.typekit.com/2011/01/26/css-properties-that-affect-type-rendering/
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 used #font-face on my new site, it works fine in localhost in both FF and Chrome. However, when I upload it to my server, I can't see the fonts in FF or Chrome. What could be some possible causes?
My website is http://leojiang.me
While debugging your site you may want to have an easier to read css script to help find some of the problems. Compression should only be done when everything works the way you intend it to.
for now you can copy/paste it on this site to see it more clearly:
http://www.digitalcoding.com/tools/css-beautifier.html
I was a bit suspicious of the #media print and the later one for #page. I am not sure if those are set up properly. I would suggest concentrating on the website first by commenting out the print specifics to help you troubleshoot the web rendering problem. You may want to set up a test html page with all the various elements you wish to use and make sure they are working properly before incorporating the 3d shapes. Just make an html file and remove those classes so you can see how everything renders as a basic web page.
As Ettiene said, there are several spots where the code is setting the font for different elements to Lucida Grande and Courier. These locations are where you should be referencing your desired font name, ColThin. How you name them is important as well, check the file that was downloaded from font squirrel (if you got the font there). The html demo file that is included has some css which shows how to use the #font-face fonts:
p.style1 {font: 18px/27px 'ColaborateThinRegular', Arial, sans-serif;}
You are missing the quotation marks, so the css may not be registering the new font name. As well, setting it on html and having those other font names in the code afterwards replaces the html setting. The only name that is important is how you designate the #font-face name. You could designate it 'smashed-font' and if you reference it as 'smashed-font' it will reference the files you have designated as 'smashed-font'. 'ColThin' should be fine.
From what I can see, you have copied the font files into their correct place, but how you want to use them is not quite right.
Good use of Paul Hayes 3d experiment, BTW. http://www.paulrhayes.com/2009-07/animated-css3-cube-interface-using-3d-transforms/
Bear in mind it may not work properly on several kinds of browsers, so have a fallback of some kind for people who are not fortunate enough to have webkit browsers, or include the alternatives such as -moz and -o and a version of the css which does not include -webkit, just in case these transformations make it into the css3 specifications.
If this is intimidating, consider it a learning experience. Polishing these mistakes through your own work will make your services that much more valuable to your potential clients.
Your font familly name may be wrong..
try this one
font-family: 'ColaborateThinRegular';
http://www.fontsquirrel.com/fontfacedemo/Colaborate
Look at the source code of the page.
Shad found the problem: "you have a rule body, button, input, select, textarea that is further down setting the font to sans serif".
Thanks!