American Legion and Google web fonts

This week I did a little work for a local post of the American Legion Post 491. I am in the beginning stages with the client but thought appropriate to talk about right before Veterans Day tomorrow. This is the first time I have actually used Google web fonts. The welcome red header on this page and the subhead (H2) is provided by google web fonts. They have a pretty large variety of fonts you can choose from. I wanted to go this route because I wanted to match as close as possible the image header on the top of the page and yet still make this site so someone else can edit the text without needing to update an image file.

American Legion ost 491
American Legion ost 491

The font I was trying to match was Trajan and the closest I could find was Mate SC on google. It’s pretty simple browse their collection and then to copy the code and add it to your style sheet. I then added a little bit of drop shadow in CSS and transformed it to upper case for the H1 and regular for H1 through H6 for the rest.

The way you add a shadow in CSS is this little line of code:
text-shadow: 4px 4px 4px #CCC;

The first number is the X-offset, the second is the Y-offset, the third is the amount of blur for the shadow and the last three letters with the pound symbol is the color of the shadow.

I have found that the text shadow doesn’t work in all browsers. It just doesn’t show so at least it degrades nicely and doesn’t render it unreadable.

Hope to use Google fonts and CSS font styling more!

6 thoughts on “American Legion and Google web fonts

  • November 11, 2011 at 3:17 pm
    Permalink

    Thanks for the catch! I always misspell that one!

  • February 27, 2013 at 1:27 pm
    Permalink

    You are right! That one looks a lot closer. Thanks for the link.

  • March 3, 2017 at 7:54 am
    Permalink

    Eloine,

    Any idea what font is used for the words “American Legion” that rotate around the emblem?

  • March 3, 2017 at 9:47 am
    Permalink

    Hello Vaughn, That is a really good question and I wish I knew. At first glance it looked like Avenir was close but the R is wrong. I will keep searching though and hopefully find it. If you do please post the answer. I would love to know.

Leave a Reply

Your email address will not be published. Required fields are marked *