Search code examples
htmlcssfont-face

@font-face not working on Chrome or Safari

I use this code to implement a personalized font:

CSS

     @font-face{
    font-family:'playtime';
    src: url('../fonts/font-1.otf') format('opentype');
    }
    p.playtime-font {

    font-family: 'playtime', Verdana, Arial, Helvetica, sans-serif;
    font-size: 3em;
}

HTML

<div class="texto-horario">
        <p class="playtime-font">Horario</p>
    </div>

But it does not work, I've tried it on Chrome and Safari and nothing... I don't know what I am doing wrong please anyone can help me?

Solution

  • Try it without the single quotes:

     @font-face{
    font-family: playtime;
    src: url('../fonts/font-1.otf') format('opentype');
    }
    p.playtime-font {
    font-family: playtime;
    font-size: 3em;
}

    If this doesn't work, is your console saying anything?