# cartflows/3.1.4/modules/gutenberg/src/components/typography/fontloader.js

CartFlows – Funnel Builder & Checkout Plugin for WooCommerce, version 3.1.4. 101 lines.

- Page: https://pluginprobe.com/plugins/cartflows/3.1.4/code/modules/gutenberg/src/components/typography/fontloader.js
- Raw: https://pluginprobe.com/plugins/cartflows/3.1.4/raw/modules/gutenberg/src/components/typography/fontloader.js
- Modified: 2022-11-07T12:36:12+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/cartflows/3.1.4/code/modules/gutenberg/src/components/typography/fontloader.js#L10-L20`.

```javascript
if ( googlefonts === undefined ) {
	var googlefonts = []; // eslint-disable-line no-var
}
import PropTypes from 'prop-types';
import WebFont from 'webfontloader';
import { useState, useEffect } from '@wordpress/element';
const statuses = {
	inactive: 'inactive',
	active: 'active',
	loading: 'loading',
};
const noop = () => {};

const WebfontLoader = ( props ) => {
	const [ value, setValue ] = useState( [] );

	const status = undefined;

	useEffect( () => {
		loadFonts();
	}, [] );

	useEffect( () => {
		const { onStatus, config } = props;

		if ( status !== value.status ) {
			onStatus( value.status );
		}
		if ( config !== value.config ) {
			loadFonts();
		}
	}, [ props ] );

	const handleLoading = () => {
		setValue( { status: statuses.loading } );
	};

	const addFont = ( font ) => {
		if ( ! googlefonts.includes( font ) ) {
			googlefonts.push( font );
		}
	};

	const handleActive = () => {
		setValue( { status: statuses.active } );
	};

	const handleInactive = () => {
		setValue( { status: statuses.inactive } );
	};

	const loadFonts = () => {
		if ( ! googlefonts.includes( props.config.google.families[ 0 ] ) ) {
			WebFont.load( {
				...props.config,
				loading: handleLoading,
				active: handleActive,
				inactive: handleInactive,
			} );
			addFont( props.config.google.families[ 0 ] );
		}

		const tabletPreview = document.getElementsByClassName( 'is-tablet-preview' );
		const mobilePreview = document.getElementsByClassName( 'is-mobile-preview' );

		if ( 0 !== tabletPreview.length || 0 !== mobilePreview.length ) {

			const preview = tabletPreview[0] || mobilePreview[0];

			const iframe = preview.getElementsByTagName( 'iframe' )[0];

			if ( iframe ) {

				WebFont.load( {
					...props.config,
					loading: handleLoading,
					active: handleActive,
					inactive: handleInactive,
					context: iframe?.contentWindow
				} );
				addFont( props.config.google.families[ 0 ] );
			}
		}
	};

	const { children } = props;
	return children || null;
};

WebfontLoader.propTypes = {
	config: PropTypes.object?.isRequired,
	children: PropTypes.element,
	onStatus: PropTypes.func?.isRequired,
};

WebfontLoader.defaultProps = {
	onStatus: noop,
};

export default WebfontLoader;

```