-
Posts
-
Hello Kriesi-Team,
I’m currently setting up a general childtheme based on Enfold for future projects to streamline initial setup a bit.
I’d like to use the google webfonts library supplied by fontsource, but make the needed fonts available in theme setup styling options under Fonts, but without the need to upload a zip (importing the necessary files is handled via a scss and a basic config file that makes the needed fonts available in the compiled stylesheet). This way, I can minimize the deployment via a single config file that creates the necessary scss and css that’s handled during deployment and parsed in functions.php.So tl;dr: I’d basically need to make the custom font dropdown active with a set of fonts that simply adds the necessary font-family to the layout widgets, without uploading a zip via theme setup import functions, so that the designers setting up the site have the fonts available as options in the dropdown, but don’t need to upload a zip, and I can centralize deployment via a small set of config files.
Is this possible via functions.php? Is there a hook I can use to register the font-family name so that it appears in the styling font menu?
best regards
Hey geektech-42,
The easiest way would be to add your customs fonts to the “Websafe Font” section in the dropdown.
You can do that and manipulate this array with the following filter:
function custom_available_websafe_fonts( $fonts ) { $fonts['Montserrat'] = 'Montserrat'; $fonts['Aclonica'] = 'Aclonica'; return $fonts; } add_filter( 'avf_available_websafe_fonts', 'custom_available_websafe_fonts' );Then you have to load your @font-face declarations on all backend post types that support ALB and in frontend.
As a start you could add it to enfold-child\style.css which will do it.
To see a rough preview on theme options page you must also load it there. There is no special file in the child theme for that.
You can use the following action hook only called on theme options page to enqueue your own backend file containing the @font-face declarations:/** * Allows to add additional submenus * * @used_by aviaElementTemplates::handler_ava_menu_page_added 10 * * @since 4.8 * @param string $top_level * @param avia_adminpages $this * @param string $the_title * @param string $menu_title */ do_action( 'ava_menu_page_added', $top_level, $this, $the_title, $menu_title );Example fo Font Face declarations:
@font-face { font-family: 'montserrat'; src: url('https://localhost/wp56/wp-content/uploads/dynamic_avia/avia_type_fonts/custom/montserrat-black.ttf') format('truetype'); font-style: normal; font-weight: 900; font-display: auto; } @font-face { font-family: 'montserrat'; src: url('https://localhost/wp56/wp-content/uploads/dynamic_avia/avia_type_fonts/custom/montserrat-blackitalic.ttf') format('truetype'); font-style: italic; font-weight: 900; font-display: auto; }I hope this helps you.
Best regards,
Günter
- The topic ‘Custom fonts without upload’ is closed to new replies.