by crisa28 | Oct 1, 2019 | Tutorial Genesis Framework, Wordpress Tutorial
Adding a unique font to your website is a great way to make your design stand out online.
In this post, I´ll walk you through the step-by-step process for adding any font to your website.
UPLOADING AND USING CUSTOM FONTS IN GENESIS CHILD THEMES
1) Download the font to your computer and extract files if necessary.
Dafont and FontSquirrel are a great source of fonts that are free for commercial use.
If you would like a more premium/unique font, you can use Creative Market.
The font I’m using in this tutorial, Simplicité, was purchase on Creative Market ($19)
2) Create a WebFont Kit for cross-browsing
Upload your .ttf or .otf file to the Webfont Generator and then download your Web Font Kit.
You´ll di
Now your fonts are ready for the web, you can add them to WordPress. Thankfully, as is often the case with WordPress, this is a relatively simple process thanks to the power of plugins. Let’s dive in.
Typically this kit will include multiple file extensions such as (.woff), (.woff2) and (.css).
3) Upload the font files to your website
Upload your font file to wp-content/themes/your-theme/fonts directory. Create a separate fonts folder if you don’t have one yet.
You can use an FTP client like FileZilla or Hosting File Manager for this task. In our example,
You have to upload (.woff) (.woff2) archives.
I have uploaded hv_simplicite_regular-webfont.woff and hv_simplicite_regular-webfont.woff2 archives using the File Manager in hPanel.
To upload a file through cPanel’s File Manager, please do the following:
- Login to cPanel and open the File Manager.
- Navigate to the folder where you want the upload to be located.
- Click on the Upload icon from the top toolbar.
4) Tell WordPress where to find the font
Open the CSS file in a text editor such as Textedit, NotePad or Sublime.
You´ll find a code like this:
@font-face {
font-family: 'hv_simpliciteregular';
src: url('hv_simplicite_regular-webfont.woff2') format('woff2'),
url('hv_simplicite_regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Replace the existing source URL with the new URL you created by uploading each file.
After update:
@font-face {
font-family: 'customfont';
src: url('wp-content/themes/yourtheme/fonts/hv_simplicite_regular-webfont.woff2') format('woff2'),
url('wp-content/themes/yourtheme/fonts/hv_simplicite_regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Then, go to Appearance > Customize > Additional CSS > add the following code.
Replace the existing source URL with the new URL you created by uploading each file.
By default, the source URL location is set within the downloaded Web Font Kit. It needs to be replaced by the location on your server.
Here’s my font:
@font-face {
font-family: 'hv_simpliciteregular';
src: url('wp-content/themes/Meryl_Theme/fonts/hv_simplicite_regular-webfont.woff2') format('woff2'),
url('wp-content/themes/Meryl_Theme/fonts/hv_simplicite_regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Importantly, make sure you change the font name and the URL (copy the URL for the font file on your server).
You can then go ahead and use CSS rules to update the fonts on your site. Here’s an example of how to apply the custom font to Header 3 and paragraph sections…
5) Assign the font to elements style (headings, body, etc..)
Now you have to define which elements will use the new font.
To assign to the headings:
h1, h2, h3 {
font-family: 'font name';
}
To assign the font to the body (all content):
body {
font-family: 'font name';
}
For example, I want to assign the font to theme title´s:
Here’s the final result:
by crisa28 | May 16, 2019 | Wordpress Tutorial
The biggest advantage of lowering your website’s loading time is that it will help tremendously in improving site’s usability and user experience which is essential for today’s online business.
There are many ways to get started with top-end optimization. Here are 5 ideas to get you going.
1. Get a good Web Host
The major factor that influences the speed of a website is the hosting of your WordPress website. I have used many servers but the best option in terms of speed and service is without a doubt SiteGround. They provide excellent loading speed and customer support guaranteed 24/7.
2. Use an effective catching plugin
WordPress pages are “dynamic.” This means they’re built on the fly every time someone visits a post or page on your website. To build your pages, WordPress has to run a process to find the required information, put it all together, and then display it to your user. A cache plugin generates static pages and improves the site pagespeed 2-5x faster. The cached pages are stored in the memory and when a user makes a request the pages are delivered from the cache. By this the php execution and the database requests are skipped. There are a lot of good WordPress caching plugins available, but I recommend using either WP Fastest cache (free) or LiteSpeed Cache (free) plugin. WP Fastest Cache was rated the #1 (free) cache plugin in this Facebook poll.
3. Compress your images
According to httparchive, in August 2016 the images are more than 64% of the weight of an average website. Usually they tend to weigh more than all of your CSS, JS and HTML combined! If you have a website with lots of images you must optimize them to reduce the size. By reducing the image size, you´ll reduce web page size overall and save server´s bandwidth. There are multiple ways to optimize the images, but doing without losing quality is the smart way. In this article, I’ve covered three types of tools.
Compress and reduce your image size up to 90% with Compressor while maintaining high-quality resolution. It supports JPEG, PNG, GIF & SVG and files size limit is 10 MB.
WebP is a raster image format from Google that’s designed specifically for the web. It provides lossless and lossy compression that allows web designers to show richer images at smaller file sizes. WebP lossy images use predictive coding to encode the image. It reduces the file sizes by looking at the neighboring pixels to predict the values, and then only encodes the differences. Lossy images are up to 34% smaller than the comparable image as a JPEG and 26% than the same as PNG.
4. Avoid using unnecessary plugins
Excess plugins can make your job harder and more complicated than it needs to be and could affect the performance as well as the security of a website. Actually, many times we have installed and activated plugins that we do not even know what they do or how to configure them. So why do we have them there without doing anything consuming resources?
5. Keep your site up-to-date
WordPress is updated frequently. Each update will not only offer new features but it will also fix security issues and bugs. Your WordPress theme and plugins may have regular updates, too. As a website owner, it’s your responsibility to keep your WordPress site, theme, and plugins updated to the latest versions. Not doing so may make your site slow and unreliable, and make you vulnerable to security threats.
by crisa28 | Jan 14, 2019 | New Genesis Child Theme
Dear Lovely Confetti friends! I’m writing to you today with some very BIG news to share.
I am listening. I have used your feedback from day one to direct my decision making from year to year and moving into 2019 is no different.
The “WordPress Themes” industry has changed drastically over the past 3 years since I began in 2015 and I want to make sure that I continue to adapt to best serve the creative community…to best serve YOU.
I know that other plaforms have appeared like Squarespace, Showit or very powerful constructors like Elementor or Divi.
I have always been specialized in templates based on the Genesis Framework but now I also want to design in other Frameworks with more flexible constructors.
Soo.. I’m working on a a new Divi Child Theme Collection.
Why I choose Divi?
It was released in December 2013 and it’s become the most popular WordPress themes of all time.
Sites which have designed by using Divi theme has the fastest loading sites on Google.
It has been built to liberate non-coders from the limitations of their lack of development skills. This is achieved via the Divi builder, a drag-and-drop tool that’s integrated into the theme.
Introducing Halle a feminine photography Divi Child Theme
Halle is the first Divi child theme I´ve designed.
It comes with a truly versatile and beautiful design that fits many different looks — freelancer, photographer, event planner or even a standard blog.
Halle is easily customizable; you can modify the colors, buttons, links, hovers, sections,.. or integrate other features with Divi Visual Builder .
The Halle theme has the following functionality:
- 14 pages layouts included (Home, About, Contact, Gallery, Pricing Table,…).
- Sticky Navigation on scroll, preloader and “back to top” button.
- 3 navigation styles ( split navigation, aligned to right or below logo).
- Mobile Responsive.
- HTML 5 Markup.
- Theme Customizer.
- Live theme customizer – see your changes before going live.
- 1-click install process and step by step instructions you will be up and running immediately.
These are just a few of the functions that you can get from this elegant theme. You can see it live by clicking the demo button below.
by crisa28 | Apr 5, 2018 | New Genesis Child Theme
Happy thursday my friends! I wanted to introducing Kate a feminine Photography WordPress theme in the shop, Etsy Shop and Creative Market.
Kate is a modern, sophisticated and clean WordPress theme designed for you to create your own gorgeous and eye-catching with feminine website. Its minimalist style makes it especially well-suited for photographers, bloggers, creatives.
This theme is clean, pretty, and super easy to navigate with a lot of options, that can help customizing you blog, changing Google fonts, colors, posts layouts and more.
I designed a color palette and mood board based on fresh spring colors (greens, blush and sand).
Moodboard Inspiration photo credits: Women | Ficus | Stationery | Casino| Texture
I´ve choosen two gorgeous Google Fonts that combines perfectly, Playfair Display and Nunito for body text.
And finally this is the new WordPress theme!!
Kate comes packed with powerful functionality and beautiful design:
>> Full-width slideshow
Slideshow on Homepage allows you to showcase any content you want.
>> Flexible & widgetized home to page
This enables you to display flexible top section in 3,6,4 or 8 widgets.
>> Theme Options powered by WordPress Customizer
Use the default color scheme or change colors and typography to match your branding (+ 300 beautiful Google fonts) and preview these changes in real time.
>> Custom Post Formats
You can easily and quickly create your blog archive in different layouts: default, columns, features images + content limit,…
>> Filterable portfolio or gallery lightbox
Custom Filterable Portfolio allows designers, artists, photographers to show off their projects, images or gallery to your site. (see it: portfolio). Choose two, three or four columns layouts and allow your readers filter by categories.
>> Compatible with Woocommerce
WooCommerce is a free eCommerce plugin that allows you to sell anything, beautifully ( physical, digital or affiliate products to earn commission ). I´ve customized style making the plugin perfectly integrated in theme (see it: shop).
>> Responsive Design
Fully responsive across all devices — looks great no matter how you’re viewing it (desktops, tablets, and phones).
>> Fade in effect on frontpage
Delays the loading of widgets until the user scrolls to them. This will reduce loading time on long pages with lots of images.
>> 3 different layouts
Choose to have full width pages, with 1 or 2 sidebars on the left or right.
>> Easy navigation
Sticky menu on scroll and floating back to top button help your visitors find the content they’re looking for quickly, without fuss.
>> Display a beautiful newsletter widget compatible with MailChimp, Aweber, MailPoet, ConvertKit,..
Add mailing lists forms and calls to action to widgets, an ideal way to convert more of your website visitors into active leads or email list subscribers.
>> Category index page
Category index page collects images and content from different posts categories creating a single destination where visitors can browse content easily. (see it: category index).
>> Coming soon and Landing page
A Coming Soon page and landing page is a temporary home page telling visitors that your site is under construction or announcing something. Theses pages do not have a header or footer and therefore, visitors are unable to navigate to the rest of your site.
>> Related posts
This provide a user-friendly way to get your visitors more engaged and browsing deeper into your website without any plugin.
>> Optional video background
You can add a video background in certain areas instead of full-width images.
>> Instagram feed
Full-width footer area for beautifully displaying your Instagram photos.
>> Shortcodes
Collection of various visual and functional elements, which you can use in the post, page or widget editor ( Service boxes, call to actions, listings, …)
Feel free to check out this new WordPress theme.
KATE WORDPRESS DEMO
by crisa28 | Feb 8, 2018 | New Genesis Child Theme
I have some exciting news.. I´d like to to introducing Holly a feminine Photography WordPress theme in the shop, Etsy Shop and Creative Market. Holly is a clean, minimalist and elegant and powerful multipurpose WordPress Genesis Child Theme ideally suited to blogs or creative businesses. This theme is been crafted with your visitors in mind, with a focus on striking and enchanting components with a flexible design with a lot of options, that can help customizing you blog, changing Google fonts, colors, posts layouts and more. I built this fresh moodboard that kept inspired to build the new WordPress theme. As you can see, this moodboard takes inspiration from fashion, while adding a bit of texture to help round out that vintage vibe.
Moodboard Inspiration photo credits: flowers | skirt | Eucaliptus | Vespa | Marble
I´ve choosen two gorgeous Google Fonts that combines perfectly, Playfair Display and Nunito for body text.
And finally I got to design the WordPress theme!!
Holly comes packed with many options:
>> Grid Flexible widget
This enables you to display flexible top section in three, four or five.. widgets. 
>> Theme Options powered by WordPress Customizer
Use the default color scheme or select your own color palette and typography (+ 260 beautiful Google fonts) and see a preview of these changes in real time.
>> Custom Post Formats
You can easily and quickly create your blog archive in different layouts: default, columns, features images + content limit,… 
>> Filterable portfolio or gallery
Awesome Filterable Portfolio allows designers, artists, photographers to create, manage and publish your most recent projects, images or gallery to your site. (see it: portfolio). Choose two, three or four columns layouts and allow your readers filter by categories.
>> Woocommerce ready
WooCommerce is a free eCommerce plugin that allows you to sell anything, beautifully ( physical, digital or affiliate products ) to your audience today. I´ve customized style making the plugin perfectly integrated in theme (see it: shop).
>> Responsive Design
Responsive Web Design respond to the user’s behavior and environment based on screen size (desktops, tablets, and phones).
>> Fade in effect on frontpage
Delays the loading of widgets until the user scrolls to them. This will reduce loading time on long pages with lots of images.
>> 3 different layouts
Choose to have full width pages, with 1 or 2 sidebars on the left or right.
>> Easy navigation
Sticky menu on scroll and floating back to top button help your visitors find the content they’re looking for quickly, without fuss.
>> Mailing list integration for MailChimp, Aweber, MailPoet, ConvertKit,..
Add mailing lists forms and calls to action to widgets, an ideal way to convert more of your website visitors into active leads or email list subscribers.
>> Category index page
Category index page collects images and content from different posts categories creating a single destination where visitors can browse content easily. (see it: category index).
>> Coming soon and Landing page
A Coming Soon page and landing page is a temporary home page telling visitors that your site is under construction or announcing something. Theses pages do not have a header or footer and therefore, visitors are unable to navigate to the rest of your site. 
>> Related entries
Related posts in the footer of your entries has proven to be quite effective in making your readers stay on your site a while longer and perhaps navigate to another page while they’re at it.
>> Shortcodes
Collection of various visual and functional elements, which you can use in the post, page or widget editor (Service boxes, call to actions, listings, …)
