I have a couple of fonts that are not part of Google Fonts that I’d like to use in my site. I’ve seen several threads about this, but I don’t know anything about CSS, so they’re all over my head. I attempted to follow the instructions to upload the font files into a “fonts” folder in my wp-content/themes directory and then edit CSS, but was not successful- probably because I have no idea what I’m doing :-) Any advice?
Many thanks!
Hi Thesixthpoint
Sorry we weren’t able to reply sooner.
Can you perhaps reply with the CSS you attempted to use so we can see where you’ve gone wrong?
I’ve tried about eight times, but here is my most worthy attempt (I think!):
@font-face { font-family: Parker; src: url("/wp-content/themes/fonts/parker.ttf") format("truetype"); font-weight: normal; font-style: normal; } h1, h2, h3, h4, h5, h6 { font-family: Parker; }When I tried this, it did change the font. It just didn’t change it to Parker.
I have uploaded two different fonts into the “fonts” folder. I’m not entirely sure which one I want to use where, but Parker is definitely more straightforward. (The other one has multiple files and formats, and a “web kit” that seems to further complicate things.) Is there a way to get these fonts to show up in the Appearance > Customize options (i.e. in the font list along with the rest of the Google fonts)?
These fonts won’t show up in the Customizer you’ll need to use Custom CSS to deploy them.
This URL must be absolute, right now it’s relative:
Change that to the full path.
Once that’s done, if there are problems, please, send a link to your site. You can use Private Reply bottom right to keep that private. Thanks.
This is a private message.
Are you certain the font is available? This URL doesn’t resolve:
Private Snippet
The URL used in Custom CSS should lead to the file if we navigate directly to it.
Lastly, move the @font-face rule to the very top of your Custom CSS.
This is a private message.
Here is how to use the premium font:
1. Upload the “fonts” folder to your server.
2. Insert the CSS provided at Appearance > Custom CSS right at the top:
/* @import must be at top of file, otherwise CSS will not work */@import url("//hello.myfonts.net/count/2efbe5"); @font-face {font-family: 'DolceCaffe-Regular';src: url('webfonts/2EFBE5_0_0.eot');src: url('webfonts/2EFBE5_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/2EFBE5_0_0.woff2') format('woff2'),url('webfonts/2EFBE5_0_0.woff') format('woff'),url('webfonts/2EFBE5_0_0.ttf') format('truetype');}Then, replace every URL with your full URL. So assuming you uploaded the “fonts” folder to your “themes” folder, your Custom CSS would look as follows:
/* @import must be at top of file, otherwise CSS will not work */@import url("//hello.myfonts.net/count/2efbe5");@font-face {font-family: 'DolceCaffe-Regular';src: url('http://thesixthpoint.org/wp-content/themes/fonts/webfonts/2EFBE5_0_0.eot');src: url('http://thesixthpoint.org/wp-content/themes/fonts/webfonts/2EFBE5_0_0.eot?#iefix') format('embedded-opentype'),url('http://thesixthpoint.org/wp-content/themes/fonts/webfonts/2EFBE5_0_0.woff2') format('woff2'),url('http://thesixthpoint.org/wp-content/themes/fonts/webfonts/2EFBE5_0_0.woff') format('woff'),url('webfonts/2EFBE5_0_0.ttf') format('truetype');}Then below that, add:
h1, h2, h3, h4, h5, h6 { font-family: 'DolceCaffe-Regular';}Got it. That worked. Thank you so much for your help!
Awesome :) Glad we could help.
All the best.