Tagged: custom font, font, web font
-
AuthorPosts
-
October 28, 2017 at 3:42 am #869797
Hi,
Ive read all the other posts and tried to use a custom hosted webfotn as the h3 but cant get it working, ive uploaded the font files (ttf, woff, woff2) to the enfold/fonts folder and used the following code in quick css section:
@font-face {
font-family: ‘jenna_sueregular’;
src: url(‘fonts/jennasue-webfont.woff2’) format(‘woff2’),
url(‘fonts/jennasue-webfont.woff’) format(‘woff’);
font-weight: normal;
font-style: normal;}
h1,h2,h3 { font-family: ‘jenna_sueregular’ !important; }
Any idea where ive gone wrong?
October 28, 2017 at 10:03 am #869828Tried putting the direct url in too and that didnt work either
October 29, 2017 at 7:20 pm #870182Hi tokenofhon,
Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?
Best regards,
VictoriaOctober 29, 2017 at 11:41 pm #870262This reply has been marked as private.October 31, 2017 at 9:16 pm #870990October 31, 2017 at 11:49 pm #871028This reply has been marked as private.November 3, 2017 at 9:39 pm #872303Hi,
You have had syntax errors
@font-face {
font-family: ‘jenna_sueregular’;
src: url(‘fonts/jennasue-webfont.woff2’) format(‘woff2’),
url(‘fonts/jennasue-webfont.woff’) format(‘woff’);
font-weight: normal;
font-style: normal;
}h1,h2,h3 { font-family: ‘jenna_sueregular’ !important; }’
I would also suggest to give a full URL for the fonts, example with all the domain infront of it.
Thank you
Best regards,
BasilisNovember 5, 2017 at 7:36 am #872703I tried doing it with the full url and had the same issue, it just shows the text in a times new roman style default font
November 6, 2017 at 11:46 am #872978Hi,
Then the font is not imported properly since the search path is likely wrong. Did you verify that it’s correct by actually navigating to the URL of the font? If you get a 404 page then you need to check the URL again.
Best regards,
RikardNovember 6, 2017 at 11:42 pm #873439Yes i have verified the font was imported correctly, when i paste the url in my browser it downloads the font. Also when i paste the url in webfont preview websites it displays correctly
Just for extra confirmation i’ve re-uploaded it with new filenames and below code to match:
@font-face {
font-family: ‘jenna_sueregular’;
src: url(‘http://www.ruthmatoscelebrant.com.au/wp-content/themes/enfold/css/fonts/jenna-webfont.woff2’) format(‘woff2’),
url(‘http://www.ruthmatoscelebrant.com.au/wp-content/themes/enfold/css/fonts/jenna-webfont.woff’) format(‘woff’);
font-weight: normal;
font-style: normal;
}h1,h2,h3 { font-family: ‘jenna_sueregular’ !important; }’
As you can test the path is correct and if you go to http://www.ruthmatoscelebrant.com.au/wp-content/themes/enfold/css/fonts/jenna-webfont.woff it will download the font.
Im honestly puzzled as to why it isnt working
November 9, 2017 at 5:50 am #874415Hi,
Thank you for the info.
You just need to use a more specific selector. ( see private field )
#top h1, #top h2, #top h3 { font-family: 'jenna_sueregular' !important; }
Best regards,
IsmaelNovember 9, 2017 at 7:45 am #874519Perfect, thankyou!
You can mark as solved, cheers
- This reply was modified 7 years ago by tokenofhon.
November 10, 2017 at 5:06 am #874962 -
AuthorPosts
- The topic ‘Adding a custom webfont for h3’ is closed to new replies.