Okay
  Public Ticket #455102
Issues with adding cutom web fonts
Closed

Comments

  • Greg Nelson started the conversation
    June 11, 2015 at 7:47am

    I am having problems getting my own custom web fonts to display.

    In my child theme CSS, I am adding the following:

    @font-face {

    font-family: 'gentregular';

    src: url('http://park120oakhills.com/wp-content/themes/salient-child/css/fonts/gentleman-400-light-webfont.eot');

    src: url('http://park120oakhills.com/wp-content/themes/salient-child/css/fonts/gentleman-400-light-webfont.eot?#iefix') format('embedded-opentype'),

    url('http://park120oakhills.com/wp-content/themes/salient-child/css/fonts/gentleman-400-light-webfont.woff2') format('woff2'),

    url('http://park120oakhills.com/wp-content/themes/salient-child/css/fonts/gentleman-400-light-webfont.woff') format('woff'),

    url('http://park120oakhills.com/wp-content/themes/salient-child/css/fonts/gentleman-400-light-webfont.ttf') format('truetype'),

    url('http://park120oakhills.com/wp-content/themes/salient-child/css/fonts/gentleman-400-light-webfont.svg#gentleman-400-light-webfont') format('svg');

    font-weight: normal;

    font-style: normal;

    }


    I then use the following:

    .landing-tagline p {

    color:#fff;

    font-family: 'gentregular', Helvetica, Sans-serif;

    }

    If I follow the links to the font files, they are there, but the page is not loading or displaying them. Please help, thanks!

  •  8,851
    Tahir replied
    June 12, 2015 at 7:46pm

    Hey ,

    Seems to be working perfectly when i add the below css to the browser .

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
    .landing-box h1,.landing-box p {
    font-family: \"gentregular\";
}

    Thanks


    ThemeNectar Support Team 

  • Greg Nelson replied
    June 16, 2015 at 5:03pm

    I did this and it is not working. Is there any way I can just add this to my style.css and make it work?

  •  8,851
    Tahir replied
    June 17, 2015 at 11:04pm

    Hey Again,

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
    .landing-box h1,.landing-box p {
    font-family: \"gentregular\" !important;
}

    Thanks


    ThemeNectar Support Team 

  • Greg Nelson replied
    June 22, 2015 at 1:37am

    If I do this it just sees the font as a serif font. It is not loading the font properly. If you look at the website resources the font is not being loaded.

    I am added the following to my child them style.css, the parent them style.css, as well as the custom css section in the theme settings. None of them are working.

    .landing-box h1,.landing-box p {

    font-family: \"gentregular\" !important;

    }

    @font-face {

    font-family: \'gentregular\';

    src: url(\'http://park120oakhills.com/wp-content/themes/salient-child/css/fonts/gentleman-400-light-webfont.eot\');

    src: url(\'http://park120oakhills.com/wp-content/themes/salient-child/css/fonts/gentleman-400-light-webfont.eot?#iefix\') format(\'embedded-opentype\'),

    url(\'http://park120oakhills.com/wp-content/themes/salient-child/css/fonts/gentleman-400-light-webfont.woff2\') format(\'woff2\'),

    url(\'http://park120oakhills.com/wp-content/themes/salient-child/css/fonts/gentleman-400-light-webfont.woff\') format(\'woff\'),

    url(\'http://park120oakhills.com/wp-content/themes/salient-child/css/fonts/gentleman-400-light-webfont.ttf\') format(\'truetype\'),

    url(\'http://park120oakhills.com/wp-content/themes/salient-child/css/fonts/gentleman-400-light-webfont.svg#gentleman-400-light-webfont\') format(\'svg\');

    font-weight: normal;

    font-style: normal;

    }

  •  8,851
    Tahir replied
    June 22, 2015 at 3:41pm

    Hey Again,

    When i refer to the font i get a cross origin error. See screenshot: http://prntscr.com/7jwk51 . The fix : coderwall.com/p/v4uwyq/firefox-fontface-cross-domain-errors-workarounds .

    Thanks

    ThemeNectar Support Team