How to Add Custom Fonts in Astra?

How to Add Custom Fonts in Astra?

Although you get a huge collection of system fonts and Google fonts to use from, Astra gives you the freedom to use custom fonts too.

In order to use Custom Fonts with Astra, you need to install the Custom Fonts plugin available in the WordPress repository. The option Custom Fonts will be available under Appearance. Upload a font file here that you wish to use.

Here is a great tutorial made by Adam from WPCrafter that explains how this plugin works:

Update for Add Custom Fonts: Step-by-step Guide

This step-by-step guide will help you to add and use Custom Fonts plugin on your website

Install Custom Fonts Plugin To Your Website

Step 1 – Custom Fonts plugin is available for free on the WordPress repository. To install this plugin, navigate to Dashboard > Plugins > Add New. Search for 「Custom Fonts」 in the search bar in the upper right corner:

Step 2 – Install and activate the plugin;

Step 3 – You can now find the plugin options at Dashboard > Appearance > Astra Options > Custom Fonts.

Downloading the Custom Font

You can download the fonts you need from multiple sources. Note that some of the fonts you find might have licensing limitations. Importing such fonts to your website using Custom Fonts plugin or some other way doesn』t change these limitations in any way.

For this guide, we will use Google Fonts just as an example: https://fonts.google.com/. We downloaded the .zip file for Nanum Gothic font from here:

When you open the .zip file, you will need to export font files (ttf, otf, woff, woff2, etc.) to your computer from it. There can be one or several font files in the .zip file. These can then be uploaded to your website.

Note:

It』s important to mention that since Astra theme version 3.6.0, you have the option of self-hosting Google Fonts on your website (Appearance > Customize > Performance > Load Google Fonts Locally). Thus, there is no need to import Google Fonts using the Custom Fonts plugin. You can use this plugin for the fonts downloaded from other sources.

Upload And Use Custom Font to Your Website

Once you have your font files and Custom Fonts plugin installed it』s time to upload this font. Let』s start:

Step 1 – Navigate to Dashboard > Appearance > Astra Options > Custom Fonts;

Step 2 – Give your font a name. This can be any name you want and which will be recognizable to you. This is how the font will show in the font list in the Customizer. For this example, we will keep the name of the font – 「Nanum Gothic」;

Step 3 – Select the appropriate Font weight for the font file you』re uploading;

Step 4 – Select your font file;

Step 5 – This step is optional. If your font has more variations, scroll down and click on the 「Add Font Variation」. Repeat steps 3 and 4 for each variation you want to add:

Step 6 – Once you have added all font variations, click on the 「Add New Font」 button on the bottom of the form to save and upload it.

The font will be automatically added to the font list for all Customizer typography options. To use it, please follow these steps:

Step 1 – Navigate to the Appearance > Customize;

Step 2 – Navigate to any Typography option you wish to edit. For this example, we will use the uploaded font at Global > Base Typography;

Step 3 – When you click on the font dropdown, you will find your new font under the 「Other System Fonts」 section in the list. Select your font here:

Step 4 – Set the variants you want to use from the available variants (depending on how many you uploaded);

Step 5 – Click the 「Publish」 button to apply your font.

How to Stick Footer to Bottom when Page Content is Less?

How to Stick Footer to Bottom when Page Content is Less?

Sometimes you may have pages on your site, that have few lines of text or very less content.

In such cases, the footer displays below the content somewhere between the page. That does not give a nice look to the page.

You can stick the footer to the bottom so that no matter what your content length is, the footer will stick at the end of the page.

Option with Astra theme –

Add the following filter to child theme』s functions.php file.

document.addEventListener(
"DOMContentLoaded",
function() {
fullHeight();
},
false
);
function fullHeight() {
var headerHeight = document.querySelector("header").clientHeight;
var footerHeight = document.querySelector("footer").clientHeight;
var headerFooter = headerHeight + footerHeight;
var content = document.querySelector("#content");
content.style.minHeight = "calc( 100vh - " + headerFooter + "px )";
}

<?php
}

Option with Astra Pro Addon plugin –

Sticky Footer option is available with Astra Pro』s Custom Layouts addon.

Firstly, you will need to Enable the Code Editor to insert code in Custom LayoutsNext, we need to design a footer and set it as a sticky using the below code. Choose the Layout as Hooks, and the Action as wp_footer.With Display On setting, you can set it to be displayed on a particular page or on the entire website. 

Following is the above code which can pasted under the Custom Code Editor.

document.addEventListener(
"DOMContentLoaded",
function() {
fullHeight();
},
false
);
function fullHeight() {
var headerHeight = document.querySelector("header").clientHeight;
var footerHeight = document.querySelector("footer").clientHeight;
var headerFooter = headerHeight + footerHeight;
var content = document.querySelector("#content");
content.style.minHeight = "calc( 100vh - " + headerFooter + "px )";
}

Primary Header

Primary Header

Note:

We have recently released the Header Footer builder in Astra version 3.0.0, due to which you will find some new changes. Please refer to the following article for the same.Now you will be able to virtually create the Primary Header by adding Logo, Menu, other Elements to the middle row of the Header builder. Do check the below video for in-depth details.

Below are the settings which are applicable if you are below Astra 3.0.0 —

Primary Header is a default Astra header. It will display a logo and a primary navigation menu. This header can be customized with the following options available in customizer under Header > Primary Header.

Layout

This setting will give three different positions for the logo in the header.

Logo Left – Logo will display left to the menu. This is a widely used header style. Logo Center – Logo will be placed above the menu in the center. If you have long menu you can opt for this layout. Logo Right – Logo will be placed at the right of the menu.

Width

This allows you to set header width either to – full width or to the content width.

Full Width – This will stretch the header content to both ends according to your browser size.Content Width – It will set the content of the header to container width set under Global > Container > Width.

Border

It will add a nice border at the bottom of the header. You can choose a width and color for this border.

Mobile Header – Layout

On responsive devices, the menu converts into a hamburger. In the primary header, on responsive devices, only the logo and hamburger menu will display. You can manage the position of the logo with respect to the hamburger menu.

In case you have a big logo you can opt for Stack where hamburger will display below the logo. Else Inline menu and logo will look fine with a small logo.

How to Add Background Images?

How to Add Background Images?

Astra version 1.3.0 and above provides a feature to add background images to various sections of the site.

You can enhance the design of the Body, Header, Content, Sidebar, and  Footer of your website with this option. In addition to the previous background color option now you can see the background image option as well.

Where can I find the option?

From your WordPress dashboard navigate to Appearance > Customize and under various areas, you will find settings to upload background images

Where can I add a background image to Astra theme?

With Astra theme, you get an option to add a  background image to following areas-

Body (?)Footer Widgets (?)Footer Bar (?)

Background image for Astra Pro Modules

In addition to Body, Footer Widgets, Footer Bar section, you get an option for following modules of Astra Pro –

Primary Header (?)Above Header (?)Below Header (?)Content (?)Sidebar (?)Note: Background option might be visible only if you have Colors & Background module enabled from Astra Pro.

Options for Background Image

Background image option allows you to choose an image from media library or you can upload a new file. After uploading the image, click on More Settings option. Now you can set following  CSS properties for the image –

RepeatBackground Image PositionBackground SizeBackground Attachment

You can adjust the background color overlay with color picker. A nice transparent layer of color above image will enhance the background image design.

 Important Notes:

After adding a background image, make sure to adjust the opacity of background color with color picker.Background applied to the body will not be visible for Full Width/ Stretched – Container Layout as in this layout width of the container is stretched to the fullest.

Footer Widgets Module with Astra Pro

Footer Widgets Module with Astra Pro

This is a premium feature available with Astra Pro Addon plugin. To use these Pro features, you need to have the Astra theme along with the Astra Pro Addon installed on your website.

Note:

We have recently released the Header Footer builder in Astra version 3.0.0, due to which you will find some new changes. Please refer to the following article for the same.

It allows you to add 7 different footer widget layouts to the footer.

Quick Steps on How to Design Footer Widgets Using the Footer Widgets ModuleStep 1: Make sure you have the Astra Pro Addon plugin installed and activated. How to Install Astra Pro Addon plugin?Step 2: Activate the Footer Widgets module from the Astra Options under the WordPress Dashboard > Appearance > Astra OptionsStep 3: Visit customizer [ Appearance > Customize > Footer > Footer Widgets ] to edit module settings

After activating the module, you can find the settings under Appearance > Customize > Footer > Footer Widgets

Footer Widgets Layout

You can choose any layout out of 7 available layouts. After selecting one of the layouts you would be able to add widgets from Appearance > Customize > Widgets

After selecting a layout you can set the widgets for each area under Appearance > Customize > Widgets > Footer Widget Area.Choose any WordPress default widget or you can use any third-party plugin to add a widget to the list.

Footer Widgets Padding

You can add padding for footer from all sides.

Footer Widgets Width

Full Width

It will set a footer to full width no matter what your container width is.

Content width

It will set a footer to container width set under Appearance > Customize > Global > Container > Container Width

Footer Widgets Colors and Background

With the Footer Widgets module, you would get Background Image option along with default color options.

Footer Widgets Typography

With Footer Widgets module, you can set typography for Widget Title and Content under Appearance > Customize > Footer > Footer Widgets > Widget Title Font/Content Font

Unable to find 「No Toggle」 Menu Style?

Unable to find 「No Toggle」 Menu Style?

From the update of Astra Addon 2.6.0, we』re deprecating the No Toggle menu style.

For existing users –

Those who have already set No Toggle menu style –

The style will be active, and won』t have any effect.But as soon as, user change menu style to anything else ( Fullscreen / Flyout / Dropdown ) the No Toggle menu style will be removed from their end.

For new users –

By default this style won』t be visible for selection.

And if in case, you want to get back the No toggle menu style, here is a filter for this –

add_filter( 'astra_no_toggle_menu_style_deprecate', '__return_true' );

Footer Widgets

Footer Widgets

Astra offers 4 widget layout for the footer.Settings are available under Appearance > Customize > Footer > Footer Widgets

Once you select the 4 widget layout for the footer, you can set the widgets for each area under Appearance > Customize > Widgets > Footer Widget Area 1/2/3/4.You can choose WordPress default widgets or can add a third-party plugin to add widgets in the list.

Colors & Background for Footer Widget Area

You can set colors for Widget Title, Text, Border and Links in the footer under Appearance > Customize > Footer > Footer Widgets

Note: The above colors will be applied to default WordPress widgets only. If you are using a third-party plugin to add widgets, you would need to manage colors from the plugin itself.

Typography for Footer Widget Area

Typography options set under Appearance > Customize > Global > Typography > Base Typography will be applied to the footer widget area by default.

We provide more styling options in dedicated modules of the Astra Pro Addon plugin. Learn more about the Footer Widgets module of Astra Pro Addon.

Colors & Background Module

Colors & Background Module

Design and Aesthetics are essential parts of any website. With that, the Astra theme already comes with modern and various color options. If you want to expand your options, however, the Colors & Background addon with the Astra Pro plugin can give you more control and options to your theme.

This premium feature is available with the Astra Pro plugin. So in order to use this addon, you need to have the Astra theme installed along with the actual Astra Pro plugin.

Astra theme (free) gives some basic color options. While Colors & Background Module with Astra Pro plugin adds more options in the customizer.

Here are steps to activate the add on and explore the premium settings – 

Step 1 –  Make sure you have the Astra Pro and WooCommerce plugin installed and activated. 

Step 2 – Activate the addon from Appearance > Astra Options >  Colors & Background.

Step 3 –  After activating, the module will add additional color options for various sections in the customizer ( Appearance > Customize ). 

Below is the detailed list where you can see newly added color options in the Customizer:

Global > Colors > Content Header > Site Identity Header > Primary HeaderHeader > Primary MenuBlog > Blog / ArchiveBlog > Single PostSidebar

1. Global Colors

The Astra theme itself provides basic global color options as mentioned here. In addition to this, the addon will also enable the following options – 

Content Background – With this, you can add a background image and color to the container, i.e., any area where you add text.Headings – You can set colors for each heading, H1 to H6, from one place.You will also find the responsive option enabled for the Content Background.

Note: Content Background will be visible only with Boxed and Content Boxed container layout.

2. Header

Separate color options will be available under the Header tab for –

Site Identity- Enable displaying site title/tagline and you will observe color options.Primary Header- Set background and color for your header.Primary Menu- Set colors to the menu and submenus on normal, hover (color of the menu item when pointer moves over it), and active mode (color of the menu item that is currently active – the page you』re currently viewing).

3. Blog

Blog / Archive – Along with the post title and meta, this will add color options for the Archive Summary Box. This box will appear on an archive page like categories, where the title and the description of the archive page will appear.

4. Sidebar

You』ll get color options for your sidebar.

You can even manage the Sidebar』s Title Color, Text Color, Link Color along with the Background options.

Clone and Delete Elements in Header Footer Builder

Clone and Delete Elements in Header Footer Builder

With the Astra Header Footer builder, you can easily add various elements such as logo, menu, button, widget, etc., and create unique navigation for your website. With Astra version 3.1 and above, you will observe a set of new controls to duplicate and delete both header and footer elements.

Let us understand a bit more about these options.

If you wish to know how to design either a header or footer with the visual builder, please refer to the following articles:

How To Create a Header With Astra Header Builder?How To Create a Footer With Astra Footer Builder?

Note

1. The Clone and Delete options are available only with Astra Pro. To use these options make sure you have the Astra Pro plugin installed, updated, and activated.2. The Clone and Delete options are only available for elements that can be used in multiple numbers. Example: buttons, menus, widgets, etc. These will not be available for single elements such as logo, search, etc.

Clone Header Footer Elements

As the name suggests, this option allows you to clone/duplicate elements of the Header and Footer Builder.

Cloning will create an exact copy of elements with text and style. This will save you time to design similar elements again from scratch. You can clone and easily place elements at a required position just with a single drag-n-drop movement.

In the Header and Footer builder, when you hover over the elements you can see little icons to clone the elements. Click on this to clone the element you wish to duplicate.

Delete Header Footer Elements

The Delete option lets you remove unwanted elements permanently from the customizer. Once deleted these elements can not be retrieved.

Just hover over the element and click on the bin icon to delete the element.

Delete and Remove: The Difference

You will observe the close(x) icon beside every element. This option will just remove the element from the visual builder temporarily. You can insert the element again by clicking on the plus (+) icon in the visual builder.

Delete Option

Remove Option

Note:

Delete: Permanently removes the element from the customizer, the element cannot be retrieved.Remove: Only removes the element from the visual builder and can be added back by using the plus icon.

Header Improvements in Astra!

Header Improvements in Astra!

Note:

Below are the classes that would not work over Astra』s 3.0 release. We are updating the classes shortly.

In this update of Astra theme v2.5.0 and Astra Pro Addon v2.6.0, we bring the following changes –

[ Deprecated ] – We are pulling the plug on the No Toggle Menu Style

[ NEW ] Adding a new Mega Menu Width option – Full Width Stretched

[ UPDATE ] :- Following are the selectors which are updated in this release –

Header selectors in Addon

Header selectors in Addon -

Normal Header -

Primary Header -
- CSS Prefix = .main-header-menu
- For menu li = .main-header-menu .menu-item
- For menu li -> current menu item = .main-header-menu .menu-item.current-menu-item
- For menu li -> anchors = .main-header-menu .menu-item .menu-link
- For menu li inside sub-menu = .main-header-menu .sub-menu .menu-item
- For menu anchors inside sub-menu = .main-header-menu .sub-menu .menu-link

Above Header -
- CSS Prefix = .ast-above-header-menu
- For menu li = .ast-above-header-menu .menu-item
- For menu li -> current menu item = .ast-above-header-menu .menu-item.current-menu-item
- For menu li -> anchors = .ast-above-header-menu .menu-item .menu-link
- For menu li inside sub-menu = .ast-above-header-menu .sub-menu .menu-item
- For menu anchors inside sub-menu = .ast-above-header-menu .sub-menu .menu-link

Below Header -
- CSS Prefix = .ast-below-header-menu
- For menu li = .ast-below-header-menu .menu-item
- For menu li -> current menu item = .ast-below-header-menu .menu-item.current-menu-item
- For menu li -> anchors = .ast-below-header-menu .menu-item .menu-link
- For menu li inside sub-menu = .ast-below-header-menu .sub-menu .menu-item
- For menu anchors inside sub-menu = .ast-below-header-menu .sub-menu .menu-link

Transparent Header -

Primary Header -
- CSS Prefix = .ast-transparent-header .main-header-menu
- For menu li = .ast-transparent-header .main-header-menu .menu-item
- For menu li -> current menu item = .ast-transparent-header .main-header-menu .menu-item.current-menu-item
- For menu li -> anchors = .ast-transparent-header .main-header-menu .menu-item > .menu-link
- For menu li inside sub-menu = .ast-transparent-header .main-header-menu .sub-menu .menu-item
- For menu anchors inside sub-menu = .ast-transparent-header .main-header-menu .sub-menu .menu-link

Above Header -
- CSS Prefix = .ast-transparent-header .ast-above-header-menu
- For menu li = .ast-transparent-header .ast-above-header-menu .menu-item
- For menu li -> current menu item = .ast-transparent-header .ast-above-header-menu .menu-item.current-menu-item
- For menu li -> anchors = .ast-transparent-header .ast-above-header-menu .menu-item > .menu-link
- For menu li inside sub-menu = .ast-transparent-header .ast-above-header-menu .sub-menu .menu-item
- For menu anchors inside sub-menu = .ast-transparent-header .ast-above-header-menu .sub-menu .menu-link

Below Header -
- CSS Prefix = .ast-transparent-header .ast-below-header-menu
- For menu li = .ast-transparent-header .ast-below-header-menu .menu-item
- For menu li -> current menu item = .ast-transparent-header .ast-below-header-menu .menu-item.current-menu-item
- For menu li -> anchors = .ast-transparent-header .ast-below-header-menu .menu-item > .menu-link
- For menu li inside sub-menu = .ast-transparent-header .ast-below-header-menu .sub-menu .menu-item
- For menu anchors inside sub-menu = .ast-transparent-header .ast-below-header-menu .sub-menu .menu-link

Page Header -

Primary Header -
- CSS Prefix = .ast-advanced-headers .main-header-menu
- For menu li = .ast-advanced-headers .main-header-menu .menu-item
- For menu li -> current menu item = .ast-advanced-headers .main-header-menu .menu-item.current-menu-item
- For menu li -> anchors = .ast-advanced-headers .main-header-menu .menu-item > .menu-link
- For menu li inside sub-menu = .ast-advanced-headers .main-header-menu .sub-menu .menu-item
- For menu anchors inside sub-menu = .ast-advanced-headers .main-header-menu .sub-menu .menu-link

Above Header -
- CSS Prefix = .ast-advanced-headers .ast-above-header-menu
- For menu li = .ast-advanced-headers .ast-above-header-menu .menu-item
- For menu li -> current menu item = .ast-advanced-headers .ast-above-header-menu .menu-item.current-menu-item
- For menu li -> anchors = .ast-advanced-headers .ast-above-header-menu .menu-item > .menu-link
- For menu li inside sub-menu = .ast-advanced-headers .ast-above-header-menu .sub-menu .menu-item
- For menu anchors inside sub-menu = .ast-advanced-headers .ast-above-header-menu .sub-menu .menu-link

Below Header -
- CSS Prefix = .ast-advanced-headers .ast-below-header-menu
- For menu li = .ast-advanced-headers .ast-below-header-menu .menu-item
- For menu li -> current menu item = .ast-advanced-headers .ast-below-header-menu .menu-item.current-menu-item
- For menu li -> anchors = .ast-advanced-headers .ast-below-header-menu .menu-item > .menu-link
- For menu li inside sub-menu = .ast-advanced-headers .ast-below-header-menu .sub-menu .menu-item
- For menu anchors inside sub-menu = .ast-advanced-headers .ast-below-header-menu .sub-menu .menu-link

Sticky Header -

Primary Header -
- CSS Prefix = #ast-fixed-header .main-header-menu
- For menu li = #ast-fixed-header .main-header-menu .menu-item
- For menu li -> current menu item = #ast-fixed-header .main-header-menu .menu-item.current-menu-item
- For menu li -> anchors = #ast-fixed-header .main-header-menu .menu-item > .menu-link
- For menu li inside sub-menu = #ast-fixed-header .main-header-menu .sub-menu .menu-item
- For menu anchors inside sub-menu = #ast-fixed-header .main-header-menu .sub-menu .menu-link

Above Header -
- CSS Prefix = #ast-fixed-header .ast-above-header-menu
- For menu li = #ast-fixed-header .ast-above-header-menu .menu-item
- For menu li -> current menu item = #ast-fixed-header .ast-above-header-menu .menu-item.current-menu-item
- For menu li -> anchors = #ast-fixed-header .ast-above-header-menu .menu-item > .menu-link
- For menu li inside sub-menu = #ast-fixed-header .ast-above-header-menu .sub-menu .menu-item
- For menu anchors inside sub-menu = #ast-fixed-header .ast-above-header-menu .sub-menu .menu-link

Below Header -
- CSS Prefix = #ast-fixed-header .ast-below-header-menu
- For menu li = #ast-fixed-header .ast-below-header-menu .menu-item
- For menu li -> current menu item = #ast-fixed-header .ast-below-header-menu .menu-item.current-menu-item
- For menu li -> anchors = #ast-fixed-header .ast-below-header-menu .menu-item > .menu-link
- For menu li inside sub-menu = #ast-fixed-header .ast-below-header-menu .sub-menu .menu-item
- For menu anchors inside sub-menu = #ast-fixed-header .ast-below-header-menu .sub-menu .menu-link

PS: For specifically desktop view and for higher weightage of CSS you can use .ast-desktop selector as prefix and similarly for responsive view you can add selector .ast-header-break-point.
Eg- The above CSS will work as follows - .ast-transparent-header .ast-below-header-menu
For Desktop - .ast-desktop .ast-transparent-header .ast-below-header-menu
For Mobile - .ast-header-break-point .ast-transparent-header .ast-below-header-menu

Note

If in any case the above selector or CSS not working for you, try by higher specificity for that CSS selector.

Following are the Improvement and Fixes we have introduced from this update –

Improvement:

Gutenberg + UAG support in Mega Menu templatesReusable Blocks support in Mega Menu TemplatesLowered weightage, and Optimized CSS now loading for all headerRemoved extra CSS from headers

Fixes:

Menu template』s CTA buttons getting full widths.Mega Menu colors not applying properly when any Template is used inside Mega Menu.Mega Menu not working on Above and Below Headers in some cases.Merge menu case not working with Primary hiding last menu item.Menu container width mega menu not working when the primary menu is disabled.Mega Menu Column heading color not working for Above Header & Below Header.Related products CSS not working properly when using Elementor pro related products for WooCommerce.Elementor popups are not working in the mega menu.Elementor template』s anchor links inside mega menu not working.Background image from Primary Header not inheriting in Sticky Header.Sticky header color not reflecting when we select animation style as 『none』.Left padding missing for submenu in mobile devices.Every mega menu template』s link showing submenu arrow on responsive devices.Font-size of Above Header submenus works alternately for tablet & mobile.