Why my STYLE to import external font-face doesn't work

Question

Why doesn't the following <style> change my font to "Computer Modern Typewriter"?

The URL is effective.

<style type="text/css">
    @font-face {
        font-family: 'Computer Modern Typewriter';
        src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmuntt.otf');
        font-weight: normal;
        font-style: normal;
    }

    body {
        font-size: 1em;
        font-family: 'Computer Modern Typewriter'
    }
</style>

Answer 1

Link you provided doesn't support HTTPS, so if your site have HTTPS connection and headers which restrict access to unsecured HTTP it's can be the problem.

Also, OpenType isn't so suitable for web now, you can use WOFF or WOFF2 version of the same font. I found one here: https://github.com/dreampulse/computer-modern-web-font. Use it like this:

@font-face {
	font-family: 'Computer Modern Typewriter';
	src: url('cmuntt.eot');
	src: url('cmuntt.eot?#iefix') format('embedded-opentype'),
		 url('cmuntt.woff') format('woff'),
		 url('cmuntt.ttf') format('truetype'),
		 url('cmuntt.svg#cmuntt') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Computer Modern Typewriter';
	src: url('cmuntb.eot');
	src: url('cmuntb.eot?#iefix') format('embedded-opentype'),
		 url('cmuntb.woff') format('woff'),
		 url('cmuntb.ttf') format('truetype'),
		 url('cmuntb.svg#cmuntb') format('svg');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Computer Modern Typewriter';
	src: url('cmunit.eot');
	src: url('cmunit.eot?#iefix') format('embedded-opentype'),
		 url('cmunit.woff') format('woff'),
		 url('cmunit.ttf') format('truetype'),
		 url('cmunit.svg#cmunit') format('svg');
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: 'Computer Modern Typewriter';
	src: url('cmuntx.eot');
	src: url('cmuntx.eot?#iefix') format('embedded-opentype'),
		 url('cmuntx.woff') format('woff'),
		 url('cmuntx.ttf') format('truetype'),
		 url('cmuntx.svg#cmuntx') format('svg');
	font-weight: bold;
	font-style: italic;
}