Glyphicons Pro + WordPress Child Themes

I recently decided to upgrade to the Glyphicons Pro to take advantage of 500+ beautiful, web-friendly icons. Twitter Bootstrap (the framework my current WordPress theme is built upon) has limited access to a starter-portion of the Glyphicons. After several months of heavy use (and overall yearning for the full set), I decided to make an investment in an upgrade.

I am using a WordPress Child theme and ran into hours of inheritance issues. When I finally figured it out, I decided I’d be a fool not to write about it (…for the next time I run into this problem).

All of these changes were made to the childTheme files and folders. Without going into too much detail about parent-vs-child themes, I’m making the changes in the childTheme so that if the parentTheme is ever updated, it won’t overwrite my customizations.

FILES and FOLDERS

Within my childTheme, I created two new folders: css/ and fonts/. It’s very possible your child theme already has these folders, but I’ve never manipulated anything beyond the style.css file, so didn’t find a need for these folders.

I moved all of the Glyphicon Regular font files to the font/ folder:

glyphicons-regular.eot
glyphicons-regular.svg
glyphicons-regular.ttf
glyphicons-regular.woff
glyphicons-regular.woff2

I added the following stylesheets to the css/ folder:

bootstap.css — define @font-face
glyphicons-bootstrap.css — bootstrap helper
glyphicons.css — map glyphicon names to location within font file

CODE

style.css

The childTheme/style.css file wasn’t consistently referencing the correct style sheets within the childTheme. To overcome this, I imported the bootstrap.css file, which contains the @font-face class definition, with a mapping to each of the font files.

@import url("css/bootstrap.css"); // force import of bootstrap.css, within the child theme
...
.glyphicons { color: #1abc9c; font-size: 40px; } // pluralized glyphicon to match the pro nomenclature

bootstrap.css

This is the complete bootstrap.css file. The parentTheme bootstrap.css stylesheet is imported, so I am only overwriting the classes relevant to updating Glyphicons Haflings to Glyohicons Regular.

I explicitly imported the related stylesheets to solve inheritance issues. There are probably slicker ways to accomplish this, but this worked perfectly for me.


@import url("../parentTheme/css/bootstrap.css");
@import url("glyphicons.css");
@import url("glyphicons-bootstrap.css");

The parentTheme/fonts/bootstrap.css file contains a similar section of code with Glyphicon Halflings instead of Glyphicons Regular, mapping the @font-family to the correct font files. Here, we’re updating the files to map to the regular Glyphicons files.

@font-face {
font-family: 'Glyphicons Regular';
src: url('../fonts/glyphicons-regular.eot');
src:
url('../fonts/glyphicons-regular.eot?#iefix') format('embedded-opentype'),
url('../fonts/glyphicons-regular.woff') format('woff'),
url('../fonts/glyphicons-regular.ttf') format('truetype'),
url('../fonts/glyphicons-regular.svg#glyphicons-regular') format('svg');
}

Last but not least, these define the style and position of the Glyphicons. This code also lives in the parentTheme/fonts/boottrap.css folder, so I modified it to reference Glyphicons regular.

.glyphicons {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Regular';
-webkit-font-smoothing: antialiased;
font-style: normal;
font-weight: normal;
line-height: 1;
-moz-osx-font-smoothing: grayscale;
}

This started as a personal bookmark for the next time I try to add Glyphicons Pro to a WordPress Child Theme. However, as I was trying to troubleshoot my issues, I realized this is a surprisingly undocumented process. Hoping this helps someone else in the future!

.font fun {knock-out effect}

I came across a really cool tutorial on Photoshop Essentials for a knock out text effect. The tutorial is really simple and comes with great pictures to depict the step-by-step processes of the tutorial.

There are two parts to this tutorial. The first is manipulating the objects such that any overlap results in white space. That effect is cool by itself but there is also a brush effect that makes the text glow. Give it a try!

.font fun {font monster}

I enjoy playing around with typography so you can imagine my excitement when I found a tutorial for creating a typography creature! I followed a simple tutorial from LayersMagazine.com that described the process of using typography and glyphs to create something cool and realistic. Well maybe not so realistic, but definitely cool!

Glyphs are all characters belonging to a typography. Most of the glyphs appear on a standard keyboard, making up most of the symbols, numbers and letters but there are also things like Greek characters, mathematic symbols and accented letters. In some fonts, the glyph pallet includes alternative letter formats. For example, below are the glyph options for the lowercase ‘s’ and ‘f’ in Zapfino. For this font in particular, the glyph options allow the designer to choose fancier (or simpler) letter options depending on the project requirements.

I really enjoyed the creative freedom LayerMagazine encouraged through their tutorial. There wasn’t a step-by-step process for creating a typography monster which left a lot up to the creator’s imagination. To create your own monster, create a painter’s palette of glyphs and let your imagination flow from there. I recommend using a classic font over a downloaded font just because the glyph palette will be more extensive. I decided to use good ol’ Arial Regular and here’s my creature!

My advice: let your imagination flow. I had no intention of creating this creature but one thing lead to another and before I knew it he had personality and the rest flowed. Start with a vague target (i.e. I used a cartoon picture of a woman with glasses…go figure) but don’t constrain yourself to one vision. Happy typing!

.font fun {sketch font}

I love working with typography and font manipulation so I thought, “What better place to share my interest than on my blog?!” Every time I find a new typography tutorial, tip or trick, I will share it in a post about font fun! Today, I will be sharing the simple joy I get out of the sketchy font trick. Note: for the duration of this post “sketchy” refers to a particular pencil stroke and outcome, not an adjective you would use to describe someone that makes you uncomfortable.

Here’s an example of the sketchy font trick:

Sketch Font

TutorialMagazine.com‘s tutorial about creating a sketch font in Adobe Illustrator helped me build a foundation for this post. I tweaked almost all of the property values to create the example above. In the process, I  learned how to manipulate a lot of fill and stroke properties for future typography work.

Having a command over the fill elements of a font opens doors to a lot of typography related possibilities. When working with solid colors, the fill is in the internal color/texture of a shape or, in this case, typography. To change the fill properties, use the Appearance window in Illustrator. For the sketch font effect, use the Effects > Stylize > Scribble… menu. I find it helpful to select the Preview box (under the “OK” and “Cancel” buttons to the right) because you will see the edits as you change property values.

There are several options that you can edit to customize this scribble effect, but don’t let the quantity intimidate you! First, I suggest playing around with them. Save your work periodically so you don’t loose anything valuable and don’t forget that you can press “Cancel” at any time to reject current changes. Let’s start slow and work through all of the custom setting options within the Scribble Option menu. Below is a screenshot of the Scribble Options menu after I designed the sketchy font effect above.

Example Settings Option Menu

Settings: This drop-down menu controls a few pre-programed settings provided by Illustrator.

Angle: The angle controls the orientation of your line scribbles. Imagine, holding a pencil and drawing lines from left to right on a piece of paper angled at the number you specify.

Path Overlap and Variation: The path overlap controls where the scribble is centered. Values closer to 0 result in a scribble centered in the center of the shape/font versus values further from 0 that will scribble well outside the shape. The variation changes the randomness of the scribbles.

Line Options: These options are pretty self explanatory and control the actual stroke properties (width, spacing, curviness, etc) of the line.

Stroke Width: Controls how thick or thin the line is. Not much of a surprise there.

Curviness and Variation: On a scale of 0 to 100 (with 0 being straight lines and 100 being curvy or loopy lines), the curviness controls how loopy the lines are. It’s basically the difference between doodling with straight lies or curvy strokes. Much like the variation mentioned above, the curviness variation controls how together (and clean) or spread out (and messy) the lines look. Remember, when it comes to design, clean and messy are mere adjectives and don’t indicate how good the final product is, since each is unique.

Spacing and Variation: Surprise! Spacing controls the amount of space between your scribble lines and the variation controls how random your line spaces are. The greater your variation, the messier or more random the final product.

This is really simple and cool tricks that can use to spice up your typography. In my opinion, its easier to try out some of the scribble effects using a big rectangle instead of a font. For some of the properties, especially spacing and variation, you won’t notice the changes because typography doesn’t offer as much functional space as a large rectangle.

I hope you consider trying sketch font the next time you want to add some flare to your next design project. Happy typing!

.font face

No one can doubt that web development has come a very long way over the years. As developers, our accomplishments are restricted only by our imaginations and, as empowering a concept, font selection has been the exception to that rule. Font selection for websites is usually limited to the basic serif (i.e. Times New Roman) and san-serif (i.e. Veranda, Arial, etc) fonts to regulate text presentation. I could go into a grand history lesson about typography and how users perceive different fonts but that would be no fun. Instead I want to share a great way to utilize unique font types on the web.

I am a big fan of interesting fonts as a tool to further the reach of my graphic design work. I found DaFont.com a few years ago and have been exploring and downloading fonts for free ever since. The only short coming was my inability to bring these great fonts to my web development work. At the end of the day, no matter how many great fonts I had up my sleeve, I was stuck with the generic serif and san-serif font palatte.

A good friend and experienced web developer introduced me to font-face, a CSS trick that allows web browsers to display unique fonts. The infrastructure for this trick has been around for a while, but few browsers supported it. [More information on the history here, on css3.info] I decided to give it a try with…

Greenbeans

…one of my new favorite fonts from DaFont.

h4 { font-family: Greenbeans; color: #00CC00; font-size: 3.5em; }

@font-face {
font-family: "Greenbeans";
src: url('http://www.monetspells.com/Greenbeans.ttf') format('truetype');
}

The entire process is very simple and only required a font file upload and a url navigation code in the CSS. I decided to create a new header type that would feature the Greenbeans font type and a funky green color (above and below).

The quick brown fox jumps over the lazy dog.

Please note, the font change will be visible for users viewing this page in the most updated versions of Safari, Firefox or Internet Explorer and those who have the font installed. Here is the sample Greenbeans font change in image form if you are using an older browser version…
SentenceExample

Here are some really helpful tutorials and links to get you started with @font-face.

Tutorials and Helpful Links:

1. Web Fonts with @font-face
Web Fonts with @font-face
2. @font-face in the wild
@font-face in the wild
3. @font-face
@font-face
4. www.css3.info [main page]
5. Mozilla Developer Center [main page]