@font-face is uploading fonts that can not be applied to my project

Question

I am loading several fonts through @font-face.

According to the inspector, these fonts are being loaded to my text, however the font is not actually changing.

I've run these fonts through fontsquirrel.com and received the same result.

Currently, my script is as follows:

<style>
    @font-face {
        font-family: 'aquaFont';
        src: url('/fonts/aqua.ttf') format('ttf');
    }

    .page-header h1{
        font-family: 'aquaFont' !important;
    }
</style>

<div class="page-header">
    <h1><?php the_field('floor_plan_title'); ?></h1>
</div>

The Chrome and Firefox inspectors recognizes the selected font, however does not update the text accordingly.

I've run 7 different .otf and .ttf fonts through this script, and have experienced the same result for each of them.

Attached here is a screenshot of the chrome inspector referencing the 'aquaFont' but displaying the default Serif font.

Answer 1

Just convert .ttf font to all font types by using https://transfonter.org/, so that fonts support for all browser.

 <style>
    @font-face {
        font-family: 'aquaFont';
        src: url('/fonts/aqua.ttf')  format("ttf");
        src: url('/fonts/aqua.woff') format("woff");
        src: url('/fonts/aqua.otf') format("otf");
        src: url('/fonts/aqua.eot') format("eot");
    }

    .page-header h1{
        font-family: 'aquaFont' !important;
    }
</style>

<div class="page-header">
    <h1><?php the_field('floor_plan_title'); ?></h1>
</div>