-
AuthorPosts
-
September 27, 2017 at 9:29 pm #857707
Hello, I’ve reviewed countless threads here about using custom fonts with Enfold and I just can’t seem to work. I am trying to use a non Google font, self hosted on the website and do not want to use any plugins. Here is what I’ve done so far:
1) Uploaded and converted the font that I want to use for all headings on the website, as the body text will have a different custom font.
2) Added a fonts folder in my child theme’s directory, and put all the converted font files within that folder.
3) Added the @font-face code into style.css, see code below/** Generated by FG **/ @font-face { font-family: 'Conv_Orator Std Medium'; src: url('fonts/Orator Std Medium.eot'); src: local('☺'), url('fonts/Orator Std Medium.woff') format('woff'), url('fonts/Orator Std Medium.ttf') format('truetype'), url('fonts/Orator Std Medium.svg') format('svg'); font-weight: normal; font-style: normal; }
4) Added the following code into my quick CSS field to try to apply the font to the headings:
h1,h2,h3,h4,h5,h6 { font-family: Conv_Orator Std Medium !important; }
Unfortunately these steps have not changed the heading to the font that is desired. If any assistance could be provided, I appreciate it very much. Please review the private content section for website and FTP login credentials. Thank you!
September 28, 2017 at 12:54 am #857748It seems that it took a while for the font to actually kick it, but it did! So, I’ve got the heading fonts working now. But, if I wanted to do different custom fonts for the normal paragraph text, which code would I use in quick CSS?
September 28, 2017 at 1:41 am #857763i did the same steps now and everything changed to a weird font not the one i upload.
also what is the font(h1,h2,h3,h4..) for the menu items ?
will it work in a bit?September 28, 2017 at 1:44 am #857764That is what happened to me as well, the font changed to something weird that I did not specify but after checking back after 2 hours the font that I specified had been applied to h1-h6.
H1-H6 are the different types of headings on the website, I’m not sure as far as the menu items in the navigation which is what I’m still trying to figure out as well because I need to change that font too.
It will probably update for you in an hour or so. Not sure why it takes time.
September 28, 2017 at 1:47 am #857767Can you give clearer instructions, for someone who is new to all of this.
from child theme, uploading the file(using file-manager in my hosting c-panel?), linking different texts (using the quick css in general styling?) , changing fonts of menu items.
I am very sorry but i have tried and it changed my text to weird fonts, not the one i uploaded.Thank you in advance. :)
September 28, 2017 at 1:54 am #857768That’s okay, let’s see if I can help you with it a bit clearer.
Upload whatever font you want to use on your website to Font Squirrel Converter. You’ll then have to download the font kit after it is finished converting.
Inside that font kit, you’ll have a ‘fonts’ folder which you need to drag to your child theme’s directory. You can choose to put the fonts folder in your child theme’s directory by using FTP or your file manager in cPanel, they both work fine to get the job done.
After this is done, you have to open the style.css file that came with the font package that you downloaded from FontSquirrel. It should’ve already been visible in the package before going into the fonts folder. Copy the code in style.css, and then paste it in the child theme’s style.css file.
So again, you have to copy the code from the style.css file that CAME WITH THE FONT PACKAGE FROM FONTSQUIRREL, and then take that code and paste it in the style.css file THAT EXISTS WITHIN YOUR CHILD THEME’S DIRECTORY.
After that is finished, you have to go into your Theme Options > General Styling > Scroll all the way down to the bottom of the page and paste this code into the Quick CSS section:
h1,h2,h3,h4,h5,h6 { font-family: Conv_Orator Std Medium !important; }
See where it says Conv_Orator Std Medium? You have to replace that with your font-family name which you can view by looking at the code you pasted in your child theme’s style.css file. If you get confused with this part, just paste the code in a reply and I can try my best to identify what the name of the font-family is you’re trying to use.Once that is all said and done, I guess it takes a bit for the changes to take effect. You may try to clear your browser’s history and cache, then try loading up the site again, but not really sure if that will make any of a difference. The admins would probably be able to give a little bit more insight to this than I can
September 28, 2017 at 11:35 am #857958Hi sdsitetechdotcom,
For the paragraphs, you can use something like
.main_color p { font-family: "the one you need"; }
If you need further assistance please let us know.
Best regards,
Victoria -
AuthorPosts
- You must be logged in to reply to this topic.