Custom font not working

  • Resolved chloeponee

    (@chloeponee)


    1 year, 9 months ago

    Hi, I’m trying to get a custom font family (Poppins) to work on my website, but no luck. I managed to add another font (Passion to Action) to my website a few years ago , but this time I can’t get it to work for Poppins.

    I’m working on a subdomain- not sure if that makes a difference?

    This is the code I added to the customizer in WordPress: 

    @font-face {
	font-family: 'Poppins';  
	src: url('public_html/wp-content/themes/ChloeCake/enoki/fonts/Poppins-Regular.otf') format('otf'), font-weight: 400, font-style: normal;
	
	src: url('public_html/wp-content/themes/ChloeCake/enoki/fonts/Poppins-Light.otf') format('otf'), font-weight: 200, font-style: normal;
	
	src: url('public_html/wp-content/themes/ChloeCake/enoki/fonts/Poppins-Medium.otf') format('otf'), font-weight: 600, font-style: normal;
	
}

    Thanks!

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)
  • Thread Starter chloeponee

    (@chloeponee)

    This is the font family that did work:

    @font-face {
  font-family: "Passion-To-Action";
	src: local("passiontoaction");
  src: url('/wp-content/uploads/fonts/passiontoaction.otf') format("opentype");  
}

    But I don’t remember if I did anything else at the time, aside from adding this to the custom CSS in the customizer.

    Try this:

    @font-face {
  font-family: 'Poppins';
  src: local('Poppins Regular'), url('public_html/wp-content/themes/ChloeCake/enoki/fonts/Poppins-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: local('Poppins Light'), url('public_html/wp-content/themes/ChloeCake/enoki/fonts/Poppins-Light.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: local('Poppins Medium'), url('public_html/wp-content/themes/ChloeCake/enoki/fonts/Poppins-Medium.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
}
    Thread Starter chloeponee

    (@chloeponee)

    Hi, thanks for your reply. Unfortunately that did not do the trick. I’ve applied it now to the website as you can see in the inspector.

    I’ve also tried the !important attribute to the tags I applied the font to, such as the p tags, but that didn’t work either.

    Any other ideas?

    Can it be related to the fact that I’m working on a subdomain of my website?

    Although the Passion to Action font does work, and it sits in the same folder as the Poppins font…

    The sub-domain should not be an issue. I updated the CSS so that is locates the fonts in the same folder as the working font you mentioned. Make sure you upload Poppins-Regular.otf, Poppins-Light.otf, and Poppins-medium.otf, to the wp-content/uploads/fonts folder. 

    @font-face {
  font-family: 'Poppins';
  src: local('Poppins Regular'), url('/wp-content/uploads/fonts/Poppins-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: local('Poppins Light'), url('/wp-content/uploads/fonts/Poppins-Light.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: local('Poppins Medium'), url('/wp-content/uploads/fonts/Poppins-Medium.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
}
    Thread Starter chloeponee

    (@chloeponee)

    This is what I tried earlier as well, but it doesn’t work, which is why I tried a different folder.

    That’s why I’m so confused why it doesn’t seem to work for this font.

    Maybe it has to do with the way I applied the font to the tags? For example, this is how I used the font in my p tag:

    p {
    font-family: poppins;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;

    }

    try a capital P in Poppins

    It doesn’t look like you uploaded the fonts, I get a 404 error when I try to load the font directly: https://test01.mug-cakes.nl/wp-content/uploads/fonts/Poppins-Regular.otf

    Thread Starter chloeponee

    (@chloeponee)

    I made the mistake of putting the fonts in the folder of the main domain, instead of the folder of the subdomain I’m working on. Now it has been fixed. Thank you ??

    Simple mistake that is overlooked at times and on the verge of loosing your sanity…it happens lol. Glad you figured it out.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Custom font not working’ is closed to new replies.