Category Archives: Fonts

Thumbnail Reviews

Star Rating Symbol Icons Show Broken or Square Boxes on Woocommerce Review

Very strange? I just made the reviews functionality active on my WordPress Woocommerce website, and I see the icons are broken with square boxes (some says “SSSSS”). There should be some CSS conflicts where the icon fonts were not properly loaded. So, I’ve came up overwriting some CSS styling including a new font-family to the page, and it’s working!

p.stars a:before, p.stars a:hover, p.stars a:visited, p.stars a:focus, p.stars a:hover~a:before, p.stars:hover a:before, p.stars.selected a:not(.active):before, p.stars.selected a.active:before, p.stars.selected a.active~a:before {
    font-family: 'star';
    content: '';
    line-height: 1.4 !important;
}
HTTPS thumbnail

Resolved! Loading Your Google Fonts Over https (SSL) Sites

I couldn’t believe how amazingly simple it was! I was searching for days and nights how to make my google fonts properly load over on my WordPress https (SSL) site.

Here’s the basic story. I’m running an e-Commerce store with a Secure Sockets Layer installed on the domain. I created the logo with “La Belle Aurore” font from Google. When customers pay for their purchase, they have to land on the cart page showing https. My logo won’t be properly showing when my customer uses IE (Internet Explorer 11) browsers or my Safari from iPhones, so I really had resolve this issue.

I’ve seen some people trying to resolve the issue by creating weird code in the .htaccess file or tweaking the .function file in WordPress theme. I’ve tried it, but none of them actually worked for me.

Ta-Dah! It was simpler than I thought. I deleted the http: part on my CSS file, and it worked like magic! So DO “//fonts.googleapis.com/css?family=XXX”, NOT “http://fonts.googleapis.com/css?family=XXX”

@import url(//fonts.googleapis.com/css?family=NAME_OF_YOUR_FONT_FAMILY);

I used “La Belle Aurore” font on my site, so here’s what I have. @import url(//fonts.googleapis.com/css?family=La+Belle+Aurore); I hope this method save your time as well. Good luck!

fonts

Fonts Collection – Best for Web and Print Design

I always look for GOOD Fonts for my design. I’ve been in the industry almost a decade, and with the experience, there are fonts more likely to use than others when designing web or print outs like posters, banners, and documents. Some are good for a headline of an article, and some are good for copies. Most of them are FREE with personal/commercial use, so hope you enjoy my collection.

Gotham

San-Serif, Condensed
gothamFREE Download Gotham family is all time my favorite. It’s great for headline and body copy.

Bebas Neue

Condensed San-Serif, Uppercase Only
bebas neueA sophisticated bold condensed gothic font for PC, Mac, & Web . Highly recommended for titles.
FREE Download | Credit “Dharma Type”
http://dharmatype.com/

League Gothic

Condensed San-Serif
league gothicFREE Download

Frontage

San-Serif, Uppercase only, for Headline and decorative type
frontage$55 at myfonts.com

Helvetica Neue

San-Serif, Condensed to Extended, for body copy
helvetica neue$39/each at myfonts.com

Futura

San-Serif
futuraFREE Download

Knockout

San-Serif, Condensed to Extended
knockout

Nexa

San-Serif & Slab-Serif, Thin to Ultra thick
nexaNexa – Download FREE Version
Nexa – Buy Full Version
Nexa Slab – Download FREE Version
Nexa Slab – Buy Full Version


SignPainter

Cursive Pen Script
SignPainter fontFREE Download

Belinda

Cursive Handwriting Script
belinda$35 at Linotype.com
A Handwriting & fun cursive script for Mac & PC