Font issue on outlook email template

Question

I am working on email template with Google font (Montserrat)but when i open it on outlook mail, my font and images on email templates is not showing properly except other emails. Outlook shows default font (times new roman), I have also attach screenshots of gmail and outlook for reference

I use this code:

<!--[if gte mso 9]>
<style type="text/css">
/* my css for displaying the background and fonts */
</style>
<![endif]-->

Answer 1

Here is a example. Hope this work.

Background Image Example:

<table width="600" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
    <tr>
        <td style="width: 300px; height: 80px; background-image: url('http://placekitten.com/g/300/80');">
        <!--[if gte mso 9]>
            <v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 300px; height: 80px; top: 0; left: 0; border: 0; z-index: 1;' src="http://placekitten.com/g/300/80" />
            <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 300px; height: 80px; top: -5; left: -10; border: 0; z-index: 2;'>
            <div>
        <![endif]-->
            <table width="300" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
                <tr>
                    <td height="80" align="center" valign="top" style="color:#ffffff;font-size:20px;">
                        <span>Text</span>
                    </td>
                </tr>
            </table>
        <!--[if gte mso 9]>
            </div>
            </v:shape>
        <![endif]-->
        </td>
        <td style="width: 100px; height: 80px; background-image: url('http://placekitten.com/g/100/80');">
        <!--[if gte mso 9]>
            <v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 100px; height: 80px; top: 0; left: 0; border: 0; z-index: 1;' src="http://placekitten.com/g/100/80" />
            <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 100px; height: 80px; top: -5; left: -10; border: 0; z-index: 2;'>
            <div>
        <![endif]-->
            <table width="80" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
                <tr>
                    <td height="80" align="center" valign="top">
                        <span>Text</span>
                    </td>
                </tr>
            </table>
        <!--[if gte mso 9]>
            </div>
            </v:shape>
        <![endif]-->
        </td>
        <td style="width: 200px; height: 80px; background-image: url('http://placekitten.com/g/200/100');">
        <!--[if gte mso 9]>
            <v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 200px; height: 80px; top: 0; left: 0; border: 0; z-index: 1;' src="http://placekitten.com/g/200/100" />
            <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 200px; height: 80px; top: -5; left: -10; border: 0; z-index: 2;'>
            <div>
        <![endif]-->
            <table width="200" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
                <tr>
                    <td height="80" align="center" valign="top" style="color:#ffffff;font-size:20px;">
                        <span>Text</span>
                    </td>
                </tr>
            </table>
        <!--[if gte mso 9]>
            </div>
            </v:shape>
        <![endif]-->
        </td>
    </tr>
</table>
<table width="600" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
    <tr>
        <td style="width: 600px; height: 150px; background-image: url('http://placekitten.com/g/600/150');">
        <!--[if gte mso 9]>
            <v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 600px; height: 150px; top: 0; left: 0; border: 0; z-index: 1;' src="http://placekitten.com/g/600/150" />
            <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 600px; height: 150px; top: -5; left: -10; border: 0; z-index: 2;'>
            <div>
        <![endif]-->
            <table width="600" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
                <tr>
                    <td height="150" align="center" valign="top" style="color:#ffffff;font-size:20px;">
                        <span>Text</span>
                    </td>
                </tr>
            </table>
        <!--[if gte mso 9]>
            </div>
            </v:shape>
        <![endif]-->
        </td>
    </tr>
</table>

Font Example:

    @font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: local('Montserrat-Regular'), 
    url(https://fonts.gstatic.com/s/montserrat/v7/zhcz-
   _WihjSQC0oHJ9TCYL3hpw3pgy2gAi-Ip7WPMi0.woff) format('woff'); 
    }