It's been six years since Google first unveiled one of the world's largest, free web font services. Their easy-to-use interface was instrumental in bringing what was often considered a brittle technology to the masses. Since 2010 the service has steadily grown in both library diversity and scale.
Recently the service received a full make-over, bringing a more streamlined way for you to preview fonts and get up and running in no time.
But is it actually better? Let's take a look.
[caption id="attachment_134438" align="aligncenter" width="1400"]
I certainly believe that the overall look and feel of Google Fonts has improved. One of the first big things you will notice will be that the whole site uses Material Design. Gone are the thick borders, low-resolution graphics, and bright blue buttons. These are replaced by subtle animations and interactions helping you to focus on narrowing down your fonts.
The updates to the visuals are pretty impressive, but what's also good is that the site is now fully mobile responsive. The previous version of the site didn't handle smaller resolutions or resizing gracefully, leading to lots of random UI bugs that made the site look weird / remove functionality.
On the right, as the screen gets smaller you can see we lose the 'Preview Text' input field making it impossible to get a live preview of our text. Also, as the screen gets narrower the action buttons start to cover up both the font name and the author, eventually vanishing entirely.
The legacy site has been around for a long time and provided a heap of functionality so we can generally cut them some slack. It's refreshing to see that the new site looks great and works across all device types.
One area of concern for designers was choosing a font which works well across different foreground / background colors. Sometimes a font might look great when it's black on a white but then could be next to impossible to read when a bright color is used.
Google added a custom color chooser right at the top of the site. When clicked it provides a quick swatch of colors to let you preview how your fonts will look. You can use this to see how your fonts will pair up when used on dark / light backgrounds with dark / light text.
Even though you can't precisely specify the colors you want, this is a nifty tool that everyone should use when picking out their fonts.
Featured Fonts are a brand new introduction to the updated Google Fonts website. Accessible right from the top menu, these featured fonts are collections of fonts that Google wants to highlight. These collections are created by either Google themselves or by outside agencies to showcase a particular design style or philosophy.
Currently, there are only a few sets of featured fonts, however, it would make sense if this range will increase in time as more fonts are added and the previous Google Fonts website is discontinued.
The main experience with Google Fonts is how to preview and select your fonts, some would argue this is the most important part of the website.
Previously, when viewing your fonts you would see something similar to the diagram below – a simple preview of text with a series of action buttons. Your view might look different depending on how you've filtered your search but generally, it's a simple square box with a series of actions a big blue add button.
Continue reading %Review: Is the New and Improved Google Fonts Better?%
As website code becomes more complicated and repetitive steps that just beg for optimization become ever more commonplace, there should be a better and more efficient development process out there.
In this tutorial, I’ll introduce Gulp, and how to integrate it with WordPress theming to automate and enhance the theme development process by putting together an automated workflow.
Workflow optimization can be incredibly beneficial and rewarding for your development process. Here are some of the reasons to give it a go:
Gulp is a JavaScript task runner that will help automate time-consuming tasks like CSS compressing, Sass compiling, image optimization and browser reloading.
Gulp gives you the tools to do various actions automatically after certain trigger events. For example, consider the following scenarios:
First, you need to install Gulp globally in your system. Later, I will show you how to install it as a package inside your theme.
Assuming Node.js is installed, open the command line tool, then install Gulp using npm via:
[code language="bash"]
npm install gulp -g
[/code]
Now, run gulp -v (Gulp's version command) to test that Gulp is installed correctly. You should get output similar to:
[code language="bash"]
➜ ~ gulp -v
[09:33:59] CLI version 3.9.1
[/code]
In this tutorial, I will use Underscores as the base theme. To download it, navigate to underscores.me, generate a new theme and give it a name like "gulp-wordpress", download it to the WordPress themes directory, then activate it from the dashboard.
From the command line, navigate to the gulp-wordpress directory where you have added the theme, for example in my case:
[code language="bash"]
cd ~/www/wordpress/wp-content/themes/gulp-wordpress
[/code]
Next, run the npm init command and follow a few simple steps to create a package.json file which will include some information about the theme and the packages that will be installed later.
After finishing up the steps, you will have a starting file that looks similar to this:
{
"name": "gulp-wordpress",
"version": "1.0.0",
"description": "WordPress Theme Development Automation with Gulp",
"author": "Name"
}
Next, install Gulp as a development dependency:
[code language="bash"]
npm install gulp --save-dev
[/code]
A node_modules directory is now created containing Gulp package source files, and your package.json file has been updated to include Gulp as a development dependency.
{
"name": "gulp-wordpress",
"version": "1.0.0",
"description": "WordPress Theme Development Automation with Gulp",
"author": "Author Name",
"devDependencies": {
"gulp": "^3.9.1"
}
}
Some Gulp tasks like gulp-autoprefixer require ES6-style Promises support so that you can install the es6-promise polyfill, and then require it at the top of the gulpfile.js as we will do next.
[code language="bash"]
npm install es6-promise --save-dev
[/code]
The last step to configure Gulp is to create an empty gulpfile.js configuration file, which will be used to define Gulp tasks such as JavaScript and Sass.
The gulpfile.js starter file will look like this:
require('es6-promise').polyfill();
var gulp = require('gulp');
// default task
gulp.task('default');
What we have done above is:
es6-promise polyfill on top of the file, then we have imported in gulp.default task.To make sure that Gulp is running and everything is done perfectly, run gulp in the command line to execute the default task created in the gulpfile.js file. The output should be similar to:
[code language="bash"]
[09:48:23] Using gulpfile ~/www/wordpress/wp-content/themes/gulp-wordpress/gulpfile.js
[16:33:13] Starting 'default'...
[16:33:13] Finished 'default' after 58 μs
[/code]
At this point, the theme is ready for new tasks, and it's time to go through some common tasks that you can use to speed up your theme development.
If you are using Sass to write CSS, two main things needed to be automated, the first one is to compile Sass to CSS, the second is to use autoprefixer to add vendor prefixes to your CSS. Also note that I'm using Sass as an example, if you prefer another option like Less for example, you can find a Gulp plugin for it too.
First, install gulp-sass and gulp-autoprefixer.
[code language="bash"]
npm install gulp-sass gulp-autoprefixer --save-dev
[/code]
The next step is to create a Sass directory with a basic structure.
├── sass
│ └── style.scss
The style.scss file is the main starting point, you are free to create your Sass architecture and import other components, modules, functions inside it based on your preference.
Continue reading %WordPress Theme Automation With Gulp%