Tagged: custom font, non google font
-
AuthorPosts
-
July 6, 2018 at 3:05 am #981801
I am trying to add a custom font to my site called brotherhood ( its not a google font)
I have uploaded the font to a “fonts” folder in my child theme
( if I add it to the main theme folder it will get deleted when I update the theme)
I looked at the https://justcreative.com/2013/01/22/how-to-use-custom-fonts-with-font-face-on-wordpress/
but he only says to put the font in a folder and add some custom code to the style.cssbut doesnt say where to put the Source code
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on July 5, 2018 */
@font-face {
font-family: ‘wp-content/themes/enfold-child/font/brotherhood_scriptregular’;
src: url(‘wp-content/themes/enfold-child/font/brotherhood_script-webfont.woff2’) format(‘woff2’),
url(‘wp-content/themes/enfold-child/font/brotherhood_script-webfont.woff’) format(‘woff’);
font-weight: normal;
font-style: normal;}
I dont seem to be able to find any writtings that say exactly what to do with putting custom code in Enfold Theme.
Is there a document that explains this properly ( as I see many asking and each answer is different)
thanks
- This topic was modified 6 years, 4 months ago by wealthyone.
July 6, 2018 at 3:16 am #981805oh and I added this to the custom CSS
‘/* Add new font Brotherhood */
h1, h2, h3, h4, h5, h6 {
font-family: ‘brotherhood’ great vibes;
}’This was the font I uploaded to the font directory
brotherhood_script-webfont.ttf- This reply was modified 6 years, 4 months ago by wealthyone.
July 8, 2018 at 4:59 pm #982722Hi wealthyone,
Here are some threads to consider:
If you need further assistance please let us know.
Best regards,
VictoriaJuly 9, 2018 at 12:50 pm #983079As mentioned above, these are NOT a google font
( its not a google font)and I have Version: 4.2 Enfold and do NOT see a “Custom font manager”
Would like help with Non google fonts
Have uploaded new 4.4.1 theme
will check it out and see if I can get it working with a NON google font- This reply was modified 6 years, 4 months ago by wealthyone.
July 9, 2018 at 5:33 pm #983254Hi,
Please post us your login credentials (in the “private data” field), so we can take a look at your backend.
- Install and activate ” Temporary Login Without Password “.
- Go to ” Users > Temporary Logins ” on the left-side menu.
- Click ” Create New “.
- Add the email address for the account ( you can use (Email address hidden if logged out) ), as well as the ” Role ” making that the highest possible and the expiry about four days
( do be sure that we have enough time to debug ). - Click ” Submit “.
- You’ll now have a temporary account. Please provide us here in the private section the URL, so we can login and help you out.
When your issue is fixed, you can always remove the plugin!
If you prefer to not use the plugin, you can manually create a admin user and post the login credentials in the “private data” field.Best regards,
BasilisJuly 10, 2018 at 3:51 am #983467unfortunately this site is on a local dev account so can not be accessed via the net.
Is there not documented way to do this as if you do it then how can I repeat it when I want to do it again??
I managed to Uplaod the fonts..
So what code and where do I use to make this activeI have this in my Style.css
/*Headings*/
h1, h2, h3, h4, h5, h6 {
font-family: ‘wp-content/themes/enfold-child/font/brotherhood_scriptregular’;
src: url(‘wp-content/themes/enfold-child/font/brotherhood_script-webfont.woff2’) format(‘woff2’),
url(‘wp-content/themes/enfold-child/font/brotherhood_script-webfont.woff’) format(‘woff’);
font-weight: normal;
font-style: normal;
}and in the custom CSS I have
/* Add new font Brotherhood */
h1,h2,h3,h4,h5,h6,body p { font-family: ‘brotherhood_script’ !important; }AND I did try this code as well
h1,h2,h3,h4,h5,h6,body p { font-family: ‘brotherhood_script-webfont’ !important; }
- This reply was modified 6 years, 4 months ago by wealthyone.
July 10, 2018 at 2:32 pm #983695I am struggling with a similar thing. it seems any code that I add to styles.css in the child theme doesn’t override the code from the parent. I have used WordPress built-in CSS editor from the frontend and it worked fine. Although I want it all in the same place where I can make changes freely. I am hoping to see Wealthyone’s answer will help me understand what I am miss understanding.
July 10, 2018 at 6:23 pm #983754Hi joshuamadrid,
Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?
What code are you trying to add?
Best regards,
VictoriaJuly 10, 2018 at 6:44 pm #983769I can’t I made a post in a different thread but thank you
- This reply was modified 6 years, 4 months ago by joshuamadrid.
July 11, 2018 at 2:05 am #983942Victoria This was my post so can I have the help please to get this sorted.
Seems we are both having the same problem with the same things we have tried..- This reply was modified 6 years, 4 months ago by wealthyone.
July 11, 2018 at 5:53 am #984033Hi wealthyone,
Thanks for the feedback. Did you try to use the absolute URL when importing your font? Something like http://localhost/project/wp-content/themes/child-theme/fonts/font.ttf. Make sure that it works first by navigating to the file in question using your browser.
Best regards,
RikardJuly 11, 2018 at 7:27 am #984048Yes I did and still nothing
Is the code I posted correct tho?
Or is there something I am missing..Is it documented here somewhere exactly how to install a NON google font as all I can find is Google font instructions
.
July 11, 2018 at 12:14 pm #984179Hi,
No we don’t have any documentation on that since it’s general web development, it’s not theme specific. Some of your code doesn’t look very good, this for instance:
‘/* Add new font Brotherhood */ h1, h2, h3, h4, h5, h6 { font-family: ‘brotherhood’ great vibes; }’
The two single quotes at the start and end should go, and you should check the name of the font. Also separate the font names with commas.
About where you are putting your CSS; are you sure that the file is adding other CSS on the site? If not then that is the first thing to check.
Best regards,
RikardJuly 11, 2018 at 12:25 pm #984189What quotes are on the start and end?
do you mean ‘ ‘
then I have taken that off in comments since then
That was my attempt to put the code in a box like yours aboveSo the new code is ( as I posted ) after a long discussion listed above on
July 10, 2018 at 3:51 amSo since having written that I have checked the font name and the other code in the custom CSS is still not working
For something that has many members here concerned or not sure what to do, there seems to be no info that I can find. and if what is there is not complete.
Surely if we didnt go back and forth so many times with many different Mods suggesting things that have already been answered, then this can be solved for so many members.
July 12, 2018 at 5:32 am #984485Hi,
Thanks for the feedback. If you do a simple search on Google you can find thousands of resources for this topic. I pointed this out earlier, it’s not something theme specific, this is general WordPress/web development. We’d be happy to help you out, but unless we can actually inspect your code/site then it’s very difficult to help you out unfortunately. My advise would be to check the names and URLs you are using, then inspect an element on the front end which should be using the CSS, and check if it’s applying or being overridden. If it’s overridden then you might need to use the !important statement in your CSS.
Best regards,
RikardJuly 12, 2018 at 7:01 am #984527ok when it goes to a live host I will let you know
thanksJuly 12, 2018 at 7:53 am #984553Hi,
Great, let us know when you have something which we can look at.
Best regards,
RikardAugust 10, 2018 at 11:00 am #995900OK sorry for the long delay
I am now back and have added a loging for you.
could you please have a look and let me know why the font ( outside of google fonts ) is not working
the font is brotherhood and it has been uploaded to the child/font directorycode in stylesheet is
/*Headings*/
h1, h2, h3, h4, h5, h6 {
font-family: ‘https://www.petaselegantcakes.com.au/wp-content/themes/enfold-child/font/brotherhood_scriptregular’;
src: url(‘https://www.petaselegantcakes.com.au/wp-content/themes/enfold-child/font/brotherhood_script-webfont.woff2’) format(‘woff2’),
url(‘https://www.petaselegantcakes.com.au/wp-content/themes/enfold-child/font/brotherhood_script-webfont.woff’) format(‘woff’);
font-weight: normal;
font-style: normal;
}and in Quick CSS is
/* Add new font Brotherhood */
h1,h2,h3,h4,h5,h6, body p { font-family: ‘brotherhood_script-webfont’ !important; }I appreciate the help..
thankyouAugust 10, 2018 at 11:03 am #995901oh and the 3 fonts uploaded are
brotherhood_script-webfont.ttf
brotherhood_script-webfont.woff
brotherhood_script-webfont.woff2and sorry an update to the stylesheet is
/*Headings*/
h1, h2, h3, h4, h5, h6 {
font-family: ‘https://www.petaselegantcakes.com.au/wp-content/themes/enfold-child/font/brotherhood_script-webfont.ttf’;
src: url(‘https://www.petaselegantcakes.com.au/wp-content/themes/enfold-child/font/brotherhood_script-webfont.woff2’) format(‘woff2’),
url(‘https://www.petaselegantcakes.com.au/wp-content/themes/enfold-child/font/brotherhood_script-webfont.woff’) format(‘woff’);
font-weight: normal;
font-style: normal;
}August 11, 2018 at 8:57 pm #996335Hi,
As font-family cant be the url of the font.
Please look below how to use the font-family pleaseLet us know if there is anything else we can help after
Best regards,
BasilisAugust 12, 2018 at 9:40 am #996424Thanks
That still isnt workingI gave my login details as Rikard said he could help by looking at code.
Thanks
August 14, 2018 at 8:40 am #997004Hi.
I saw someone ( from Enfold Support) logged into my site a day ago and wondering if you had any luck finding the error with the font.Thanks
August 14, 2018 at 9:29 am #997011Hi,
I configured the font files in your child theme style.css. I had to use this code:
@font-face { font-family: 'Brotherhood-Script'; src:url('https://petaselegantcakes.com.au/wp-content/themes/enfold-child/font/brotherhood_script-webfont.woff') format('woff'), url('https://petaselegantcakes.com.au/wp-content/themes/enfold-child/font/brotherhood_script-webfont.woff2') format('woff2'), url('https://petaselegantcakes.com.au/wp-content/themes/enfold-child/font/brotherhood_script-webfont.ttf') format('ttf'); font-weight: normal; font-style: normal; } #top #wrap_all h1, #top #wrap_all h2, #top #wrap_all h3, #top #wrap_all h4, #top #wrap_all h5, #top #wrap_all h6 { font-family: 'Brotherhood-Script'; font-weight: normal; font-style: normal; }
Best regards,
DudeAugust 14, 2018 at 9:29 am #997012Hi,
Please don’t forget to clear your browser cache if you don’t notice any changes!
Best regards,
DudeAugust 14, 2018 at 11:30 am #997034Dude. you are the best
thankyou so muchSo many people have a lot of trouble with fonts outside of google fonts.
This should be posted somewhere so everyone can use itAugust 14, 2018 at 12:01 pm #997042Dude
on a side note. I came across this great Font Resizer.
Is there any code I can use to put it in the Extra Elements Socket Bar ( top) of the enfold theme?
ThanksAugust 14, 2018 at 3:02 pm #997122Hi wealthyone,
The code given to you be Peter is basic css knowledge, it is not really theme related and very available anywhere on the Internet.
What do you mean here?
I came across this great Font Resizer.
Any code I can use to put it in the Extra Elements Socket Bar ( top) of the enfold theme?Best regards,
VictoriaAugust 15, 2018 at 12:35 am #997385I understand it is NOT theme related, but if you look at these support questions, there are many many asking for the same help and so many are just told ” go research it on the net, its out there”
If this was made available to everyone somehow in here or in the Doc’s then there would be far less questions asking what the code is etc etc.
It was only a suggestion and something that the original owners of these themes should think aboutAnd You will notice I addressed it to Dude ( didnt know his name was Peter) ( who answered and fixed a problem I had ) and he will know the answer.
Maybe he will come back and help me with the code for that as well.Thanks
August 15, 2018 at 10:58 am #997501Hi wealthyone,
If anyone tries to build a website even on WordPress he/she has to have some basic html and css knowledge and/or be willing to learn, because you cannot do it well without this basic knowledge.
We are here to help you guys with the issues with the theme and not teach you the basics.
I’ll assign this to Peter for you.
Best regards,
Victoria -
AuthorPosts
- You must be logged in to reply to this topic.