Adding Google fonts to Foundation

There’s something really satisfying about finding out how to solve a problem and then sharing the solution with the world. Today – how to add Google fonts to a site built using Zurb’s Foundation framework.

For those who don’t know, Foundation is a really cool responsive front-end framework. it allows us to create great looking websites by providing a base to build on. Styles, scripts, responsiveness, accessibility; it’s all there. My only fault with it is the documentation. Like most ‘community-driven’ products these days, you find yourself having to scour the interwebs to solve the smallest and most irritating of problems. Such as the best way to integrate Google Fonts into it.

Turns out it was quite easy.

Step One

Find your font. This is super-simple. Head to Google Fonts and pick the one you want.

Main Google Fonts Screen
Fonts Customisation Box

You’ll want to select it with the little white cross in the red circle. A box will pop up at the bottom – you can now customise your selection as you see fit, and are supplied with a corresponding ‘import’ snippet. That’s the bit we need next.

Step Two

In your Foundation install directory, navigate to /src/assets/scss. Open up the file called ‘app.scss’ using your favourite text editor (oh the choices; I see another blog post coming on). We need to add the import snippet, without the <style> tags, that we got from Google earlier. Now, when Foundation works its magic, and assuming you have the Sass version (which you should because its AMAZING), it will include the app.scss file into your websites main stylesheet, and you are good to go.

The app.scss file, with imported font

Step Three

The settings.scss file, with a custom font-family variable

You’ve now enabled your new font on the site; it’s time to use it. If you are already familiar with CSS, this will be obvious, I’m sure. You simply use the ‘font-family’ CSS property on a suitable selector, such as a paragraph or ‘H1’ to instruct it to display in a particular font. In the case of Foundation, you get a special Sass file called ‘settings’ which makes it even easier. You only have to add the font name to the variable that corresponds with the text you want to change. The picture above shows the Crimson Text font as the main one for the whole site. Otherwise, you could of course use it on a custom selector inside your main.scss file. Head to the Foundation docs to learn what each of these files do. And that’s it! If it doesn’t work, then either I’ve given you duff advice, or your code is wrong. So let me know in the comments and I’ll help you out.

Development WordPress

Changing your Browsersync URL

Do you use Browsersync as part of your workflow? Have you noticed that when you start Browsersync and a new browser window opens, the URL is localhost rather than the actual URL of your site? Annoying isn’t it?

The problem is that when you try to make changes in a dynamic environment such as WordPress, the database starts to save the localhost URL. You then need to do a search and replace on the URLs to change them back to the real one.

Well, you don’t need to live with this.

In your project folder you should see a file called gulpfile.js. This is where your configurations are stored. Open it up. Scroll to the Browsersync configuration block, which should look like this:

browserSync.init(files, {
      proxy: '',

You will probably already have changed the proxy to your local URL to get Browsersync working fully.

To make the browser load the actual URL of your project, you need to change the code block like so:

browserSync.init(files, {
      open: 'external',
      host: '',
      proxy: '',

And that’s that! Localhost gone.

Oh, and if you use Grunt rather than Gulp, you can make the same changes. Head to the Browsersync Grunt documentation to find out how.

Hosting and Servers Security

Locked out of Webmin/Virtualmin?

Webmin, and its big brother, Virtualmin, are control panels for managing Linux servers. They take care of all aspects of virtual hosting. And they are superb. Oh, and free.

Annoyingly, I sometimes get locked out of the Webmin interface. I check the Webmin service is running:

service webmin status

I check the port is open:

netstat -an | grep :10000

But I’m still locked out. The answer? Firewall. Each and every time. So to help me next time my firewall rules keep me from accessing my own server, this is what I need to do. Start by flushing everything. I guess this kinda disables the firewall completely.

sudo iptables -P INPUT ACCEPT
sudo iptables -P FORWARD ACCEPT
sudo iptables -P OUTPUT ACCEPT
sudo iptables -t nat -F
sudo iptables -t mangle -F
sudo iptables -F
sudo iptables -X

Now log into Webmin. Finally, reset the firewall, clicking the option that states: “Block all except ports used for virtual hosting”.


Quick Tips Security


Just took an urgent call from a client who was concerned their Android phone had been hacked. Adverts were appearing featuring the following URLs (don’t worry – they are disabled):

These were pop-up adverts that just appeared, covering the whole screen. I immediately suggested my client install Malwarebytes – a program that detects adware/spyware and other malicious software. She did so and Malwarebytes identified an app called ‘Etsy’ to be the culprit. It had been infected with an adware (a piece of software that pushes invasive/obtrusive adverts out to the user), called AdultSwine.

With no alternative, I suggested that she remove the app. It is important here to point out that there are often apps with deliberately similar names that look like genuine apps, and there is no way at this stage to determine whether the ‘Etsy’ app that my client downloaded was the real one. In any case, there are clearly questions to put to Google around how they could permit infected applications to be available on their play store, especialy ones that deliberately mislead users into downloading them, in the belief they are genuine.

The problem immediately stopped. She then told me that she had only downloaded the app today (21st January 2018) at around midday.

Always keep your phone scanned for malware

According to security research company Checkpoint, the malware has infected over 60 applications on the Google Play store, and these ‘apps’ have been downloaded between 3 and 7 million times. Their full article can be read here.

Stay safe. Keep your phone updated. And use a good malware protection application.

PHP WordPress

WooCommerce Deposits Add to Cart Issue

If you are a WooCommerce user, you may have come across an issue where on both archive (shop) pages and single product pages, the ‘add to cart’ button says, ‘read more’. Or, more importantly, you may not want to have the button say, ‘add to cart’ at all. This lovely little function can be added to your functions.php file to not just deal with the issue, but allow you to customise the button based on your product type.

add_filter( 'woocommerce_product_add_to_cart_text' , 'bouncing_add_to_cart_text' );
function bouncing_add_to_cart_text() {
  global $product;
  $product_type = $product->product_type;
  switch ( $product_type ) {
    case 'simple':
    return __( 'Select', 'woocommerce' ); /*change 'Options' for Simple products */
    case 'subscription':
    return __( 'Subscribe', 'woocommerce' ); /*change 'Options' for Simple Subscriptions */
    case 'variable-subscription':
    return __( 'Subscribe', 'woocommerce' ); /*change 'Options' for Variable Subscriptions */
    case 'variable':
    return __( 'select', 'woocommerce' ); /*change 'Options' for Variable Products */
    case 'booking':
    return __( 'Book now', 'woocommerce' ); /*change 'Options' for Bookable Products */

However, I came across a complication today. If you install WooCommerce Deposits, it overwrites all of these, changing the button text to ‘select options’. On inspection, it appears that WooCommerce Deposits uses it own filter for displaying text. Therefore, to make the code above also work with Deposits installed, you need to hook into that filter too:

add_filter( 'woocommerce_deposits_add_to_cart_text', 'bouncing_add_to_cart_text' );

I hope you no longer have to tear your hair out to the same extent as I have. Not that I had much to start with.


Firefox Placeholder Bug

My latest client has designed a form input field with a black background (the site has a deliciously dark color scheme). For contrast purposes he included a pure white placeholder, and a nice hover effect to complete the UX, successfully distinguishing the placeholder from the input text.

Now, when I came to create the styles for the input field, I obviously changed the color of the placeholder with:

input::placeholder { color: #fff; }

Nope. It wasn’t white. So into dev tools I went, as you do. The white color was clear as day. Nothing obvious changing it to the medium grey it had now become. No inherited opacity issue, no z-index messing things up. Nothing.

After about half an hour of pulling my hair out, something reminded me to check the field in Chrome. Oh. Whiter than white. Perfect.

You see, turns out that Firefox (still) adds an opacity (0.54 to be exact) on placeholders. No one else does. It’s just a quirk, that has never been resolved (not for want of trying mind, see this rather heated exchange on Bugzilla). Explicitly setting the placeholder opacity to “1” did the trick.

So there we go.

Hosting and Servers Ramblings

Google Maps Pricing Change

Email to Google Maps developers

It’s the morning of the 11th June. You’ve just unlocked the door to the artisan bakery you own in the village. You sit at the counter, croissants and sourdough slowly turning stale on the shelves behind you. Where is everyone?

PHP WordPress

How to Fix WordPress Image Upload Problems (GD Library)

One of my clients was facing issues uploading and editing images in WordPress. The actual upload passed off successfully, but once added to the media library, he couldn’t rotate, crop or scale the image.