The URL pattern of JSF pages is specified by <servlet-mapping> of the FacesServlet in web.xml. As you mentioned that .xhtml works fine, you have apparently configured it as follows:
<servlet>
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>*.xhtml</url-pattern>      
</servlet-mapping>
You need to change the <url-pattern> accordingly to get the desired virtual URL extension.
<servlet>
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>*.jsf</url-pattern>      
</servlet-mapping>
That's all you need to change in order to achieve the concrete functional requirement, really.
However, this puts a security problem open. The enduser can now see the raw Facelets file source code when changing the extension in the URL back from .jsf to .xhtml. You can prevent this by adding the following security constraint to web.xml:
<security-constraint>
    <display-name>Restrict access to Facelets source code.</display-name>
    <web-resource-collection>
        <web-resource-name>Facelets</web-resource-name>
        <url-pattern>*.xhtml</url-pattern>
    </web-resource-collection>
    <auth-constraint/>
</security-constraint>