wp-google-fonts.php

<?php

/**
 * First we will create a settings page and add the name of the page to the
 * admin dashboard
 * Hook to be used in `admin_menu`
 */
add_action( 'admin_menu', 'wpgf_menu_page_setup' );
function wpgf_menu_page_setup() {
	add_menu_page(
		'WP Google Fonts',
		'WP Google Fonts',
		'manage_options',
		'wp-google-fonts',
		'wpgf_security_and_render_forms'
	);
}

function wpgf_security_and_render_forms() {
	?>
	<form action="options.php" method="POST">
		<!-- Display hidden fields and take care of security -->
		<?php settings_fields( 'wp-google-fonts' ); ?>

		<!-- Display all fields and sections that we will create below -->
		<?php do_settings_sections( 'wp-google-fonts' ); ?>

		<!-- Submit the form -->
		<?php submit_button(); ?>
	</form>
	<?php
}

/**
 * Now we will add sections and fields to the settings page we just created above.
 * We we also register the fields.
 * Hook to be used is `admin_init`
 */
add_action( 'admin_init', 'wpgf_section_fields_register' );
function wpgf_section_fields_register() {
	add_settings_section(
		'wpgf-api-config-section', // ID for section
		'Configure Google Fonts',  // Title for section
		'wpgf_api_config_section_callback', // Callback function
		'wp-google-fonts' // slug of our settings page
	);

	add_settings_field(
		'wpgf-api-config-field', // ID for our setting
		'API key and font',  // Title for our setting
		'wpgf_api_config_field_callback', // Callback function
		'wp-google-fonts', // slug of out setting page
		'wpgf-api-config-section' // ID of the section (line 42)
	);

	register_setting(
		'wp-google-fonts', // slug of our settings page
		'wpgf-api-config-field' // ID of our setting
	);
}

/**
 * You can see the output of this function on
 * the settings page.
 */
function wpgf_api_config_section_callback() {
	printf( '<p>%s</p>', esc_html__( 'Add your Google API Key and select your font:' ) );
}

/*
 * We are calling get_option outide because this way we
 * will only make 1 database request.
 * We will store the value in a variable and use it
 * inside functions using `global`.
 */
$options = get_option( 'wpgf-api-config-field', array() );
$defaults = array(
	'api'  => '',
	'font' => '',
);
$options = wp_parse_args( $options, $defaults );

function wpgf_api_config_field_callback() {
	global $options;
	?>
	<fieldset>
		<label for = "wpgf-api-config-field">
			<!-- Google API key input field -->
			<input
				id    = "wpgf-api-config-field"
				type  = "text"
				name  = "wpgf-api-config-field[api]"
				value = "<?php echo esc_attr( _ret_if( $options['api'] ) ) ?>"
			>
			<?php echo esc_html__( 'Google API Key' ) ?>
		</label>
		<br>
	<?php if ( ! ( false === _ret_if( $options['api'] ) ) ) : ?>
		<?php
			$api_key = $options['api'];
			$url = 'https://www.googleapis.com/webfonts/v1/webfonts?key=' . $api_key;
			$args = array(
					'timeout'     => 15,
				    'redirection' => 10,
				    'httpversion' => '1.0',
				);
			$response = wp_remote_get( $url, $args );
		?>
		<?php if ( ! is_wp_error( $response ) ) : ?>
			<?php $body = json_decode( $response['body'] ); ?>
			<?php $font_list = $body->items; ?>
				<label for="wpgf-font-list-field">
					<select id="wpgf-font-list-field" name= "wpgf-api-config-field[font]">
						<?php foreach ( $font_list as $font ) : ?>
							<option 
								value="<?php echo esc_attr( $font->family ) ?>"
								<?php if ( $font->family == $options['font'] ) { echo 'selected="selected"'; } ?>
							>
								<?php echo esc_html( $font->family ) ?>
							</option>
						<?php endforeach; ?>
					</select>
				Select a font</label>
			<?php $font_list = $body->items; ?> 
		<?php else : ?>
			<?php echo esc_html( $response->get_error_message() ); ?>
		<?php endif; ?>
	<?php endif; ?>
<?php }

function _ret_if( $option ) {
	if ( ! empty( $option ) ) {
		return $option;
	} else {
		return false;
	}
}

add_action( 'wp_enqueue_scripts', 'wpgf_enqueue_font_script' );
function wpgf_enqueue_font_script() {
	global $options;
	$font_name = str_replace( ' ', '+', $options['font'] );
	$font_url = 'https://fonts.googleapis.com/css?family=' . $font_name;
	wp_enqueue_style( 'wpgf-url', $font_url );
}

add_action( 'wp_head', 'wpgf_css' );
function wpgf_css() {
	global $options;
	?>
	<style>
		body {
			font-family: <?php echo esc_html( $options['font'] ) ?> !important;
		}
	</style>
	<?php
}

This code uses Settings API, HTTP API and Google Fonts Developer API

Functions you need to look into (click on them)

• wp_remote_get() [ HTTP API ]
• json_decode() [ PHP ]