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

1
votes

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 http://www.unfoldmyworld.com/wp-content/themes/ashe/assets/css/Archistico.css

I have the font file uploaded in the folder http://www.unfoldmyworld.com/wp-content/themes/ashe/assets/fonts/FONT_11.TTF

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

@font-face {
    font-family: Archistico;
    src: url(http://www.unfoldmyworld.com/wp-content/themes/ashe/assets/fonts/FONT_11.TTF);

}

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: www.unfoldmyworld.com

I would really appreciate your help!

2
csswordpressfontsfont-face
Did you check whether your font is getting downloaded to the browser in the network tab? Also add format('truetype') after url in src. - Jebin
@jebin I added the format('truetype'). It did not change anything. Also, the font is not being downloaded to the browser! - Denise
What error are you getting in the network? Does it say mixed-content, or any other error? Is it even showing in the list of fonts being downloaded? - Jebin

2 Answers

1
votes

1- Add to the head section of web page.<link href="//db.onlinewebfonts.com/c/50f290d070f58bdf56e1cc32e5636174?family=Archistico" rel="stylesheet" type="text/css"/>

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

@import url(//db.onlinewebfonts.com/c/50f290d070f58bdf56e1cc32e5636174?family=Archistico);

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

@font-face {font-family: "Archistico"; src: url("//db.onlinewebfonts.com/t/50f290d070f58bdf56e1cc32e5636174.eot"); src: url("//db.onlinewebfonts.com/t/50f290d070f58bdf56e1cc32e5636174.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/50f290d070f58bdf56e1cc32e5636174.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/50f290d070f58bdf56e1cc32e5636174.woff") format("woff"), url("//db.onlinewebfonts.com/t/50f290d070f58bdf56e1cc32e5636174.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/50f290d070f58bdf56e1cc32e5636174.svg#Archistico") format("svg"); }

Let me know if this works for you :) Thanks

0
votes

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