Как вместо рандомного показа текста, сделать рандомный показ картинок?

[Malleys]

почему ссылка на шрифт работает только через сторонний сервер, строка 6 пост #7?

Потому что тот ресурс находится на стороннем сервере, и там не устанавливается в ответе заголовок Access-Control-Allow-Origin

Access to font at 'https://github.com/googlei18n/noto-emoji/raw/master/fonts/NotoColorEmoji.ttf'
from origin 'https://cdpn.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header
is present on the requested resource.

Это не проблема, загрузите шрифт к себе на сервер, тогда все будет в порядке.

[рони]

Malleys,
а так?

<p id="flag"></p>
<button onclick="showRandomFlag()">Показать следующий случайный флаг</button>
<style>
@font-face {
	font-family: "Noto Color Emoji";
	src: url("https://cdn.rawgit.com/googlei18n/noto-emoji/master/fonts/NotoColorEmoji.ttf");
 }

html {
	font: 300% "Apple Color Emoji", "Android Emoji", "Twemoji Mozilla", "Noto Color Emoji";
}
</style>
<script>
function showRandomFlag() {
    var countries = ["GB", "US", "RU"].map(v => v.replace(/[a-z]/gi, match =>
    String.fromCodePoint(match.toLowerCase().codePointAt() + 127365)));

    var country = countries[Math.random() * countries.length | 0];
    document.getElementById("flag").textContent = country;

}
showRandomFlag();
</script>

[Malleys]

рони, всё верно. Или, что вы имели в виду, спросив, а так?

[рони]

Malleys,
на всякий случай https://github.com/rgrove/rawgit/blob/master/FAQ.md