Can't get custom fonts to show using @font-face

I am using @font-face to try and get the font 'Archisto' to load on my webpage. I am a newbie on building web pages and using @font-face. I followed all the steps on several tutorials and looked through several threads on here, but I can not get the font to load.

I have the css file uploaded in the folder

I have the font file uploaded in the folder

The @font-face code in the .css file looks like this:

@font-face { font-family: Archistico; src: url();
}

I am calling the font with custom CSS that looks like this:

.page-content h5{ font-family: 'Archistico' !important; font-size: 50px !important; display: inline !important; color: #231400 !important;
}

The page I am trying to get this to work on is:

I would really appreciate your help!

2 Answers

1- Add to the head section of web page.<link href="//" rel="stylesheet" type="text/css"/>

-2 Using @import CSS directive, put the following line in add to your css file.(http | https)

@import url(//);

-3 Use font-face declaration Fonts.(http | https)

@font-face {font-family: "Archistico"; src: url("//"); src: url("//") format("embedded-opentype"), url("//") format("woff2"), url("//") format("woff"), url("//") format("truetype"), url("//") format("svg"); }

Let me know if this works for you :) Thanks

Have you tried it with a relative url? I'm thinking of a CORS (Cross-Origin Resource Sharing) problem.

@font-face { font-family: Archistico; src: url('../fonts/FONT_11.TTF');
}