单击链接后自定义CSS字体消失

Question

我有一个基本的HTML / CSS网站，以获得乐趣并在其上放置自定义字体。问题是，当我点击侧边栏上的链接时，自定义字体会更改为标准字体，除非我关闭标签并重新打开它，否则不会恢复为自定义字体。我怎么能让它留下来？

CSS：

@font-face {
font-family: 'VHS';
src: url('http://hashfastr.com/fonts/VHS.ttf');
}

body {
    background-color: black;
}

.upper {
    font-family: 'VHS';
    font-size: 400%;
    color: white;
}

.lower {
    font-family: 'VHS';
    font-size: 300%;
    color: white;
}

.mini {
    font-family: 'VHS';
    font-size: 150%;
    color: white;
}

.list {
    font-family: 'VHS';
    font-size: 100%;
    color: white;
}

网站为here

编辑：问题不适用于移动设备，只有Chrome和Firefox。我认为这是由于缓存错误？