Thanks for writing in! You will have to update your code and use this:
src: url('//dhbrown.wpengine.com/wp-content/themes/x-child/fonts/Vanity-Light.woff2') format('woff2'),
Even if you have the code above, it will still not display in the theme options typography section. Before you can do that, since what you are trying to accomplish requires a template customization, we would highly to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released.
After the child theme is set up, please add the following code in your child theme’s functions.php file
// Add custom font name in the Theme Option's typography section
$data['mywebfont'] = array(
'source' => 'Custom',
'family' => 'Vanity Light',
'stack' => '"VanityLight", sans-serif',
'weights' => array( '400' )
If you are not seeing the font name, you must have enabled the Font manager. Please disable it and look for the Font name again in the typography section.
Hope this helps. Please let us know how it goes.