$element_style .= sprintf(
esc_attr( et_builder_process_range_value( $values[ $i ], $property ) ),
( $use_important ? ' !important' : '' )
$style .= rtrim( $element_style );
if ( ! function_exists( 'et_builder_enqueue_font' ) ) :
* @param string $font_name font name.
function et_builder_enqueue_font( $font_name ) {
global $et_fonts_queue, $et_user_fonts_queue;
$fonts = et_builder_get_fonts();
$websafe_fonts = et_builder_get_websafe_fonts();
$user_fonts = et_builder_get_custom_fonts();
$removed_fonts_mapping = et_builder_old_fonts_mapping();
if ( array_key_exists( $font_name, $user_fonts ) ) {
$et_user_fonts_queue[ $font_name ] = $user_fonts[ $font_name ];
// Skip enqueueing if font name is not found. Possibly happen if support for particular font need to be dropped.
if ( ! array_key_exists( $font_name, $fonts ) && ! isset( $removed_fonts_mapping[ $font_name ] ) ) {
// Skip enqueueing for websafe fonts.
if ( array_key_exists( $font_name, $websafe_fonts ) ) {
if ( isset( $removed_fonts_mapping[ $font_name ] ) ) {
$font_name = $removed_fonts_mapping[ $font_name ]['parent_font'];
$font_character_set = $fonts[ $font_name ]['character_set'];
// Force enabled subsets for existing sites once.
if ( ! et_get_option( "{$shortname}_skip_font_subset_force", false ) ) {
et_update_option( "{$shortname}_gf_enable_all_character_sets", 'on' );
et_update_option( "{$shortname}_skip_font_subset_force", true );
// By default, only latin and latin-ext subsets are loaded, all available subsets can be enabled in ePanel.
if ( 'false' === et_get_option( "{$shortname}_gf_enable_all_character_sets", 'false' ) ) {
if ( false !== strpos( $fonts[ $font_name ]['character_set'], 'latin-ext' ) ) {
$latin_ext = ',latin-ext';
$font_character_set = "latin{$latin_ext}";
$font_name_slug = sprintf(
strtolower( str_replace( ' ', '-', $font_name ) )
str_replace( ' ', '+', $font_name ),
apply_filters( 'et_builder_set_styles', $fonts[ $font_name ]['styles'], $font_name )
'subset' => apply_filters( 'et_builder_set_character_set', $font_character_set, $font_name ),
$et_fonts_queue[ $font_name_slug ] = $queued_font;
if ( ! function_exists( 'et_builder_enqueue_user_fonts' ) ) :
* @param array $et_user_fonts User fonts.
* @return The @font-face CSS at-rule.
function et_builder_enqueue_user_fonts( $et_user_fonts ) {
if ( ! empty( $et_user_fonts ) ) {
foreach ( $et_user_fonts as $font_name => $font_data ) {
if ( is_array( $font_data['font_url'] ) && ! empty( $font_data['font_url'] ) ) {
// generate the @font-face src from the uploaded font files
// all the font formats have to be added in certain order to provide the best browser support.
'url' => isset( $font_data['font_url']['eot'] ) ? $font_data['font_url']['eot'] : false,
'format' => 'embedded-opentype',
'url' => isset( $font_data['font_url']['woff2'] ) ? $font_data['font_url']['woff2'] : false,
'url' => isset( $font_data['font_url']['woff'] ) ? $font_data['font_url']['woff'] : false,
'url' => isset( $font_data['font_url']['ttf'] ) ? $font_data['font_url']['ttf'] : false,
'url' => isset( $font_data['font_url']['otf'] ) ? $font_data['font_url']['otf'] : false,
foreach ( $uploaded_files as $ext => $file_data ) {
if ( ! $file_data['url'] ) {
$font_src .= '' === $font_src ? 'src: ' : ', ';
'url("%1$s%2$s") format("%3$s")',
esc_url( $file_data['url'] ),
'eot' === $ext ? '?#iefix' : '',
esc_attr( $file_data['format'] )
'@font-face { font-family: "%1$s"; font-display: swap; %2$s %3$s; }',
isset( $font_data['font_url']['eot'] ) ? sprintf( 'src: url(%1$s);', esc_url( $font_data['font_url']['eot'] ) ) : '',
// Make sure to properly escape each individual piece of $font_src above.
et_core_esc_previously( $font_src )
$output .= sprintf( '@font-face { font-family: "%1$s"; font-display: swap; src: url(%2$s);}', esc_attr( $font_name ), esc_url( $font_data['font_url'] ) );
if ( ! function_exists( 'et_font_subset_force_check' ) ) :
* Font subset force check on theme activation.
function et_font_subset_force_check() {
if ( empty( $shortname ) || ! in_array( $shortname, array( 'divi', 'extra' ), true ) ) {
if ( ! et_get_option( "{$shortname}_skip_font_subset_force", false ) ) {
et_update_option( "{$shortname}_skip_font_subset_force", true );
add_action( 'after_switch_theme', 'et_font_subset_force_check' );
* Enqueue queued Google Fonts into WordPress' wp_enqueue_style as one request
function et_builder_print_font() {
global $et_fonts_queue, $et_fonts_cache;
// Bail if no queued google font found.
if ( empty( $et_fonts_queue ) ) {
$protocol = is_ssl() ? 'https' : 'http';
$fonts = wp_list_pluck( $et_fonts_queue, 'font' );
$subsets = wp_list_pluck( $et_fonts_queue, 'subset' );
$unique_subsets = array_unique( explode( ',', implode( ',', $subsets ) ) );
// Get the google fonts for the current page that are stored as an option.
$post_fonts_data = array();
$post_id = is_singular() ? get_the_ID() : false;
if ( false !== $post_id ) {
$post_fonts_data = get_post_meta( $post_id, 'et_enqueued_post_fonts', true );
if ( ! is_array( $post_fonts_data ) ) {
$post_fonts_data = array();
if ( empty( $post_fonts_data ) ) {
$post_fonts_data = array(
// We only need the difference in the fonts since the subsets might be needed
// in cases where a new font is added to the page and it is not yet present
$cached_fonts = $post_fonts_data['family'];
$fonts_diff = array_diff( $fonts, $cached_fonts );
// The `$fonts` variable stores all the fonts used on the page (cache does not matter)
// while the `$cached_fonts` one only stores the fonts that were lastly saved into
// the post meta. When we run `array_diff` we would only get a result if there
// are new fonts present on the page that are not yet cached. However if some
// of the cached fonts are no longer in use this will not be caught by the
// `array_diff`. To fix this if the item count in `$fonts` is different
// than the one in `$cached_fonts` we update the post meta with the
// data from the `$fonts` variable to force unused fonts removal.
if ( count( $fonts ) !== count( $cached_fonts ) ) {
// Update the option for the current page with the new data.
$post_fonts_data = array(
'family' => et_core_sanitized_previously( $fonts ),
'subset' => et_core_sanitized_previously( $unique_subsets ),
// Do not update post meta here, save the value to global variable and update it at `shutdown` hook.
// Prevents object cache error on GoDaddy + Woocommerce websites.
$et_fonts_cache = et_core_sanitized_previously( $post_fonts_data );
if ( et_core_use_google_fonts() ) {
// Append combined subset at the end of the URL as different query string.
$fonts_googleapi_url_args = array(
'family' => implode( '|', $fonts ),
'subset' => implode( ',', $unique_subsets ),
$fonts_googleapi_url = add_query_arg( $fonts_googleapi_url_args, "$protocol://fonts.googleapis.com/css" );
wp_enqueue_style( 'et-builder-googlefonts', esc_url_raw( $fonts_googleapi_url ), array(), null ); // phpcs:ignore WordPress.WP.EnqueuedResourceParameters -- Google fonts api does not have versions
// Create a merge of the existing fonts and subsets in the option and the newly added ones.
$updated_fonts = array_merge( $fonts, $post_fonts_data['family'] );
$updated_subsets = array_merge( $unique_subsets, $post_fonts_data['subset'] );
// Update the option for the current page with the new data.
$post_fonts_data = array(
'family' => array_unique( $updated_fonts ),
'subset' => array_unique( $updated_subsets ),
// Do not update post meta here, save the value to global variable and update it at `shutdown` hook.
// Prevents object cache error on GoDaddy + Woocommerce websites.
$et_fonts_cache = et_core_sanitized_previously( $post_fonts_data );
add_action( 'wp_footer', 'et_builder_print_font' );
* Update Fonts Cache in post meta
* Run this function on shutdown hook to prevents object cache error on GoDaddy + Woocommerce websites
function et_builder_update_fonts_cache() {
if ( ! isset( $et_fonts_cache ) || empty( $et_fonts_cache ) ) {
$post_id = is_singular() ? get_the_ID() : false;
update_post_meta( $post_id, 'et_enqueued_post_fonts', et_core_sanitized_previously( $et_fonts_cache ) );
add_action( 'shutdown', 'et_builder_update_fonts_cache' );
* Enqueue queued Google Fonts into WordPress' wp_enqueue_style as one request (cached version)
function et_builder_preprint_font() {
// Return if this is not a post or a page.
if ( ! is_singular() || ! et_core_use_google_fonts() ) {
$post_fonts_data = get_post_meta( $post_id, 'et_enqueued_post_fonts', true );
// No need to proceed if the proper data is missing from the cache.
if ( ! is_array( $post_fonts_data ) || ! isset( $post_fonts_data['family'], $post_fonts_data['subset'] ) ) {
$fonts = $post_fonts_data['family'];
$unique_subsets = $post_fonts_data['subset'];
$protocol = is_ssl() ? 'https' : 'http';
$googlefonts_cached_url_args = array(
'family' => implode( '|', $fonts ),
'subset' => implode( ',', $unique_subsets ),
$googlefonts_cached_url = add_query_arg( $googlefonts_cached_url_args, "$protocol://fonts.googleapis.com/css" );
// phpcs:ignore WordPress.WP.EnqueuedResourceParameters -- Google fonts api does not have versions.
wp_enqueue_style( 'et-builder-googlefonts-cached', esc_url_raw( $googlefonts_cached_url ), array(), null );
add_action( 'wp_enqueue_scripts', 'et_builder_preprint_font' );
if ( ! function_exists( 'et_pb_get_page_custom_css' ) ) :
* Return page custom style.
* @param int $post_id post id.
function et_pb_get_page_custom_css( $post_id = 0 ) {
$post_id = $post_id ? $post_id : get_the_ID();
$post_type = get_post_type( $post_id );
$overflow = et_pb_overflow();
$page_id = apply_filters( 'et_pb_page_id_custom_css', $post_id );
$exclude_defaults = true;
$page_settings = ET_Builder_Settings::get_values( 'page', $page_id, $exclude_defaults );
$selector_prefix = '.et-l--post';
case ET_THEME_BUILDER_HEADER_LAYOUT_POST_TYPE:
$selector_prefix = '.et-l--header';
case ET_THEME_BUILDER_BODY_LAYOUT_POST_TYPE:
$selector_prefix = '.et-l--body';
case ET_THEME_BUILDER_FOOTER_LAYOUT_POST_TYPE:
$selector_prefix = '.et-l--footer';
$wrap_post_id = $page_id;
if ( et_theme_builder_is_layout_post_type( $post_type ) ) {
$main_post_id = ET_Post_Stack::get_main_post_id();
$wrap_post_id = $main_post_id;
$wrap_selector = et_pb_is_pagebuilder_used( $wrap_post_id ) && ( et_is_builder_plugin_active() || et_builder_post_is_of_custom_post_type( $wrap_post_id ) );
$selector_prefix = ' ' . ET_BUILDER_CSS_PREFIX . $selector_prefix;
$output = get_post_meta( $page_id, '_et_pb_custom_css', true );
if ( isset( $page_settings['et_pb_light_text_color'] ) ) {
'%2$s .et_pb_bg_layout_dark { color: %1$s !important; }',
esc_html( $page_settings['et_pb_light_text_color'] ),
esc_html( $selector_prefix )
if ( isset( $page_settings['et_pb_dark_text_color'] ) ) {
'%2$s .et_pb_bg_layout_light { color: %1$s !important; }',
esc_html( $page_settings['et_pb_dark_text_color'] ),
esc_html( $selector_prefix )
if ( isset( $page_settings['et_pb_content_area_background_color'] ) ) {
$content_area_bg_selector = et_is_builder_plugin_active() ? $selector_prefix : ' .page.et_pb_pagebuilder_layout #main-content';
'%1$s { background-color: %2$s; }',
esc_html( $content_area_bg_selector ),
esc_html( $page_settings['et_pb_content_area_background_color'] )
if ( isset( $page_settings['et_pb_section_background_color'] ) ) {
'%2$s > .et_builder_inner_content > .et_pb_section { background-color: %1$s; }',
esc_html( $page_settings['et_pb_section_background_color'] ),
esc_html( $selector_prefix )
$overflow_x = $overflow->get_value_x( $page_settings, '', 'et_pb_' );
$overflow_y = $overflow->get_value_y( $page_settings, '', 'et_pb_' );
if ( ! empty( $overflow_x ) ) {
'%2$s .et_builder_inner_content { overflow-x: %1$s; }',
esc_html( $selector_prefix )
if ( ! empty( $overflow_y ) ) {
'%2$s .et_builder_inner_content { overflow-y: %1$s; }',
esc_html( $selector_prefix )
if ( isset( $page_settings['et_pb_page_z_index'] ) && '' !== $page_settings['et_pb_page_z_index'] ) {
'%2$s .et_builder_inner_content { z-index: %1$s; }',
esc_html( $page_settings['et_pb_page_z_index'] ),
esc_html( '.et-db #et-boc .et-l' . $selector_prefix )
return apply_filters( 'et_pb_page_custom_css', $output );
if ( ! function_exists( 'et_pb_video_oembed_data_parse' ) ) :
* Remove scheme from video url.
* @param string $return The returned oEmbed HTML.
* @param object $data A data object result from an oEmbed provider.
* @param string $url The URL of the content to be embedded.
function et_pb_video_oembed_data_parse( $return, $data, $url ) {
if ( isset( $data->thumbnail_url ) ) {
return esc_url( str_replace( array( 'https://', 'http://' ), '//', $data->thumbnail_url ), array( 'http' ) );
if ( ! function_exists( 'et_pb_check_oembed_provider' ) ) :
* Returns the corresponding oEmbed provider's URL.
* @param string $url oembed url.
function et_pb_check_oembed_provider( $url ) {
if ( version_compare( $GLOBALS['wp_version'], '5.3', '<' ) ) {
require_once ABSPATH . WPINC . '/class-oembed.php';
require_once ABSPATH . WPINC . '/class-wp-oembed.php';
$oembed = _wp_oembed_get_object();
return $oembed->get_provider( esc_url( $url ), array( 'discover' => false ) );
if ( ! function_exists( 'et_builder_get_oembed' ) ) :
* Get cached embedded item on page load.
* Use the item source as the key, so some modules with the same item can share it.
* @param string $url Item URL.
* @param string $group Item group to set different cache for the same key.