Add A Custom Font
in Tips, Typography
as CSS, fonts, how-to
Using @font-face …
- Find the font you like
- Make sure the font license allows you to use it!
- Upload the font to your site / include with your theme package.
- Write the CSS.
OK … that seems simple enough, four relatively easy steps to follow. Let’s give it a run.
Step 1, I went to Google Web Fonts and browsed for something I liked; I chose “Glass Antiqua” by Denis Masharov1.
Step 2, the font is licensed under the SIL Open Font License, Version 1.1, which is compatible with the GNU GPLv2 License (something I strive to release all projects under).
Step 3, I uploaded the font and license text to my current theme’s font folder.
Step 4, I made the necessary CSS modifications to, in this case, change the site’s title font.
@font-face {
font-family: 'Glass Antiqua';
src: url('fonts/GlassAntiqua-Regular.ttf') format('truetype');
}
#blog-title {
/* font-family: "Copperplate Gothic Bold", Arial, sans-serif; */
/* font-size: 30px; */
font-family: "Glass Antiqua", cursive;
font-size: 70px;
...
… and with a tweak to the `font-size` value, we’re done!
Very easy, and points for not having to worry about being behind a firewall, intranet or local test environment as this method will work in those cases as well.
1. Please note the original design for Glass Antiqua, as noted by Denis Masharov, should be accredited to Franz Paul Glass. The Doctor
Strike Through Text
in Tips
as CSS, del, how-to, HTML, strikethrough
A simple how-to for creating a strike-through text effect with an HTML tag or CSS.
Strike-through text using the <del> tag.
OK, that was really easy. Here is a reference at W3Schools that goes into all the details.
If you are using WordPress you will find the del button on the HTML editor screen. Of course the editor button conveniently drops a date and time stamp attribute into the <del> tag as well, so the above line looks like this under the page:
<del datetime="2010-04-15T13:41:32+00:00">Strike-through text</del>
The ABC button of the visual editor uses inline CSS to create the strike-through effect. Here is an example of what the above line would look like under the page:
<span style="text-decoration: line-through;">Strike-through text</span>
To see an example of how strike-through text can be used feel free to read the latest revision of WordPress 3.0 Navigation Menu Styles.
