Adding Custom Fonts + Import CSS problem

Beaver Builder
1

Hi,

I added an option to select google fonts for some of the elements of my custom modules.

The way I do it is very simple, but there is a problem.

<?php 

// This outputs something like @import url(https://fonts.googleapis.com/css family=Black+Ops+One:400&subset=latin,latin-ext);
$module->get_font_import( $settings->font_name ); 

?>

<?php if ( !empty($setting->font_name) ): ?>
	.fl-builder-content .fl-node-<?php echo $id; ?> p {
 font-family: $module->some_function_that_prints_css($setting->font_name);
}
<?php endif; ?>

The problem is the POST_ID-layout-[draft].css file has additional css before the content of frontend.css.php:

p { font-family: 'Black Ops One', cursive; } // <= THIS IS THE ADDITIONAL CONTENT

/* HERE STARTS THE frontend.css.php */
@import url(https://fonts.googleapis.com/css?family=Black+Ops+One:400&subset=latin,latin-ext);
.fl-builder-content .fl-node-558af0fc3af2f p { 
	font-family: 'Black Ops One', cursive; 
} 
// HERE ENDS THE CONTENT OF frontend.css.php
.fl-post-header { display:none; }

And as far as I know, @import should be on the top of the CSS.
Where is the first CSS coming from? live-preview or where?

Cheers

2

Actually, I realized that I can simply enqueue fonts using wp_enqueue_style() when called from frontend.php.

Do you think that’s a good practice?

3

Hi Elemento,

I’m not sure wp_enqueue_style would work in frontend.php since that’s run after the head actions. Maybe try enqueuing it in your module’s constructor function?

Justin

4

It is a direct call to the wp_enqueue_style not as part of action. It is working but I am not sure that’s a good practice.

The whole point is when the user inserts a new google font, I want to load the google font api.
For this, I need two things:

  1. $settings variable - in order to be able to distinguish the chosen font and load the corresponding google font api url. (That’s impossible in the constructor, no?)

  2. What if the user updates the settings? I want to show the new font style, therefore I need to load the font library in order to see the change. (Constructor is called only once, not in every AJAX request, no?)

Cheers

5
1) $settings variable – in order to be able to distinguish the chosen font and load the corresponding google font api url. (That’s impossible in the constructor, no?)

Ah, you might be right.

2) What if the user updates the settings? I want to show the new font style, therefore I need to load the font library in order to see the change. (Constructor is called only once, not in every AJAX request, no?)

You may need to add the new font style to the head tag using settings.js when the builder is active. We’re only refreshing the builder content, not the entire page.

Justin

6
You may need to add the new font style to the head tag using settings.js when the builder is active. We’re only refreshing the builder content, not the entire page.

So you say settings.js can trigger an event when the setting is updated, and only when the PageBuilder is active?

  1. How to do that? I only know of “submit” and “init”, neither of them is triggered when the user updates the setting value (select list / text / whatever)

  2. How do I get the value of the setting in order to determine what to load?

Cheers

7
1) How to do that? I only know of “submit” and “init”, neither of them is triggered when the user updates the setting value (select list / text / whatever)

You’ll need to setup standard jQuery events in the init function. Here’s an example of how we do that in the content slider…

init: function()
{
    var form          = $('.fl-form-field-settings'),
        bgLayout      = form.find('select[name=bg_layout]'),
        contentLayout = form.find('select[name=content_layout]');
    
    bgLayout.on('change', this._toggleMobileTab);
    bgLayout.on('change', this._toggleTextAndCtaTabs);
    contentLayout.on('change', this._toggleMobileTab);
    contentLayout.on('change', this._toggleTextAndCtaTabs);
    contentLayout.trigger('change');
},
2) How do I get the value of the setting in order to determine what to load?

Once you reference the input you can get the value like so…

bgLayout.val();

Justin