Font falling back to Arial on webpage.

I'm using jrxml for jasper reports and i've set my font to DejaVu Sans it is working fine in when i generate pdf format but on page it's falling back to Arial. Like i inspected the text element and it was something like this  <span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif;">فطيرة</span> . My .jrxml look something like this

<staticText>
                <reportElement x="0" y="1" width="200" height="21" uuid="328a390c-70db-4995-89bc-9b09c5052a23"/>
                <textElement>
                    <font fontName="DejaVu Sans" size="11"/>
                </textElement>
                <text><![CDATA[1. ملخص النفقات (بالروبية)]]></text>
            </staticText>