I am happy to report that my computer is still on my desk. I did *not* throw it out the window. It was close there a few times, but since I am now safely typing on it, I believe I survived embedding webfonts into my Clio II portfolio page.
First, I must thank you all for your comments in class last week. I took them all to heart and made some major adjustments. I followed the CARP principle, and moved some of the content boxes around. Namely, I floated my nav back to the left side of the screen to allow for proper eye tracking. I found a nice image of some policemen in training from the Library of Congress Prints and Photographs Division and put it my header. I even ghosted the image a bit so that the red text would show up more. (Look at that, 3 weeks in and I’m crazy. Crazy with the Adobe Suite!)
I realigned all my text so that it’s not all over the place and increased the font. Actually, I changed all my units of measurement to em(s) so that it was consistent. Additionally, I added some red pieces for repetition, including the navigation links and the headline. As this design morphs, I hope to add some more red here and there.
As for the colors, I’m a bit unhappy with the fact that I went the route of the walking cliche and made a red, white and black site. I chose the photo and opted for simplicity and matching. I am happy to report that I am taking a field trip to Baltimore on Thursday to photograph the Nutshell Studies. Depending on how things turn out, I hope to use one of my own photos for the header image and will likely change the colors accordingly. From my initial research, the Studies are quite colorful, so I should have better options.
___________________________________
As for the EMBEDDED FONTS (yes, this phrase does deserve all caps given how much sweat and tears I’ve spent this weekend on getting the damned things to work), I really loved the Lynda tutorial. I’ve used Lynda in the past and always I’ve been impressed with the quality of instruction. I went ahead and took the SitePoint CSS Crash Course to help me really absorb some of the CSS nuances that were totally lost on me. So when it came time to embed like a fiend, I was excited.
And then I went font shopping. This distracted me for two days. I initially chose two fonts from FontSquirrel: England Hand and Mom’s Typewriter.
Like Laura, I really wanted to create some tension in my design and therefore opted to go with a lovely handwritten cursive title juxtaposed against a creaky old police-looking typewriter font. Trouble is, I could not get them both to work in my design using @fontface syntax.
England would work in my title when I removed the Typewriter font and vice versa. Maddening!
Our new friend, James, forgot to mention (in his otherwise great tutorial on using @fontface) where to insert the code in the CSS file. I found that where I put the @fontface declaration really made a difference. If I put it too early in my CSS, it wouldn’t read the rest of the formatting and I had content all over the place. It worked when I put it at the end, but like I said, I could only get one font to work correctly.
To get around this, I decided to scrap the pretty England Hand font and use a TypeKit cursive instead. My final H1 font is Learning Curve. This is a decent old-school cursive lesson-type font, which works. It’s not as decorative as I wanted, but it’s a better option than throwing my computer out the window.
I still don’t feel like I ‘get’ what I was doing wrong. This week, I’ll likely consult the Google and see what she has to teach me. Until then, does anybody have any insight or wisdom as to what I was potentially doing wrong? Anyone successfully embed two fonts using @fontface syntax? If so, please tell me how you did it..