WP Typeface Setup
If you haven’t, here is how to do it …
Login to your WordPress dashboard, go to Appearance >> Themes
Click Add New >> Upload Theme >> Choose File
Upload wptypeface.zip and then click Install Now.
Enter your serial number and click Activate, if your serial number valid it will show you it’s expired date.
Expired date is the time you are no longer getting update notification and our support.
When you buy new serial number, you must deactive previous serial number first, enter new serial number and activate.
HTML Lang is the way you declare your website’s language to search engine.
By default, it will use your wordpress’s installation language.
If your content languange different from your wordpress’s installation language, you need to adjust it by enter your content’s languange code.
Visit https://www.w3schools.com/tags/ref_language_codes.asp to see complete list of HTML languange code.
Example : Your website’s content language is france.. the code is fr, enter fr to HTML lang field and save.
Free Image CDN
When you activate this option, any image that uploaded to your website will be load from WordPress’s server.
It is faster than loading from your own hosting, it’s free, and will saved much of your hosting’s bandwith usage.
It is also automatically optimize your image using lossless compression method, so you don’t have to optimize it manually one by one.
The downside is.. we don’t know when wordpress will stop providing this feature.
Until then, we recommend you to use it and switch it off when it stop showing your images.
Show scroll to top button
Switch it on if you want to show Scroll to Top button at your website’s right side.
Now Switch to Style Tab.
This is where you can costumize your text appearance.
For a better understanding, open your homepage in new tab to preview any adjustment you’ve made in those option.
Custom font is where you can enter font url from any resource, including your own.
Use it if you need another font that is not available in Font Family’s dropdown option.
Need another font from Google Font library? We’ll talk about it later in chapter 11.
You can upload logo and style your website header here.
If you are too busy to create logo, you can also using text with available font or custom font.
Need header with gradient background color?
Visit https://cssgradient.io/, generate css code, copy and paste it on Background Gradient field.
Top navigation part will show any wordpress’s navigation menu you’ve created that used Top Menu as it’s display location.
Visit WP beginner’s guide if you haven’t know how to create navigation menu.
Following image describe which your website header’s part affect by each setting field.
Enter your social media profile’s url to show Social Media Button on footer.
Footer Type : Split your footer into several columns (that you choose) with exact same width.
Each column contain sections like in the image below, depend on which setting you’ve adjusted.
Menu ID to Show : Display location of navigation menu that you’ve created to show in footer’s column.
- Any field with text input format, except shortcode, support HTML tag.
- If you are not making any adjustment to spesific column, it will show blank column.
Prepare and post product
Before adding products, let’s prepare your product categories.
Make sure there is no ‘uncategorized’ in your product category list.
Set video quality into HD for better view.
Any typeface product need multiple license variation and will be exhausting if you set it one by one everytime you post new product.
How to make it easier? Create product draft.
Let’s prepare it.
As an example… you offer 2 license option, personal license and extended license.
First, decide what is the global name (Attributes name) of those option.
Is it License Type? License Option? or anything that represent it.
Next.. write down on your note any detail of each variation in HTML format.
Here is the snippet that you can adjust depend on what you need.
Variations : Personal License | Extended License (each variations separate by “|”)
price 12 (price of this variation without currency symbol)
Below is how to create list in HTML format
<li>Personal Lisense detail #1</li>
<li>Personal Lisense detail #2</li>
<li>Personal Lisense detail #3</li>
<li>Extended license detail #1</li>
<li>Extended license detail #2</li>
<li>Extended license detail #3</li>
Now let’s create your first product draft…
IMPORTANT NOTE : make sure use your cheapest license variation as Default Form Values (in video at 1:23 ).
To start posting your real product, prepare you product images, font files that you’ll use for preview, zip file of your product for buyer, font’s family name, and your product description.
Optional : you can also show product package’s detail like file size, extension, and whether you included vector format or not.
For example, i will post product with 2 different style by copying product draft that we’ve created before.
Personalized your product’s page and archive
Go to Wp Typeface >> Product.
Those settings will affect all of your products so only need to set it once.
In custom note section, you can add some note to show under CTA (Add to Cart button).
It is support HTML tag in case you need to put link there.
In this example, i’ve set font tester output as text instead of image.
I’ve also set radio button as License option format.
And here is my custom note content :
You can see the result here.
There are several option that you can play with.
Try to make changes and see what happen on your product page.
One section at a time… that is how you build your homepage using WP Typeface.
The following image will describe it better…
WP Typeface’s homepage settings make it possible for you to have overlay header.
It means the background image of section #1 can blend perfectly with your header if you want.
To activate overlay header mode… you must switch it on, upload new logo image and set link color that match your background image.
It will only be used in your homepage, the other page will use header settings that u’ve set before.
Now let’s build your homepage…
Like footer settings, Section Type means you can split your section into several columns.
If you choose Default, as long as you keep Sections’s Heading and Description field blank… it wont show anything.
Default type added in case you need temporary section.
As an example… you want to make seasonal offer and need space to display banner, choose One column type, upload your banner there.
When your offer expired, you’ll only need to change it’s type into default and save it.
What is Inner Content, Section’s Heading and Section’s Description?
This is your guidance …
Each Section Type have different content option to show, you will get the idea later when you try it one by one.
Homepage settings global rule
Destination URL : When you fill the text fields with URL, this element will become clickable and bring your visitor there.
Youtube : When you fill the text field with Youtube’s Video ID, it will show video in that section.
Example : https://www.youtube.com/watch?v=V4PfRI2f96s , V4PfRI2f96s is the video ID.
Search Box : Fill the Placeholder text field with “Search…” or “Search Font…” or anything you like, it will show search box in that section.
CTA = Call to action, is a clickable button.
BG Gradient = When you need background with gradient color, generate css code using https://cssgradient.io/ , copy and paste it to the BG Gradient field.
Each section have individual save and delete button, that is why we recommend you to set one section at a time to avoid confusion.
With this feature, you can make experiment with your website’s style as often as you like worry free.
Go to Woocommerce >> PDF invoices
Click Documents tab >> Packing Slip >> disable it (uncheck) >> Save Changes.
Switch to invoice, set it like on the following image, and Save Changes.
Click General tab >> set it like on the following image…
Upload your logo, adjust the height field if you need to, fill Shop name and address.
You can add note on your pdf file by using Footer field.
If your additional note contain list, write it in HTML format (like product variation description).
Now everytime your buyer completed order, they will receive pdf document contain license usage and your additional note.
Go to Contact >> Contact Forms…
Copy shortcode to your note and click edit…
Click email tab…
Fill “To” field with the email address that u use most so you can know right away when your buyer or potential buyer contact you by form.
You will have to login to your webmail panel later if you want to reply it using webmail address.
Now create contact page by add new page ..
Add title and see Page Attributes on the right side… choose Contact Form 7 and publish it (click publish button on top right).
Refresh your page editor, and you’ll see Contact Form 7’s field… that is where you must insert your shortcode that you’ve copied before.
You can add text on text editor to give more context to your web visitor.
Go to Performance >> General Settings…
Enable Minfiy (manual mode), Opcode Cache (Zen Opcache) if your webhosting support it, and Object Cache.
Disable (uncheck) Browser Cache and Page Cache, as long as you are not using these two… your preview font file is save.
Open Minify settings.
Enable HTML minify settings, check Inline CSS minification, Inline JS minification, and Line break removal.
Ensure you add mfunc to the ‘Ignored comment stems’ option in the Minify settings.
Disable (uncheck) JS minify settings.
Enable CSS minify settings, check Preserved comment removal, and Line break removal.
Now you are ready to boost your income using WP Typeface.
NOTE : Deactive this plugin anytime you adjust your theme or another plugin setting, when you’ve finish… re-active it and empty all caches from W3’s dashboard.
How about another Google Font? Yes… you can use any of Google Font you like… Which is more than 990 fonts to choose.
This is how you do it… as an example you want to use Fredoka One as your Heading font.
Open Fredoka One page (https://fonts.google.com/specimen/Fredoka+One), click select this style.
Click embed, copy anything between href=”copy this“.
In this example, the value is https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap
Open that link using browser, what u are looking for is that font’s URL.
NOTE : sometimes… there are several font URL show on that page.
When it happen, choose the last font’s URL.
After you’ve got your desire font URL, you only need to paste it into the Custom Font field as your Heading Font, Body Font, or Logo Text’s Font and save it.