Use autocomplete for font selection.

assets/src/stories-editor/components/font-family-picker/edit.css

@@ -0,0 +1,33 @@
+.autocomplete__wrapper .autocomplete__menu {
+	border-color: #007cba;
+	width: 101%;
+	border-bottom-left-radius: 4px !important;
+	border-bottom-right-radius: 4px !important;
+	margin-top: -3px;
+	padding-top: 3px;
+}
+
+.autocomplete__icon {
+	position: absolute;
+	top: 4px;
+	right: 4px;
+}
+
+.autocomplete__option {
+	border-bottom: 0 none;
+	padding: 6px 8px;
+	font-size: 13px;
+}
+
+.autocomplete__option--focused,
+.autocomplete__option:hover {
+	background-color: #0071a1;
+	border-color: #0071a1;
+}
+
+.autocomplete__wrapper .autocomplete__input.autocomplete__input--focused {
+	color: #191e23;
+	border-color: #007cba;
+	box-shadow: 0 0 0 1px #007cba;
+	outline: 2px solid transparent;
+}

assets/src/stories-editor/components/font-family-picker/index.js

@@ -2,17 +2,20 @@
  * External dependencies
  */
 import PropTypes from 'prop-types';
+import Autocomplete from 'accessible-autocomplete/react';
 
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _n, sprintf } from '@wordpress/i18n';
+import { BaseControl } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import { AMP_STORY_FONT_IMAGES } from '../../constants';
-import { PreviewPicker } from '../';
+import { maybeEnqueueFontStyle } from '../../helpers';
+import 'accessible-autocomplete/src/autocomplete.css';
+import './edit.css';
 
 /**
  * Font Family Picker component.
@@ -23,50 +26,74 @@ function FontFamilyPicker( {
 	fonts = [],
 	onChange = () => {},
 	value = '',
+	id = '',
 } ) {
-	const defaultOption = {
-		value: '',
-		label: __( 'None', 'amp' ),
+	const results = fonts;
+	const suggest = ( query, syncResults ) => {
+		const searchResults = query ? results.filter( function( result ) {
+			return result.name.toLowerCase().indexOf( query.toLowerCase() ) !== -1;
+		} ) :
+			[];
+		syncResults( searchResults );
 	};
 
-	const options = fonts.map( ( font ) => ( {
-		value: font.name,
-		label: font.name,
-	} ) );
+	const suggestionTemplate = ( result ) => {
+		maybeEnqueueFontStyle( result.name );
+		const fallbacks = ( result.fallbacks ) ? ', ' + result.fallbacks.join( ', ' ) : '';
+		return result && `<span style='font-family: ${ result.name }${ fallbacks }'>${ result.name }</span>`;
+	};
 
-	const fontLabel = ( familyName ) => AMP_STORY_FONT_IMAGES[ familyName ] ?
-		AMP_STORY_FONT_IMAGES[ familyName ]( { height: 13 } ) :
-		familyName;
+	const inputValueTemplate = ( result ) => {
+		return result && result.name;
+	};
 
 	return (
-		<PreviewPicker
-			value={ value }
-			options={ options }
-			defaultOption={ defaultOption }
-			onChange={ ( { value: selectedValue } ) => onChange( '' === selectedValue ? undefined : selectedValue ) }
+		<BaseControl
 			label={ __( 'Font Family', 'amp' ) }
-			id="amp-stories-font-family-picker"
-			ariaLabel={ ( currentOption ) => {
-				return sprintf(
-					/* translators: %s: font name */
-					__( 'Font Family: %s', 'amp' ),
-					currentOption.label
-				);
-			} }
-			renderToggle={ ( { label } ) => fontLabel( label ) }
-			renderOption={ ( option ) => {
-				return (
-					<span className="components-preview-picker__dropdown-label" data-font-family={ option.value === '' ? undefined : option.value }>
-						{ fontLabel( option.label ) }
-					</span>
-				);
-			} }
-		/>
+			id={ id }
+			help={ __( 'Type to search for fonts', 'amp' ) }
+		>
+			<Autocomplete
+				id={ id }
+				source={ suggest }
+				templates={
+					{
+						suggestion: suggestionTemplate,
+						inputValue: inputValueTemplate,
+					}
+				}
+				minLength={ 2 }
+				onConfirm={ onChange }
+				showAllValues={ false }
+				confirmOnBlur={ false }
+				defaultValue={ value }
+				dropdownArrow={ () => '' }
+				preserveNullOptions={ true }
+				placeholder={ __( 'None', 'amp' ) }
+				displayMenu="overlay"
+				showNoOptionsFound={ false }
+				tStatusQueryTooShort={ ( minQueryLength ) =>
+					// translators: %d: the number characters required to initiate an author search.
+					sprintf( __( 'Type in %d or more characters for results', 'amp' ), minQueryLength )
+				}
+				// translators: 1: the index of thre selected result. 2: The total number of results.
+				tStatusSelectedOption={ ( selectedOption, length ) =>
+					sprintf( __( '%1$s (1 of %2$s) is selected', 'amp' ), selectedOption, length )
+				}
+				tStatusResults={ ( length, contentSelectedOption ) => {
+					return (
+						_n( '%d font is available.', '%d fonts are available.', length, 'amp' ) +
+						' ' + contentSelectedOption
+					);
+				} }
+			/>
+		</BaseControl>
 	);
 }
 
 FontFamilyPicker.propTypes = {
 	value: PropTypes.string,
+	id: PropTypes.string,
 	fonts: PropTypes.arrayOf( PropTypes.shape( {
 		value: PropTypes.string,
 		label: PropTypes.string,

assets/src/stories-editor/components/higher-order/with-amp-story-settings.js

@@ -432,10 +432,11 @@ export default createHigherOrderComponent(
 								<FontFamilyPicker
 									fonts={ ampStoriesFonts }
 									value={ ampFontFamily }
-									onChange={ ( value ) => {
-										maybeEnqueueFontStyle( value );
-										setAttributes( { ampFontFamily: value } );
+									onChange={ ( font ) => {
+										maybeEnqueueFontStyle( font.name );
+										setAttributes( { ampFontFamily: font.name } );
 									} }
+									id={ 'amp-stories-font-family-picker' }
 								/>
 								<ToggleControl
 									label={ __( 'Automatically fit text to container', 'amp' ) }

package.json

@@ -54,6 +54,7 @@
     "@wordpress/server-side-render": "1.1.0",
     "@wordpress/url": "2.7.0",
     "@wordpress/wordcount": "2.6.0",
+    "accessible-autocomplete": "1.6.2",
     "autoprefixer": "9.6.1",
     "babel-eslint": "10.0.3",
     "babel-jest": "24.9.0",