Embeding fonts – It CAN BE DONE! (I think)

Posted on

Lately, I’ve been head down shoulders-deep in work.  What’s new, right?

This project is…  – well, I can’t talk much about it (yet), but what I can say is that I’m very excited to see its launch and the potential progress throughout the future as it gets bigger and more people get excited and start using it.

 

One of the challenges faced, you might guess by my title, the use of a custom font.  Now, this isn’t a “new” thing across the web, quite a number of places do this – that being said, its not as common knowledge as one might think.  There are plenty of places out there which talk about how to do it, what can and cannot be done, etc. but I find that there are gross contradictions from one article and/or blog to the next.

I’m always up for a new challenge, but it seems that each time I find myself hunting after something which initially seems simple, it becomes quite complicated.

 

After much searching, I was able to locate a great resource that cleared a great deal of the fog.

Back in 2009, Scott Kimler posted on his family/personal blog  xBrowser Fonts

 

My goodness did his post help me a lot.  Between his post and a few others which elaborated on a few points that his touched on, I set forth to tackle this and wipe it out!

Here’s some of what I learned:

 

  1. Don’t use Microsoft’s eot font generator – the file it creates is quite large and can only be used where you set its allowance to – as in if you didn’t think about every last place its going to be used, it won’t work… for IE browsers, that is.  The other browsers don’t support EOT fonts
    • Instead, use EOT Fast – it’s easy to use.  just download it, unzip it, and then grab whatever font you want and drop it, literally, on top of the install file.  Vwalla, instant font creation.
    • btw: I feel that kudos should go out to microsoft for having an option for so long while other browsers only just  recently caught up to the wave of font embedding desires.
  2. TTF rules all – just about the rest of the browsers, except for IE, accept true type fonts
  3. Include the others: SVG for mobile, WOFF, for older mozilla browsers, and OTF – for just in case
  4. Syntax is EVERYTHING – if even just the tiniest misstep is made, it won’t freakin’ work.  It might for one browser, but it won’t for the rest.  This includes using the proper case for the format types.  The mac and firefox (on Windows 7) are quite particular about the proper casing of OpenType and TrueType.
    • @font-face {
      font-family: “My Super Font”;
      src: url (‘fonts/superfont.eot’);
      src: local(‘Super Font’), url (‘fonts/superfont.otf’) format(‘OpenType’);
      src: local(‘Super Font’), url (‘fonts/superfont.svg’) format(‘SVG’);
      src: local(‘Super Font’), url (‘fonts/superfont.ttf’) format(‘TrueType’);
      src: local(‘Super Font’), url (‘fonts/superfont.woff’) format(‘WOFF’);
      font-weight: normal;
      }
      .thisnewclass {
      font-family: ‘My Super Font’,Arial,Verdana,Sans-Serif;
      }
  5. It CAN work cross platform, including on a mac! (more on this in this blog)
  6. Without bringing in any jquery, you can have control over BOLD and ITALIC in your css
    • Notice how the example in #4 has the font-weight: normal?  What you can do is create essentially the same @font face (a second time), stick with the same font-family name, and have the call to the exact file location change to the specific font file   (often, its the same font name with a b added to the end of it’s name for bold and i for italic) then set the font-weight to:bold or :italic. �

       

      This will give you control in your css to call 1 font family, but to designate the font weight being bold, italic, or normal.  If you are desiring numeric weights, you’ll have to specify that in the @font-face rather than using the words “normal” “bold” or “italic”

All of that after quite a lot of hunting.  There are some great tools out there to assist in creating the different file types.  I’ll let you do some google or bing searching to discover them if you really want – just do a search for “embed font creator” or “embedded font generator” and you’ll find several options to choose from.

Currently, I’m faced with a perplexing issue.  As much as I can get all of these things to work across browser on a static piece, I’m running into troubles getting this to work when using a css tree system while deploying to Azure.  It could be the font, as it is a commercial font, or it could be azure, but I’ve gone through much trial and error  to get cross-platform viewability to work.  I’d assume that its not a font issue:  I was able to use the same font files, create a static file, and get those to work and view perfectly on a mac, but once deploying to azure…. no dice.  They instead revert to a font that’s stuck in perpetual BOLD mode.

I’ll continue hunting for a solution to this issue.  If I find that solution, I will update this blog post with the details.

Ok, Done, Cancel, Next… buttons

Posted on

In a post which I wrote previously, I talked about the power of the “done” button (among others).

I’ve recently been working on a lot of IA and am finding myself coming back to the essential contents on this post.  Along with this is the discussion between alignment of said buttons and orientation.

 

So many interfaces (including mobile devices) differ in the placement.  Even the organizational order of which comes first first next, if it’s left, center, or right aligned – all of which seem to differ.  I remember the other day being confused at the store when the touch-device upgrade changed where the buttons were… I ended up accidentally canceling a transaction because they moved the cancel button to where the enter previously was!  Do they really think everyone reads the buttons every single time?

A blog that I’ve read on a few occasion points to a very strong opinion on this based on user tracking Why ‘OK’ buttons … best on the right .

I feel that it comes down to contextual consistency.  There are some cases where anything which is a “moving forward” action item is on the left, at which point, that platform has made a consistent effort to instill the expectation for the user to locate anything which requires action to be placed in its own space on the left, as though the person was reading and moving to the next line.

Then there is the windows phone 7 platform.  This one goes all over the map, but always within the means of contextual navigation.  Related actions which bring you to new screens are centered and to the bottom.  Specific navigation within the context of the content delivered on the screen (such as going to contacts and then touching someone’s name to get to their profile) is directly delivered in-line, while sections of globally related content are a slide/pan left or right (think of a top-menu navigation on the web.  This would be a series of globally related content items – they relate to the website and support its purpose… hopefully).

Then there are installations of applications – this one is where I get my pantyhose in a bunch where the windows platform is concerned.  Every application seems to take a different direction.  Some have the buttons side by side, aligned to the right, but with the “next” button first and the “cancel” second.  Some have those buttons flipped, some have the next button all the way on the left where the cancel is all the way on the right…

There are so many variations!  Personally, it makes sense to me that if I’m going to the next screen, that I’ll look for the next button to be directionally placed – to the far right.  Where the cancel button is can differ, but this is where wayfinding comes in.  We as human beings use a whole lot of wayfinding metaphors.  They make the best sense considering where we’ve come from on an evolution sort of way.

What do you think?  Should there be a standard regardless of platform?  Is it contextual?  How would you make that decision if you were the one with the power to instill that decision – or do you even think about it?

 

Firefox's tab "groups"

Posted on

I finally did it – I allowed Firefox to update to 6.0

I don’t believe I’ve put it off for TOO terribly long, but I did continue to push the “update later” button until this morning.

 

Most of the time, when I update, I hardly pay much attention to the message by the Firefox reps regarding the update.  I’m just wanting to use the browser and consider the frequent updates to be a bit too frequent.  I understand, security risks are a factor as well as patching performance issues and implementing new user experience features, yadda yadda yadda.  By the time I finally push that button to update, I’m getting more than just 1 update, and am just looking for the notification to please just stop asking me to upgrade.  I’ve posted before about my disdain towards too frequent software patches, so I won’t go deeply into that topic here.

Like I said before, the button was pressed to update Firefox and for some unfathomable reason, I paid attention to their little welcome message illustrating what this update was about… and glad I am of that!

Being a creature of habit, I tend to go to the same places when browsing – so this new tabs group thing is very nice.

Whomever it was that came up with the idea to integrate this functionality into Firefox – should be given some serious kudos.  If they’re seattle based, maybe the company can pay for their parking for a month or something.

 

Anyway, I thought it worth mentioning.  Kudos to Firefox and maybe kudos to their messaging or marketing team who made the upgrade details screen stand out in such a way that I actually was inclined to pay attention.

One day on the train…

Posted on

Nearly every morning, I take the Sounder to Seattle.

This week and the last, there have been quite a number of security checks to verify that all who are riding the train have paid for their trip.

First, I’ll explain how it works

Essentially, when you take the train, you do so by 1 of 2 main ways.  You get a current-day ticket at the kiosk, or you have an Orca card.  There are several ways to have your Orca card loaded with money.  This Orca card works much like a lot of company’s security doors, where you touch the card to a reader, and it beeps at you confirming that it read your card (or gives you one of 3 warning beeps which have different meanings, from a low balance to an error reading the card).

There are several different styles of beeps and it even has a visual display to tell you what’s up if you get an error type of a beep.  When you exit the train, you again scan your card.  If you don’t scan it when you get to your stop, then you are charged for the entire trip, which can get pretty spendy.  In the end, you pay for the distance of travel.

My commute costs me about $4.25 each way.

When security checks happen, there are guys who walk around with a hand-held reader and they go around and either check for a current-day boarding pass, or they scan your Orca to verify that you touched the card reader before boarding the train.

 

There are ways to circumvent the system to get a free ride.  If these guys aren’t doing security scans, you might get away with boarding the train and going the entire trip free of charge.  For the commuting train and buses to continue running, it’s kind of important to pay though… or we’ll be stuck driving on the freeway, getting stuck in traffic, having to pay twice if not three-times as much for parking, and increasing our carbon emissions among other things.

 

The toad on the road caused a fuss on the bus train…

Well, there was a guy who accidentally double-scanned sitting in one of the seats directly behind me.  (Double-scanning: scan the first time and then scan again, it cancels the transaction.) This caused quite the ruckus on the train.  The guy didn’t cause a lot of commotion, I think it was likely an honest mistake, but the lady next to him got quite irritated and started this very loud conversation which lasted the rest of the train ride about how the system is broken and how the security guys are going way over-board by double-checking two and three times a week, and that the only reason they’re doing all of this is to get their hands on as much money as possible.  Her tone basically was saying, “How DARE they try to make so much money from these poor innocent people who ride the public transportation system.”

What the heck is wrong with making money?  These people are providing a great service, they’re likely in debt because it costs quite a LOT of money for them to go through and put the system together, to fix up tracks which hadn’t been maintained for so long, to put together parking lots, new bus lines for commuters, park & rides, and provide a system for people to easily and affordably get to and from work.  Then there are maintaining what they built, operational costs, … the list goes on and on.

If my 1-way ticket costs $4.25, and out of 200-500 people on the train, if even 2% of these people don’t pay, by accident or on purpose, with trains running every 30 minutes, the public transportation system will certainly be missing out on precious dollars which they need to maintain the transportation, as well as pay for people to be employed.

If they can manage to actually make a profit… Good For Them!

 

Sadly, I doubt they are making any profit – which means that these security checks are that much more important.  The lady really bugged me.  I really don’t understand why its such a bad thing to make money…

If someone knows why making money is a bad thing, please enlighten me.

 

 

 

27-inch Apple Cinema display on my Windows 7 system

Posted on

As described in my previous post, my husband got as a late mother’s day present, an incredible 27-inch apple cinema display.  There were a whole lot of hoops to jump through so that we could get it to work.  The last of which was the lack of control over the brightness – the thing by default was quite dim.  Compare it next to any of my existing screens and it was like someone had put a pair of shades over my eyes, but they were special selective shades which only dimmed the screen.

Since I do a lot of work which is very color specific (plus, it just seems wrong to not see the colors vividly on such a nice screen), it was QUITE important to get this issue resolved.  This screen – unlike most other monitors – does not have physical controls.  It’s like a laptop screen which has it’s brightness and contrast controlled by the keyboard’s FN key – but I’m not on a laptop and therefore cannot control these settings from my keyboard (though I looked to see if I could find some sort of hardware which would allow just that functionality)

After a few days of searching, we FINALLY discovered a solution.

It’s all about BootCamp.  See, Apple doesn’t appear to support the practice of allowing PC users to use their hardware, but they do support allowing people to install windows on their intel based systems.  But wait – I’m on an AMD processor!

That seemed to be a limitation, but even after we got through that hoop, we still had difficulties.

It turned out to be something crazy simple.

The bootcamp exe file for the control panel (called AppleControlPanel.exe) is all which is needed.  You don’t have to install anything, it takes next to no time to run, and it has the control built in.  By running this and clicking on the “Brightness” tab, I have full control over the brightness settings.

We actually found the files for this by looking through forum threads on hardforum.com.

The links to the exe can be found below:

32bit AppleControlPanel

 

64bit AppleControlPanel

All this just to do a simple thing like increasing or decreasing brightness on the 27″ Apple Cinema monitor.

 

 

Unfortunately, the above links no longer work, however, due to the high demand, someone has built an application dedicated to being able to fill the needs of those like myself using this awesome display on a PC.

 

To note: I have nothing to do with this app.  This is something built by someone other than myself.  As always, be safe when downloading anything which is open source.  Most often, open source is fantastic but on occasion, you find that someone is exploiting people’s affections and trust in open source items.  Now, I’m not implying that the below link is, but I don’t personally know for certain.  I truly mean no offense to the community member who shared this with everyone.

 

http://www.holstschumacher.dk/p/brightness-controller.html

Supported displays are:
24″ Cinema Display
27″ Cinema Display
27″ Thunderbolt Display

 

 

Trials of a new screen

Posted on

My husband brought home a new shiny last week.  A 27″ apple cinema display.  Oh my oh my.  So pretty.

The initial attempt to plug it in resulted in us discovering an issue with compatibility of ports.  My graphics card was an ATI Radeon 5870, which has a mac compatible display port, but not the mini version, which is what this screen supports.

We ordered an adapter which says it converts the signal.  A week later, we first test the screen on my husband’s laptop, which has the same display port that my computer has.  Bingo, it works!  Sweet.  So we plug it in on my system and sadly, we didn’t get the same positive response.  Instead, the system constantly makes a disconnect reconnect sound from Windows and flickers the screen on and off along with the audio.  My system does pick up the icam, speakers, and usb hub which is built into the screen, but not the screen itself.  *sigh*

After a bunch of digging and research, we discover that we essentially have 2 options.

  1. Pay around $200 for an active converter (the adapter was a passive converter)
  2. Find another graphics card which supports the darn mini-display port.

We researched option 1 already and didn’t like the whole idea on principal (my graphics card was the same price.  I’m not paying $200 just to make this darn screen work on something which has no other function.  That’s a lot of dough for the return), so we started looking at option 2.  We found graphics cards which are supported for around $230.  Looking on ebay for how much my current card is going for, it looks like we’ll be able to essentially exchange cost for cost.  My card sells for MORE than the new card, and the new card has similar capabilities.

Sweet.

So new video card it is.

 

Installed the card and yay!  It works!  So now I’m on this amazing screen and need to figure out what to do with my existing wide-screen.

I really like the idea of having it standing tall to the right of the lovely cinema display.  It would be both useful for reference while working on projects as well as be appealing, but the stand which it is on isn’t one of those which allows for it to tilt and stay on its stand.  So back to Amazon.  After reading a ton of reviews, I found this little guy which was just over $15.

Amazon is swift.  I ordered it on Monday.  Today is Wednesday and it arrived around noon.  I was just at a pausing point with a project, so I thought, “What the heck?” and proceeded to install it.

All was well.  My stud finder (which always tells me there’s a/c in any part of a wall… ) was quite consistent with its reporting of where a stud was.  I marked, measured, leveled, and got everything ready.

Part of this was the concept of where the darn screen would be exactly.  This swivel can extend, go left and right, and tilt, but it can’t go up and down, so I need to figure out exactly where vertically this will be placed.  Not too high and not too low.

My first attempt to mark exact placement was to take chalk and thickly put lines where the bracket will need to attach to the back of the screen.  I took the screen and rubbed that on the wall… nope.  There’s a lip that prevented the chalk from touching the wall.

Second attempt was to put the screws partially in, and mark the screws with chalk… but the screws are the shiny kind which wouldn’t even take the chalk dust.

Attempt number three, I take double sided tape, put that on the ends of the screws and try to get it to stick to the wall – and they liked the screws a little more than they liked the wall.

Last attempt, I combined both concepts and drew with the chalk directly on the tape, and then took the chalked, taped, screw ends which were partially screwed into the screen, and rubbed that on the wall where the screen needed to be.  THAT actually worked.

 

Next on the order of business was the installation itself.  There were heavy wood screws in the pack that came with the wall mount.  So after double checking my leveling and marking exact placement of the mount, I started getting this thing into the wall.  Halfway through screwing these wood screws in, the top one’s head started stripping.  I slowed down and tried to get the screwdriver as perfectly placed as I could, but the screw wouldn’t stop breaking down.  It got beyond turning… it was just too mangled up and not screwed in enough to call it good.

I’ve heard that a screw with stripped threads would be removed by drilling into the middle of it and slowly removing the drill bit which would release the screw.  I didn’t think it would work in this case but I was willing to give it a try (I figured the threads were entrenched too much in the wood, but who knows?)

So I get out the drill bit and start trying to drill and *SNAP* the entire thing just snaps in half.  It didn’t even leave a devit in this darn screw.

*sigh*

 

Got a pair of locking pliers and plied the sucker as tight as I could and was able to very slowly but steadily remove the darn screw.

What I don’t get is why the heck the manufacture would send sub-par screws like this.  The stripping of the head was rediculous.  Their guide said in red italic text that this needs to be mounted directly into a stud.  Since they knew it was going to be in wood and under a lot of torque, why the heck would they include a screw with soft metal?!

Anyway, I had a long solid set of wood screws in the garage, easily installed with that and got the screens set up.

 

Last on my list is to figure out how to control the brightness of the screen.  It’s system driven like a laptop’s screen is.  I’ve read that drivers can be found on an OSX Leopard disk within the bootcamp area.  I truly hope that is true because this screen is quite dim.

Will post an update with what I discover.

Thanks for reading!

 

UPDATE

I discovered how to control brightness on my 27″ apple monitor and posted what we discovered:

27-inch Apple Cinema display on my Windows 7 system