@font-face fonts not displaying

Hi! I am a new developer and I am having issues with my website’s fonts displaying correctly.
They are showing up correctly on Chrome, but once I try Safari and Firefox, they are not showing up.
I looked it up and I still can’t understand what I am doing wrong. I would love your feedback.
Here’s a link to my site: http://aperitivo.com.mx/

Here’s also how I am listing my fonts in my CSS doc:

@font-face {
    font-family: "Montserrat-Medium";
    src: url('fonts/Montserrat-Medium.ttf') format("truetype");
    font-family: "Montserrat-Bold";
    src: url('fonts/Montserrat-Bold.ttf') format("truetype");
    font-family: "DMSerifDisplay-Regular";
    src: url('fonts/DMSerifDisplay-Regular.ttf') format("truetype");
    font-family: "DMSerifDisplay-Italic";
    src: url('fonts/DMSerifDisplay-Italic.ttf') format("truetype");
}

Thank you!

Hi @prettierinmyhead, so different browsers supports different font formats, to add custom font to website and to have correct displaying on every browser you have to generate your font. Try using webfont-generator which will help you to generate different formats for them to display correctly in every browser,

1 Like

Thank you! I tried just adding the new formats and it’s still not working. This is what my code looks like now:

@font-face {
    font-family: "Montserrat-Medium";
    src: url('/public_html/fonts/Montserrat-Medium.ttf') format("truetype"),
         url("/public_html/fonts/montserrat-medium-webfont.woff2") format("woff2"),
         url("/public_html/fonts/montserrat-medium-webfont.woff") format("woff");
    font-family: "Montserrat-Bold";
    src: url('/public_html/fonts/Montserrat-Bold.ttf') format("truetype"),
         url("/public_html/fonts/montserrat-bold-webfont.woff2") format("woff2"),
         url("/public_html/fonts/montserrat-bold-webfont.woff") format("woff");
    font-family: "DMSerifDisplay-Regular";
    src: url('/public_html/fonts/DMSerifDisplay-Regular.ttf') format("truetype"),
         url("/public_html/fonts/dmserifdisplay-regular-webfont.woff2") format("woff2"),
         url("/public_html/fonts/dmserifdisplay-regular-webfont.woff") format("woff");
    font-family: "DMSerifDisplay-Italic";
    src: url('/public_html/fonts/DMSerifDisplay-Italic.ttf') format("truetype"),
         url("/public_html/fonts/dmserifdisplay-italic-webfont.woff2") format("woff2"),
         url("/public_html/fonts/dmserifdisplay-italic-webfont.woff") format("woff");

I also have this declaration on my HTML:

<head>
    <title>Aperitivo - Marketing para restaurantes</title>
    <link href="/css/stylesheet.css" rel="stylesheet" type="text/css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Montserrat:wght@500;700&display=swap" rel="stylesheet">
</head>

I appreciate your help! I’ve tried many things but nothing seems to work.

1 Like

Sorry that didn’t work, to be honest I prefer to use Google fonts, it so seamless and much easier to work with. Maybe try to find something as close to your fonts so that you can work with it.

Not at all, thanks for replying so fast and engaging with my first post here. All of them are Google fonts, maybe I am just not adding them correctly.

1 Like

Oh they are ! So why don’t you just ink them all in your HTML head then use them as needed. I thought that these were your own fonts that you wanted to use.

1 Like