I have problem with custom font on my wordpress site, it works only on homepage but when you go on any subpages like http://domainname.com/about font stop work.
Kindly ask for some help.
Here is css which i use to pass fonts :
@font-face {
font-family: 'TrajanPro-Bold';
src: url("wp-content/fonts/TrajanPro-Bold.otf");
src: url("wp-content/fonts/TrajanPro-Bold.otf?#iefix") format('opentype');
font-weight: bold;
font-style: normal; }
@font-face {
font-family: 'AVENIRNEXT-BOLD';
src: url("wp-content/fonts/AVENIRNEXT-BOLD.OTF");
src: url("wp-content/fonts/AVENIRNEXT-BOLD.OTF?#iefix") format('opentype');
font-weight: bold;
font-style: normal; }
@font-face {
font-family: 'AVENIRNEXT-ITALIC';
src: url("wp-content/fonts/avit.otf");
src: url("wp-content/fonts/avit.otf?#iefix") format('opentype');
font-weight: normal;
font-style: italic; }
@font-face {
font-family: 'AVENIRNEXT-REGULAR';
src: url("wp-content/fonts/AVENIRNEXT-REGULAR.OTF");
src: url("wp-content/fonts/AVENIRNEXT-REGULAR.OTF?#iefix") format('opentype');
font-weight: normal;
font-style: normal; }
@font-face {
font-family: 'JaneAust';
src: url("fonts/JaneAust.ttf");
src: url("wp-content/fonts/JaneAust.ttf?#iefix") format('truetype');
font-weight: normal;
font-style: normal;
}
This is because the URL
wp-content/fonts/TrajanPro-Bold.otf
will be relative to the current page directory.Make the path absolute by adding a leading
slash /
to all the URLs.Example:
/wp-content/fonts/TrajanPro-Bold.otf