Custom Font Help

Hi Themeco

Need some custom font help please.

I am using Themeco X (not Pro)

I uploaded the custom fonts to my x-child/fonts folder.

I added the @font-face code to the style.css file in the x–child folder.

I added <link rel="stylesheet" type="text/css" href="style.css"> to the style.css file inside the x-child folder.

I tested my edits and all the fonts on the page turned to Arial, not to the custom font.

I wrote specific style code to just the Timesheets button and its font changed to Times Roman.

I had full paths to the font folder for the src:url and to the url and that didn’t work.

I edited the url to be just the ‘fontsfolder/fonts are here’ folder and that doesn’t work.

I did not rename my style sheet to custom.css, I am using style.css in the x-child folder.

Not sure if it is a folder path issue.

Can you please point me in the right direction?

Thanks ever so much.

The URL and Credentials are in the Notes Section.

Hello Pam,

Thanks for writing in!

You do not need this line.
<link rel="stylesheet" type="text/css" href="style.css">

I have checked your child theme and there is no indication that you have upload the font files in the child theme. If you visit each font url, it results to a 404:

Have your code updated and use this:

/*

Theme Name: X – Child Theme
Theme URI: http://theme.co/x/
Author: Themeco
Author URI: http://theme.co/
Description: Make all of your modifications to X in this child theme.
Version: 1.0.0
Template: x

*/




@font-face {
  font-family: 'Atlas Grotesk Web';
  src: url('https://wvintranet.ixd.kqr.mybluehost.me/wp-content/themes/x-child/fonts/AtlasGrotesk-BlackItalic-Web.eot');
  src: url('https://wvintranet.ixd.kqr.mybluehost.me/wp-content/themes/x-child/fonts/AtlasGrotesk-BlackItalic-Web.eot?#iefix') format('embedded-opentype'),
  url('https://wvintranet.ixd.kqr.mybluehost.me/wp-content/themes/x-child/fonts/AtlasGrotesk-BlackItalic-Web.woff2') format('woff2'),
  url('https://wvintranet.ixd.kqr.mybluehost.me/wp-content/themes/x-child/fonts/AtlasGrotesk-BlackItalic-Web.woff') format('woff');
  font-weight: 900;
  font-style: italic;
  font-stretch: normal;
}

.AtlasGrotesk-BlackItalic-Web {
  font-family: 'Atlas Grotesk Web';
  font-weight: 900;
  font-style: italic;
  font-stretch: normal;
}

By the way, please be advised that you can also use the Font Manager to upload the font and add the font to your X site without adding any single code. Please check out the Font Manager and how you can upload a custom font here:

Hope this helps.

Hi Rue,

Thank you for your reply. I had to chmod the permissions on the font folder; it was 0700 and I changed it to 755 so now the font folder and fonts are reachable. Thank you for pointing that out.

I also corrected the style.css file and removed the <link rel .... > line.

I inserted the full path to the url calls in the fontface code - but it still is not working.

Still not sure what to do next. I think the font is reverting to Arial because I have not assigned a body font which I think they want Libre Baskerville in addition to the custom fonts.

Thank you Rue. I will keep working on it.

Hello Pam,

Your custom font does not work if you depend on the child theme’s style.css. Please understand that this is the heirarchy of the styles being applied to the site.

- Theme's stack style.css
- Child theme's style.css
- WordPress Additional Style (Appearance > Customize > Additional CSS)
- Theme Options settings
- Theme Option's Custom CSS. 

Your child theme’s style.css were clearly overridden with the Theme Option’s typography settings, X > Theme Options > Typography. It is best that you use the Font Manager and select the font families through the typography setting which is in X > Theme Options > Typography.

Hope this makes sense.

Thank you Rue. I got the custom font for headings and Libre Baskerville for body to work. Now I just need to customize the font sizes and heights. I will try to do that using the Theme Options Custom CSS.

Thank you again for your help.

You’re welcome, Pam. Glad we’re able to help.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.