There is no special place for it, but sure you can do this as with classic webpages. Best would be probably to do it in child theme, add your font definitions in style.css in child theme, and add fonts files also in child theme.
Will you able to do it this way? Did you get some instructions will your fonts how they should be embedded?
I too have some questions about this. As I am fairly ok with CSS, I managed to get some elements to work with a self hosted font from MyFonts, but not all. This is bothering me.
I have followed instructions: Put MyFontsWebfontsKit.css and the font folder in root of the site, and put a reference to this in head tag on all pages. The problem comes when it seems the theme default font family is overriding the CSS i put in custom CSS. I tried referring this font to body and p in custom CSS with no result. My dream scenario would be that my webfont could take over the role as default font family. I also tried to add a reference to a class I put in style.css in my child theme to a VC Custom heading or Text block, but that did not work. The strange thing is that I managed to change the font for the menu, but it is only showing the correct font on the frontpage, not on other pages.
If you have time to help, I would be most thankful.
How theme fonts are assigned to various elements can be seen in user.css file - it is generated from theme settings you choose.
I would advice first to switch all theme fonts to some default system font, like Arial for example. Next you will have to assign your new font to elements, by adding below CSS in custom CSS filed, so it will overwrite theme styles.
/* Titles and titles alike font */ h1,h2,h3,h4,h5,h6, h1 a,h2 a,h3 a,h4 a,h5 a, h6 a, .page-title, .widget .title{ font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif, sans-serif; }
Hi! Thanks for your explanation. This is pretty much what I had done, but it cleared things up. I found the reason why my font was only showing on front page. I had forgotten to put an absolute url on the font reference. Silly mistake.
For other people who have bought fonts from MyFonts, who don't know how to start, this is how I did it:
1. Upload the file MyFontsWebfontsKit.css and the folder called "webfonts" to the root of the site. You can put it in a folder as well, but remember to add the full path in point 3 below. 1. Install the plugin "Head, Footer and Post Injections" (or similar solutions to add custom code in the head tag). 2. Go to Settings > Header and footer 3. In the field "HEAD SECTION INJECTION", insert the code you got from MyFonts. It will look something like this: link rel="stylesheet" type="text/css" href="MyFontsWebfontsKit.css" (with brackets before and after). Remember to add your site url (path) before /MyFontsWebfontsKit.css (so the entire site will be able to access it). 4. Follow Air's instructions above.
Comments
There is no special place for it, but sure you can do this as with classic webpages. Best would be probably to do it in child theme, add your font definitions in style.css in child theme, and add fonts files also in child theme.
Will you able to do it this way?
Did you get some instructions will your fonts how they should be embedded?
With kind regards.
I have followed instructions: Put MyFontsWebfontsKit.css and the font folder in root of the site, and put a reference to this in head tag on all pages. The problem comes when it seems the theme default font family is overriding the CSS i put in custom CSS. I tried referring this font to body and p in custom CSS with no result. My dream scenario would be that my webfont could take over the role as default font family. I also tried to add a reference to a class I put in style.css in my child theme to a VC Custom heading or Text block, but that did not work. The strange thing is that I managed to change the font for the menu, but it is only showing the correct font on the frontpage, not on other pages.
If you have time to help, I would be most thankful.
How theme fonts are assigned to various elements can be seen in user.css file - it is generated from theme settings you choose.
I would advice first to switch all theme fonts to some default system font, like Arial for example.
Next you will have to assign your new font to elements, by adding below CSS in custom CSS filed, so it will overwrite theme styles. You just have to change font-family value for your font name.
This should help you:-)
We definitely will have to add some option for user font in future, cause you are right - it is not easy, if you don't know where to look for.
With kind regards.
For other people who have bought fonts from MyFonts, who don't know how to start, this is how I did it:
1. Upload the file MyFontsWebfontsKit.css and the folder called "webfonts" to the root of the site. You can put it in a folder as well, but remember to add the full path in point 3 below.
1. Install the plugin "Head, Footer and Post Injections" (or similar solutions to add custom code in the head tag).
2. Go to Settings > Header and footer
3. In the field "HEAD SECTION INJECTION", insert the code you got from MyFonts. It will look something like this: link rel="stylesheet" type="text/css" href="MyFontsWebfontsKit.css" (with brackets before and after). Remember to add your site url (path) before /MyFontsWebfontsKit.css (so the entire site will be able to access it).
4. Follow Air's instructions above.
Then you are A OK.
With kind regards.