Defaults fonts display instead of child theme declared ones

  • Resolved dlanebc83

    (@dlanebc83)


    9 years, 2 months ago

    I am new to this and am trying to add 3 fonts i have on my PC for my site to use;
    Helvetica Neue, Din Next Light, San Francisco.

    All font files are located in my child theme folder \wp-content\themes\virtue-child\

    I followed this other post, but for some reason the Virtue defaults are still overriding my child theme style.css? Below is what i have added. When i check the source code of the page in Chrome i can find the entries show Arial as the primary font and not mine. I figure i am missing something simple?

    /* -------- Default site Font -------/*

@font-face {
	font-family: "Helvetica Neue";
	src: url('helveticaneueltstd-lt.otf');
	font-family: "Din Next Light";
	src: url('ufonts.com_din-light.ttf');
	font-family: "San Francisco";
	src: url('system san francisco display regular.ttf');

}
a.brand, .logofont, .kad_tagline, .product_item, .product_details, h1, h2, h3, h4, h5, body,#nav-main ul.sf-menu a, .kad-nav-inner .kad-mnav, .kad-mobile-nav 

.kad-nav-inner li a,.nav-trigger-case

{font-family:"Helvetica Neue", "Din Next Light", "San Francisco", Arial, Helvetica, sans-serif !important;}

}
Viewing 4 replies - 16 through 19 (of 19 total)
  • Thread Starter dlanebc83

    (@dlanebc83)

    Neo
    Thanks for walking me through all that. i finally got the child style.css to load prior to the parent yea!

    function VirtueChild_enqueue_styles() {
		wp_enqueue_style( 'virtue-child', get_stylesheet_directory_uri() . '/style.css');
}
add_action( 'wp_enqueue_scripts', 'VirtueChild_enqueue_styles' );

    this is what i ended up needing otherwise i noticed the code u shared actually ADDED a style.css for the parent prior to the child. I also needed to removed the @import on the child style.css ??

    I have tested this to ensure the child is overiding the parent with system fonts, i used Tahoma as an example and it overode the arial default.

    So with that in mind, I am turning to the fonts i have selected to use to see if there is a problem with them or how they were loaded. I took the fonts on my PC and ran them through this site here

    for testing i have isolated one font (Din Light) and using h1 to test with:

    @font-face {
    font-family: 'din_lightregular';
    src: url('https://www.davidwlane.ca/wp-content/themes/virtue-child/fonts/ufonts.com_din-light-webfont.eot');
    src: url('https://www.davidwlane.ca/wp-content/themes/virtue-child/fonts/ufonts.com_din-light-webfont.eot?#iefix') format('embedded-opentype');
         url('https://www.davidwlane.ca/wp-content/themes/virtue-child/fonts/ufonts.com_din-light-webfont.woff2') format('woff2');
         url('https://www.davidwlane.ca/wp-content/themes/virtue-child/fonts/ufonts.com_din-light-webfont.woff') format('woff');
         url('https://www.davidwlane.ca/wp-content/themes/virtue-child/fonts/ufonts.com_din-light-webfont.ttf') format('truetype');
         url('https://www.davidwlane.ca/wp-content/themes/virtue-child/fonts/ufonts.com_din-light-webfont.svg#din_lightregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

h1 {font-family:'din_lightregular', Tahoma !important;
}

    In this case, Din Light does not load, Tahoma does so i know the theme’s default of Arial is at least being overwritten by my code.

    Troubleshooting i have done:

    1. added mime types as per this post here

    2. Changed the url back to rooth path url('/fonts/ufonts.com_din-light-webfont.eot');

    Not sure what to approach next, but at least i know the child is working, just need to figure out why the font can not be called correctly.

    Change this:

    h1 {
font-family:'din_lightregular', Tahoma !important;
}

    to this:

    h1 {
font-family: din_lightregular, Tahoma;
}

    You only need quotes around a font if the font is two or more words seperated by a space. This – din_lightregular – is actually all one word.
    And leave off the “!important” on all of them. I shouldn’t be necessary.

    Thread Starter dlanebc83

    (@dlanebc83)

    That’s all she wrote. I have it working!!!!!!

    I needed to change back the “‘”at the end of the 4 url lines in the middle instead of the “;” which we changed last night. I also do need the !important or it doesn’t work.

    Just tested it with my other fonts, and its all perfect.
    Thank you for your help !

    You are entirely welcome. Glad to be of assistance. ??

Viewing 4 replies - 16 through 19 (of 19 total)
  • The topic ‘Defaults fonts display instead of child theme declared ones’ is closed to new replies.