Hi,
I had uploaded a custom font file (Bebas Neue) and have assigned it the Menu. It appears correct on the front page, however when I go to any other page it defaults to some weird font. I have tried to assign it to other elements such as title, content etc and again – correct on front page, incorrect on any other pages.
I have uploaded the custom font files, custom css etc. It all seems correct.
Can you advise me in simple terms what I need to do to make the fonts universal across all pages? Let’s use the menu font Bebas Neue as an example. Your directions for uploading custom fonts missed out a thousand steps for a newbie, so it took me all day to figure it out – so please keep it step by step and simple and assume I know nothing about coding. Because I don’t.
Thank you,
David
Hi David,
We updated the documentation for the fonts settings along with newspaper 7 so it shouldn;t have been a hassle at all: https://forum.tagdiv.com/font-customization/
The steps are simple. Download the font, add it in your root wp folder (no path required, just the name of the font in the url field) or a new folder that will require the full path to the font (your browser should download the font if you access the path you type in the field.)
Then name it and select it from the fonts section.
Not too complicated. (I hope). The font you set on pages should affect all pages, not just the homepage. please provide a link to your site so we can inspect the fonts and see why it does not apply across all the site.
Thanks.
Hi, im having troubles with custom fonts too. Can you detail where to upload the custom font? Do I need to change something like css? I followed the guide but I may be doing something wrong. I have my .woff font in my pc. Could you explain as much detailed (even if it’s obvious to you) as you can? Thank you
Hi thanks for the reply.
My site in the making is: http://www.fameymedia.com
The location of the font is: wp-content/themes/Newspaper/images/icons/bebas/bebasneue_bold-webfont.woff
So for a newbie I had no idea where to upload the files, kinda still don’t – so I downloaded the file manager plugin and uploaded the .woff file along with all the files generated by font squirrel webfont generator to wp-content/themes/Newspaper/images/icons/bebas/bebasneue_bold-webfont.woff
I have successfully selected it for the Menu text – but it defaults to an unknown font on all other pages.
Please counter check and if I have missed/need to redo the steps, please let me know in simple terms step by step without missing out any steps.
Looking forward to a solution.
Thanks and regards
David
EDIT Extra
Please note I had @font-face css added for the fonts as per below. Which I have deleted as it didn’t make any difference. I.e the font still displays on the homepage menu text, but not in inner pages.
I also tried to copy the .woff file straight into public_html folder – same thing happened. So I’ve changed it back to the original query.
@font-face {
font-family: ‘webfontregular’;
src: url(‘bebasneue_bold-webfont.woff2’) format(‘woff2’),
url(‘bebasneue_bold-webfont.woff’) format(‘woff’);
font-weight: normal;
font-style: normal;
}
Hi, thanks for replying.
It’s not working.
I’m using FileZilla to upload the woff file. I tried different paths to upload the file and none is working. I don’t know if I’m copying the right path to the woff file . When I paste that path on my browser I got a 404 error page. In the documentation isn’t mentioned that css should be changed đ im a total noob : )
Hi,
There is no need to add css for custom fonts. You can simply add it to the custom fonts section and then selecting it for your elements from the frop-down. I will post here a more specific guide than the documentation for all users to benefit from:
Here is a step by step guide on how to add custom fonts to your content:
1) Download your preferred font but you need to make sure it’s a woff file. If it’s not, you need to search for a tool of converting fonts to a .woff format. (there are free online tools like fontsquirrel.com)
2) Upload your woff file to your server in any path you want (It has to bee inside your main wordpress instalation)
3)Add the full path to your .woff file. A full path looks like this:
http://mydomain.com/wp-content/customfonts/Angeline Vintage_Demo.woff
I created a “customfonts” folder in wp-content
If I were to add the font in the main root directory of wp, the correct path would be this one:
http://mydomain.com/Angeline Vintage_Demo.woff
It needs the absolute path to the font file no matter what folder structure you choose to have.
In order to check if the path you entered is correct, you can copy it into the browser as a standard url and the browser should download the file. If it provides a 404 error, it means the path you entered for your font is incorrect.
4) Add a name to your font in the font family box: http://screencast.com/t/sAr9rRakShu
5) Now your font will appear in the fonts dropdown so you can select it for your preferred elements: http://screencast.com/t/yrxW9kdQ0oH
This method does not require css to work.
@david If custom fonts do not apply to all your pages, there must be some css overwriting the font. Please disable all plugins except visual composer, clear cache and reset cdn files. If this does not fix it, please send us an email at contact@tagdiv.com and provide wp-admin so we can login and inspect the issue.
I hope this helps.
Thank you!
