As for CSS font-weight options I am trying the ubuntu font.
Link to href='http://fonts.googleapis.com/css?family=Ubuntu:500,300,700,400italic,400'
All body font-weights are 400 (normal) but title is h2 and font-weight=300
All content loads quickly but the title, it has a small delay I don't like.
I'm not sure how it works, I guess ubuntu-400 is in FF font list but it has to get ubuntu-300 from google server.
If this is true or not, is it correct and useful to download ttf sources and load them from my own server?
If it's a FF problem, there's nothing you can do about it before it's fixed. A good workaround solution is to use a JS preloader. This way your page appears nice and tight only when fully loaded. PreLoadMe is unobstrusive and does the job.
Related
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.
I wanted to know if loading huge webfonts can cause issues on the browser ?
I have to use a Korean font ( Malgun ) which is 4Mo. And the bold one which is 4 megs too.
I use them on an ipad exclusively for a phonegap project.
Is there a risk of taking a lot of memory ( I mean, 8Mo ) into the browser ?
Thanks for your answers
Yes, this will affect the browser in that you will have to download the font when you first visit the site. That is a pretty large font file, though. You should consider taking the font into FontLab and truncating it to only the glyphs you need. You may also want to look to see if there is a vector or web version of the font.
If these aren't an option, you could also try asynchronously loading the font. Here is a great post on CSS tricks about loading things asynchronously. You would simply substitute the JS file in this example with a stylesheet containing your #font-face declarations. Note: This method may cause a flash of unstyled text.
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 am desesperatly trying to get some google font faces to work with Raphael (SVG / VML rendering JavaScript library) on IE8.
At first i tried the google fonts code.
My second try has been to download and convert the fonts to host my own more complete css. Now the fonts show in the html part of the page (inside a modified bootstrap nav dropdown), but it does not work in the VML canvas (generated by Raphael).
Example here :
http://beta.yetiprint.com/fr/etiquettes-autocollantes/4-etiquettes-couleur-ronde.html
Is it possible to get that working in iE8? Any clue?
I can confirm that ScottS’s method works, but I could not fit these instructions in his answer’s comment field.
Instructions for getting custom fonts to work in Raphael by using Cufón:
Go to the Cufón website where you can convert a font to path shapes.
Upload your custom font, choose a font name, and click the Raphael icon at “Customization for 3rd-party scripts”.
Submit the form and download the Javascript file that pops up.
Include this Javascript below the Raphael Javascript include.
Register the font with Raphael like this, where fontname is the name of your font that you specified in step 2: var myfont = paper.getFont('fontname');
Use your font like this in Raphael: paper.print(100, 100, 'Hello World', myfont, 100);
Performance is not great compared to Paper.text, but it works in IE6 and up.
Have you tried the procedures in Raphael to registerFont()? See http://raphaeljs.com/reference.html#Raphael.registerFont. That gives the procedure for getting the font into Raphael.
Based off the link in that page, you should be able to get VML support and thus IE8 functionality. At least theoretically; I've never done it, I just found this information which seems to point in the direction you want to go.
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!