I try to embed my unusuall font Anonymous Pro to my simple page. The thing is when I define new font-face and use the .ttf file the font looks completely different. When I look closed it seems like the font is now smoehow weirdly smoothed. See:
up - original, bottom - with font face
The reason I'm doing this is I want to be able to see the original version on devices where Anonymous Pro font is not installed.
I looked here and here but looks like be Forefox 96 doesn't know such directives.
My question is whats actually going on and how can I fix it?
Related
I converted an SVG font to OTF using FontForge. I know the original font has certain errors, but really don't think any of those errors would cause the following issue:
When using CSS
writing-mode:vertical-lr; text-orientation:upright, I get the following results. The Firefox rendering is perfect, but for some reason the results seem to kern certain letter combinations in Chrome (ver. 96). I've tried doing everything I can think of in FontForge as far as clearing kerning tables, toggling options for "old kerning" and "microsoft kerning", etc. Nothing seems to make any difference to the result.
I know that upright orientation is not well supported by browsers in general, but it's apparent that Arial font renders perfectly under Chrome, so I think there must be something I can do to fix this problem.
The font is generated in FontForge from an SVG font that uses vert-adv-y. The values for that parameter are correct in the SVG (the SVG has other errors, but I don't think they have any bearing here). I'm linking a copy of the exported OTF file. Perhaps someone may discover some sort of kerning or letter-advancing issue there.
Or perhaps Chrome is doing some sort of automatic kerning, in which case, why doesn't it happen to the Arial font? Maybe the Arial font has GPOS settings, whereas my font has old-style kerning? I really have no clue.
LINK TO DOWNLOAD OTF FILE.
Although the letters on the left of the image are lowercase, they are produced using the uppercase keys A, B, C, etc.
Okay, so this seems to have been one of those miraculous-seeming instances when a problem seemed to fix itself. I resaved the file, which then kicks it to a microservice running FontForge, which coverts the SVG to an OTF, and when it reloaded everything appeared good.
I still have no idea why, since I didn't update the microservice, and I haven't changed the SVG-generating code AFAIK. All I did was upgrade Chrome (and the new version had been showing the issue with the old file), but it should still be sending the same data. Still, I'm not complaining!
So this one has had my scratching my head for over an hour now. I am designing a Wordpress theme for a client of mine. I originally decided to customize the Toolbox theme, which I did for a week or so. I spent so much time rewriting their theme, I figured it would be better if I just wrote it from scratch. So I did that. I copied over all of the font files that I had and started to work on my header. Now for some reason the spacing is messed up. Originally it looks like:
Which I think is pretty readable. I have the font-size set at 70px on that image. So I copied the SAME exact css properties over to my new file on my new theme. Then I copied the same exact code within my header. When I saved and refreshed my browser, the font was there, but the spaces between the words were really small, and the font was much larger.
Here is was it looked like when I was done:
Looking at it, I think the words are way too close together. It worked fine before and I can't find what would have caused the change. They both have the bootstrap css file attached and the same custom CSS file. I tried adding the original toolbox CSS file to see if it was something in there that caused the change but nothing.
I would really appreciate the help. I've never had this problem before. I'm using Chrome, but the same thing happens in Safari as well. The font I'm using is Bebas Neue from font squirrel
Thank you! If I left any information out, just ask :)
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/
This is related to question 7910391, but I don't see it as a duplicate, since the other question is about CSS. I want to know why the browser is failing here.
Try this out:
Open IE9
Open IE9 dev tools (F12)
Select a text element
Change the font-family on it to "Goudy Old Style"
If you're like me, you'll find the text is suddenly in italics. Why?
I'm on Win7...don't know if this is specific to this OS, but I do have normal Goudy font on the system.
It is possible that IE is using it's own fonts library separate from that of Windows, and it doesn't contain the non-italicized version of the font.
You can try to make a font face (they will override system & browser fonts.)
Start here:
http://www.fontsquirrel.com
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!