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!
Related
in my web project I need to mix latin and cyrillic characters. Unfortunately the cyrillic characters are not part of the webfont, thus the fallback steps in.
As I use a bold webfont the latin characters are bold but the fallback would only be bold, if I set the whole paragraph as font-weight:bold or alike.
I remember discussions that this should be prevented as some browsers can't display them correctly, but during my tests I wasn't able to produce a really broken layout when bolding the webfonts.
What do you think? How can I solve this problem?
Thank you
Markus
Yes, most webfonts provide specific weights like 400 for Regular and 700 for bold. If these aren't provided and you bold/strong them, you are in essence using the font outside of its original intent.
Font weight values can be used, but I'd always stick with the ones provided with the webfont you're using.
Also, if a weight you declare is not available, it will not show on the page but simply default the "logically closest" (this from the CSS Tricks article below) weight.
See a little more basic description here: https://css-tricks.com/almanac/properties/f/font-weight/
Yes it's still recommended you don't do this.
By using font-weight:bold you're forcing the browser to try and create the bold version of this font itself, which can often look distorted / fuzzy. This is referred to as faux styling.
You should set different #font-face definitions with different font-weight values which make use of multiple font files.
I've never become fluent with CSS but I don't think I had this situation before.
I'm thinking of using stylish to add CSS to a third-party site over which I have no direct control. So the HTML and CSS is not really set up for the kind of customizations I want to do.
The site I wish to tweak doesn't allow good control over fonts but some of its pages (user created) make a lot of use of some exotic Unicode ranges (eg. Khmer) that my OS/browser combination choose a terrible font for:
Can I make a CSS rule that will apply to all text in a page that falls within a certain Unicode range to set it to a known good font, without delving into the structure of the page HTML/DOM?
(Or is unicode-range only for doing something different with webfonts?
The answer is yes in most browsers
MDN - Unicode Range
The unicode-range CSS descriptor sets the specific range of characters
to be downloaded from a font defined by #font-face and made available
for use on the current page.
Example:
#font-face {
font-family: 'Ampersand';
src: local('Times New Roman');
unicode-range: U+26;
}
Support: CanIUse.com
Also see this Article
unicode-range(s) can be used to specify which specific set (or range) of characters you want to be downloaded from a font in an attempt to save bandwidth. See here: Mozilla unicode-range info
Without seeing the actual CSS you could attempt to just force a different font to be used completely by doing something such as declaring
body{font-family: arial,sans-serif;}
or adding !important (which I would avoid under any normal circumstance) if the other fonts refuse to give way e.g.
body{font-family: arial,sans-serif !important;}
If you can bypass using the original font faces then the unicode-ranges will cease to be important. Watch out for things like icon-fonts though as removing those may make certain symbols/graphics disappear.
Hope that helps.
Sorry I rather misunderstood your question - thought you wanted rid of the existing unicode fonts altogether.
I'm in the process of migrating a website from an existing CMS over to WordPress. They use font-face for their primary type on the site. I've copied over the font files and replicated the CSS file but it appears that the font on the dev site is not rendering the same that it did on the initial site (dev site has lighter weighted font).
Anyone have an idea why this may be?
Dev Site: http://gldev.staging.wpengine.com
Original Site: http://growingleaders.com
Your dev site has a lighter font appearance because it uses
-webkit-font-smoothing: antialiased;
which makes fonts appear lighter. This is done quite often for exactly this purpose, though doing so is somewhat problematic
The rule is applied on line 19 of your compiled CSS file, applied to all elements.
There are several differences on the Dev page compared to the original. If you look at the CSS file called screen.css it is a quite different file on the two sites, that is one of the reasons the fonts differ. Furthermore there are 13 CSS files linked to the original page and 15 to the Dev page. Also the scripts differ, so I wouldn't be surprised if there are even bigger discrepancies than the font rendering.
Copying a WP site can sometimes be more tricky than just copying files. I would suggest you use a good migrating tool. There are some out there.
I found the solution.
Apparently having text-rendering:optimizeLegibility; in your code causes webkit to render the font thinner than FireFox. Once that was removed from the HTML & body CSS, the font renders the same weight cross-broswer.
See images:
Firefox on Mac:
Firefox on Chrome:
On chrome you can see that the same font using the same styling takes more room. What can I do so that all browsers will render the font the same way rather than adding more width to it?
I am using a font with #font-face property.
Unfortunately, there isn't much you can do about the way each browser renders your chosen typeface. Check out this article, it explains how different browsers and operating systems render different type face files:
http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/
In the meantime, you can do two things.
1.) There are many fonts that can be used that are effected by this rendering difference much less. Experiment with different fonts that hold the same esthetic value of the font that you are using, and try to find one that not only fits your typographic needs but also have a less distinctive difference between their individual renderings across different platforms.
2.) Create a script to sense the user's browser/OS and use that script to adjust your font-weight accordingly.
Best of luck.
You forgot to mention which of the two cases is the correct font rendering.
A few ideas that come to mind:
Since you mentioned using font-weight:600 I would try to replace it with normal/bold (depending which result you want) and check if it makes any difference. If the font file does not support a weight for 600 the browser will go on interpreting it by itself - sometimes it takes bold sometimes normal.
If the problematic browser is Chrome you can also try playing with font-smoothing - sometimes it helps improving the font rendering:
-webkit-font-smoothing: none || antialiased || subpixel-antialiased
Also I'm not sure how you are implementing the #font-face - if you wrote it yourself I suggest generating your #font-face rule trough some service like Fontsquirell since it will generate a crossbrowser compatible code which often eliminates a few problems.
For more help you will need to expand your question with a bit more data - add the #font-face code, font name and specify which is the correct font rendering. Poor questions get poor answers.
For some reason, the spaces between words on a font that I am using disappeared. See:
http://www.fantasynews.com/
I'm using Twitter Bootstrap slightly modified to use Google Web fonts. The font in question is Oswald served up by Google web fonts:
http://www.google.com/webfonts/specimen/Oswald
And the spacing appears normal for me there.
I'm no CSS guru, but I have touched nothing in my code that should alter the way spaces are displayed. I don't know of anything that should target spaces in particular. I feel like this is some dumb mistake that I'm overlooking but I'm clueless. If I view the source, the spaces are clearly there as well as the spaces clearly being there when I inspect the element, in case some bit of javascript was playing a trick.
I am using the latest version of Chrome, although this also appears in Firefox.
I should say that the spacing problem appears specifically for the title in the boxes under latest player news
I forced it by adding word-spacing: 0.25em to my CSS, but I'm not yet 100% sure that fixed it in every browser. It's unfortunate that Google doesn't have an obvious way to link to a particular version of a font so you could be confident it won't change from under you.
Removing font-weight: normal; fixes the spacing (there are 2 instances being applied to it, Inspect Element and you will see them)
EDIT: This is a bad font, you should choose another one! It looks fine bold, but the normal version is awful.
Same problem here, i applied another font to the online website and pray for a solution :(
It may be a wrong encoded file on google's servers. Nobody's safe from minor issue like these, even the guy who encode typos in the webfont service.
I usually use Firefox(newest) for Ubuntu 12.10. Everything looks fine there. In Chrome however, your fonts are most definitely squished. I personally would choose a different font that renders more consistently. If you want to learn more check out Mozilla's MDC Kerning page to get started.
The main way that I use kerning is with the letter-spacing property.
h2 {
letter-spacing: -0.1em;
}
To say that this addresses "kerning" would be false. This actually affects "tracking". The only difference between the two is that kerning is the relationship between two character and tracking relates to a block of text.