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!

3

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

1

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');
}

0

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.