Font scheme using web fonts not appearing in Change the Look UI

Question

In SharePoint Online/O365, I've placed my font files and images under Site Assets and created my spfont file according to the many guides on the subject (Elio Struyf's and a video on Channel 9), but the new scheme doesn't appear as a selection when using the Change the Look tool. A sample of my spfont file is below. Any ideas on what I could be doing wrong or how to troubleshoot this issue would be appreciated.

<?xml version="1.0" encoding="utf-8"?>
<s:fontScheme name="Montserrat-Merriweather" previewSlot1="title" previewSlot2="body" xmlns:s="https://schemas.microsoft.com/sharepoint/">
    <s:fontSlots>
        <s:fontSlot name="title">
            <s:latin typeface="Montserrat"  
                eotsrc="/SiteAssets/fonts/Montserrat/Montserrat.woff" 
                woffsrc="/SiteAssets/fonts/Montserrat/Montserrat.woff" 
                ttfsrc="/SiteAssets/fonts/Montserrat/Montserrat.ttf" 
                svgsrc="/SiteAssets/fonts/Montserrat/Montserrat.svg" 
                largeimgsrc="/SiteAssets/fonts/Montserrat/MontserratLarge.png" 
                smallimgsrc="/SiteAssets/fonts/Montserrat/MontserratSmall.png" />
            <s:ea typeface="" />
            <s:cs typeface="Segoe UI Light" />
        </s:fontSlot>
        <s:fontSlot name="navigation">
            <s:latin typeface="Merriweather" 
                eotsrc="/SiteAssets/fonts/Merriweather/Merriweather.woff" 
                woffsrc="/SiteAssets/fonts/Merriweather/Merriweather.woff" 
                ttfsrc="/SiteAssets/fonts/Merriweather/Merriweather.ttf" 
                svgsrc="/SiteAssets/fonts/Merriweather/Merriweather.svg" 
                largeimgsrc="/SiteAssets/fonts/Merriweather/MerriweatherLarge.png" 
                smallimgsrc="/SiteAssets/fonts/Merriweather/MerriweatherSmall.png" />
            <s:ea typeface="" />
            <s:cs typeface="Segoe UI" />
        </s:fontSlot>

Answer 1

previewSlot1 and previewSlot2 need to be set to the respective fontSlots used. previewSlot1 will take the large image, and previewSlot2 will take the small image.

Also <s:cs typeface="" /> should be set to the typeface.

<?xml version="1.0" encoding="utf-8"?>
<s:fontScheme name="Montserrat-Merriweather" previewSlot1="title" previewSlot2="navigation" xmlns:s="https://schemas.microsoft.com/sharepoint/">
    <s:fontSlots>
        <s:fontSlot name="title">
            <s:latin typeface="Montserrat"  
                eotsrc="/SiteAssets/fonts/Montserrat/Montserrat.woff" 
                woffsrc="/SiteAssets/fonts/Montserrat/Montserrat.woff" 
                ttfsrc="/SiteAssets/fonts/Montserrat/Montserrat.ttf" 
                svgsrc="/SiteAssets/fonts/Montserrat/Montserrat.svg" 
                largeimgsrc="/SiteAssets/fonts/Montserrat/MontserratLarge.png" 
                smallimgsrc="/SiteAssets/fonts/Montserrat/MontserratSmall.png" />
            <s:ea typeface="" />
            <s:cs typeface="Montserrat" />
        </s:fontSlot>
        <s:fontSlot name="navigation">
            <s:latin typeface="Merriweather" 
                eotsrc="/SiteAssets/fonts/Merriweather/Merriweather.woff" 
                woffsrc="/SiteAssets/fonts/Merriweather/Merriweather.woff" 
                ttfsrc="/SiteAssets/fonts/Merriweather/Merriweather.ttf" 
                svgsrc="/SiteAssets/fonts/Merriweather/Merriweather.svg" 
                largeimgsrc="/SiteAssets/fonts/Merriweather/MerriweatherLarge.png" 
                smallimgsrc="/SiteAssets/fonts/Merriweather/MerriweatherSmall.png" />
            <s:ea typeface="" />
            <s:cs typeface="Merriweather" />
        </s:fontSlot>