Teaching and doing digital history.

Goldfish and Squirrels

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..


  1. Erin, I am happy to read that you went with the ghosting; I really love using that!
    Additionally, I saw that you don’t have comments about the embedded fonts yet. I will be tryin to use two later today, and I will let you know how I did it if it works.

  2. Erin – I used two fonts from font squirrel as well, and had a lot of trouble until I used to tutorial. What he doesn’t make clear is that you have to be REALLY specific about where you’re asking the site to receive the file from. I have a seperate folder just for my fonts (so my folders don’t get cluttered with a lot of crap) so my stuff looks like this:

    src: url(../Fonts/name of file);

    The .. tells it to go up a folder from where your html file is stored (I have a seperate folder for completed pages) and then to look in the FONTS folder and then for the file name in that folder. If all your stuff is just under your main Website folder you set up with dreamweaver it should just look like this:

    src: url(name of file);

    I also found it helpful like the video said to seperate the .eot file from the others. So it looked like
    src: url(name of file.eot);
    src: url(name of file.woff),
    url(name of file.ttf); (etc)

    I put my @font-face right at the top of my css code and it worked fine. Hope this helps!

  3. just looked at your coding maybe take the ‘ ‘ out of the url path and definately put the .. instead. Maybe then you can get the two to work.

    font-family: Typewriter;
    src: url(../font/Moms_typewriter-webfont.eot) format(‘eot’);
    src: local(?), url(../font/Moms_typewriter-webfont.woff) format(‘woff’),
    url(../font/Moms_typewriter-webfont.ttf) format(‘truetype’),
    url(../font/Moms_typewriter-webfont.svg#webfontxmFwWeEV) format(‘svg’);
    font-weight: normal;

    this is exactly how mine works for my in progress type assignment and both @font-faces work fine.
    font-style: normal;

  4. I think I might have confused you more…please delete comments and ignore if you don’t understand. Sorry…. lol

  5. Huzzah, that worked. It was definitely the ‘ marks around the url source. Thank you!

  6. Erin and Sasha, I had a similar “quirk.”

    I took me a few tries to self-host my font (Snickles) as well. The only way I managed to do it was to move all the font files into the same folder as my index.html file. That way I was calling them directly (i.e. – url:’snickles.eot’) After I got it to work, I managed to move them into a folder labeled with the font name (i.e. – url: ‘Snickles/snickles.eot’) for a little more organization. For whatever reason, it worked this time even though the syntax was EXACTLY the same as how I originally had it. Go figure….

  7. ERIN,

    Your effort in finding fonts really paid off. Mom’s Typewriter is about the coolest thing I have seen anywhere! I was looking into getting Macware Fontpack Pro but you have proved that it can be done without breaking the bank (though of course not without the obligatory headache).

Speak Your Mind