HOW TO INTEGRATE FONTS INTO WORDPRESS?

by Shaylee | May 19, 2018

As WordPress Developers plugins end up spoiling us, even to the point of forgetting how to do the most basic things any Front End Developer needs to know, like setting up fonts. For the last year or so I’ve been using Easy Google Fonts plugin for all my website font needs. This worked out great until I started my new job and I was required to import fonts sans Easy Google Fonts. What is a WordPress developer to do right? In case you are like me and forgot, here is what you need to know, especially if you are working with Google Fonts and Adobe Photoshop.

Google Fonts

1. Header over to Google Fonts ( https://fonts.google.com ) and search for your favorite font. In my case that would be Roboto. Go ahead and click the plus sign.

2. You will notice a little black tab at the bottom of your browser screen that will probably say, ‘1 Family Selected‘ . Go ahead and click the minus sign and a popup will extend. You should notice two tabs one that says embed the other that says customize. Go ahead and click the customize tab. This is where you will select all the different variations of the font you want.

EMBEDDING THE FONT

3. Now that you have selected all your font variations you are going to want to embed them. You do this by clicking the embed tab and copying the @import as well as the css rules. These are what you will be applying to your theme template/or stylesheet. So once copied make sure they are saved to your clip board or text document.

4. Next we will be installing the font. Head over to your downloads folder and double click the font zip file. Once you do that it will open up a folder with all the font variation you have chosen. Double click the font variation you want to install. ( Make sure you do this for all font variations just so you have them for the future )

INSTALL TO PHOTOSHOP

5. Then click the ‘‘Install Font” button. What this does is install’s the font to your computer so Photoshop has access to it. Now when you pull up your PSD you will be able to pick out the fonts from it because they will have been loaded to Photoshop via your computer.

Enqueue into WordPress or Import into Stylesheet

6. Where I work we develop a lot of landing pages that include their own individual styles so we add the Google Fonts by importing them directly into the stylesheet itself.

So head over to your stylesheet and paste the @import you copied earlier to the top of your stylesheet. ( Its also a good idea to paste the css rules commented out. This way when you use the font in your stylesheet you know the format you should be using. )

If you plan on using only one set of fonts throughout your entire theme it’s a far better idea to register them as a style in your functions.php file.

For more information on incorporating fonts checkout the WordPress Codex and the Elegant Themes article I listed below.

Elegant Themes: How To Use Google Fonts On Your WP Website

WordPress.org Codex Article: Function Reference/wp register style

Pages, Posts and Blogs: What’s the difference?

by Shaylee | May 12, 2018

Pages, Posts and Blogs:

What’s the difference?

I’ve noticed with myself as well as working with others who are new to WordPress understanding the difference between Posts and Pages can be a little tricky. The WordPress Codex explains Pages in the following way:

In WordPress, you can put content on your site as either a “post” or a “page”. When you’re writing a regular blog entry, you write a post. Posts, in a default setup, appear in reverse chronological order on your blog’s home page. In contrast, pages are for non-hierarchical content: pages like “About” or “Contact” would be common examples. Pages live outside of the normal blog chronology, and are often used to present timeless information about yourself or your site — information that is always relevant. You can use Pages to organize and manage the structure of your website content.

Pages live outside of the normal blog chronology, and are used to present timeless information about yourself or your site — information that is always relevant. (WordPress.org ) Pages can use different page templates, including template files, Template Tags and other PHP code. (WordPress.org ) https://codex.wordpress.org/Pages

Clear as mud right? To simplify, think back to any website you’ve visited. It can even be this one if you like. When you first come to my website you arrive on my homepage. The homepage is created through making page in “Pages”. You do this by navigating to the Dashboard and clicking Pages. Once there you can either click “Add New” in the Dashboard located underneath Pages or you click the “Add New” button to the right of the Dashboard that is next to the title “Pages”. Now you

A post in the most simplistic sense is where you go to create entries for your blog. Blog creation is not the only use for Posts but is often the most common one. Which is what we will focus on today. Here is the kicker. In order for you to see the Posts you need to create a Page in which these Posts will live. To get your Blog up and running you would create a Page, call it ‘Blog’ ( or whatever you want your blog to be called ) and then you would go into Settings -> Reading -> Front Page Displays -> Posts Page -> select the dropdown and choose Blog.