#font-face not rendering on first page visit - html

Question

I've added three fonts to my page with the #font-face css operative. Surfing to the page http://www.oefentherapie-fysiotherapie.nl/index.html shows the page, but does not load the fonts. Refreshing the page does not help. Browsing to another page does render the fonts, and returning to the original page with the back button makes the page render the font correctly.
The css for the page is:
#font-face {
font-family: 'Aller Regular';
src: url('Aller_Rg.eot'); /* IE9 Compat Modes */
src: url('Aller_Rg.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('Aller_Rg.woff2') format('woff2'), /* Super Modern Browsers */
url('Aller_Rg.woff') format('woff'), /* Pretty Modern Browsers */
url('Aller_Rg.ttf') format('truetype');
}
#font-face {
font-family: 'Aller Bold';
src: url('Aller_Bd.eot'); /* IE9 Compat Modes */
src: url('Aller_Bd.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('Aller_Bd.woff2') format('woff2'), /* Super Modern Browsers */
url('Aller_Bd.woff') format('woff'), /* Pretty Modern Browsers */
url('Aller_Bd.ttf') format('truetype');
font-weight: bold;
}
#font-face {
font-family: 'Turnpike';
src: url('/css/Turnpike.eot'); /* IE9 Compat Modes */
src: url('/css/Turnpike.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/css/Turnpike.woff2') format('woff2'), /* Super Modern Browsers */
url('/css/Turnpike.woff') format('woff'), /* Pretty Modern Browsers */
url('/css/Turnpike.ttf') format('truetype');
}
Are the fonts not rendering because the file is too large, so it is not completely read before the page is displayed?
Thanks in advance.