Tag: fonts

Importing Google Web Fonts, LightSpeed Web Store & SSL

As I am sure you know, SSL is very sensitive. Every link href, script src and img src in the document must be HTTPS for the page to be delivered completely secure.

If not, the encryption is partial and you may receive warnings about it. Worse, your customers will see warnings about it and might leave your site before buying or registering. So it’s better to never to let this happen, if possible. Especially in a production site (live). Goes without saying, I guess.

Anyway my latest thing is using Google Web Fonts because although I worship, love and adore WP-Cufon and Cufon and usually use them whenever I can I can’t use Cufon site-wide. Well, I could but not in good conscience if I care about how long the page takes to load and all of that.

Most of my clients choose 1 Universally available font for their main Body font and a couple of Specialty fonts for titles,headings and menus, to dress things up a bit. But my latest client wanted a Specialty font for their main Body font and so I found 3 compatible fonts in Google Web Font’s library. I used the @import in my main stylesheet and thought everything was going rather well.
Until we had to start checking SSL and wouldn’t you know it it wasn’t kicking in all the way.
Something was not getting encrypted and I could not figure out what it was.

Like I do whenever this kind of thing happens I reverted the template back to a default Web store Template and SSL kicked in all the way. After I looked through my customized files I still couldn’t find anything off…

Then I checked my main stylesheet and at the top was:

@import url(http://fonts.googleapis.com/css?family=Rokkitt:400,700);
@import url(http://fonts.googleapis.com/css?family=Alice);
@import url(http://fonts.googleapis.com/css?family=Kameron:400,700);

AHA! I switched it to:

@import url(https://fonts.googleapis.com/css?family=Rokkitt:400,700);
@import url(https://fonts.googleapis.com/css?family=Alice);
@import url(https://fonts.googleapis.com/css?family=Kameron:400,700);

And SSL kicked in all the way. JOY.

So don’t be silly like me. If you import fonts like this make sure the url is https. Good thing Google has SSL up the wazoo so this is not a problem. Awesome.

Good News For All Us Font Freaks

I grouse frequently and often about how limited the selection of “core” fonts is with which to use in web design. Some say there are 16. Some say there are only 3. 16 or 3 it’s bound to come up with a client that the font you’ve used is “too clinical”,”schoolkid-like”,”typewriter-ish”,”dull”,”really bad”,”bad, awful, not at all what I want”…etc. You bow your head in shame. After all, if you were any kind of good web designer you could make the font pretty,couldn’t you?

Actually… I have a ka-ba-ja-zillion fonts downloaded to my computer so yes I can use any freaking font I want and I will see it in the design. You will not. You will see a default list of fail safe, dull, old universal core fonts. If everyone downloaded 10 fonts a day for the rest of their lives there would still be a big fat chance that the font you are using isn’t going to be in their computer. ‘Cause of all the fonts there are in the world.

Give us web designers a little bitty break,puleese. The reason we stoop so low as Arial is because it is the number one font everyone is bound to have. We might get all crazy and try to use Century Gothic because maybe 65% of the internets have it loaded but the rest sees Arial and thinks it sucks.

sIFR to the rescue. And if you use WordPress,Alejandro U. Alvarez to the rescue.

You should take a look at this picture,
otherwise you may have trouble understanding what the name field means or what selector means.

Also you should know that his plugin uses sIFR version 2 so you cannot use Ian Purton’s online conversion tool.

Alejandro included a command script you can run in Flash to automatically get your fonts and make swfs but I found it easier to download my own copy of sIFR package version 2.0.2. I opened sifr.fla in Flash, selected my font and then exported the movie in mac flash version 8. I closed sifr.fla without saving the changes.

I uploaded the font.swf to the right folder in the custom fonts plugin folder and I edited the custom_font.php file as instructed. His instructions are on the plugin page,so scroll down to find them.

I tried to do it his way with command> run command script he provided but when I used the produced swf I got this output on my page titles “text made by sifr version 3” or something similar. This just meant I was using incompatible versions of either mac flash or sIFR! Yeah, as simple as that.

I am not as nifty as Ian Purton but if you need a font you can email me the .ttf or .ot font you would like converted to a .swf and I will make you one in Flash. It takes about a minute to do. i may even already have it.

I should tell you that I am using Baar Sophia but what you are probably seeing is Trebuchet MS or Helvectica. And if you haven’t got those fonts you’re probably seeing Times New Roman.

Or *censored* Arial.

Typography or font-weight,which is the culprit here?

font firefoxfont ie7
These are 2 screenshots of paragraphs, the first image shows arial with font weight set to normal and about 14px in FF,the second in IE 7.

Just to make certain it wasn’t a flaw in the stylesheet I wrote I checked this issue on many other webpages of very well known CSS experts and noticed the same thing happening on their sites. FF shows a light, less dense looking pixel value, IE7 shows a better looking (in my opinion) typeface rendering.
It doesn’t matter if I specify font-weight,normal the difference persists.
So is it my choice of typography or a font-weight bug?
I messed about with a few different font-families and font weights but setting the body base font weight to bold looks too dark and chunky to me.No matter what I’ve tried so far I can’t find a way to make both pages look the same.
Then I found this link on Simplebits Do websites need to look exactly the same in every browser ?
Hmm.