Custom Font with Font Face

  • Resolved saffronb

    (@saffronb)


    5 years, 1 month ago

    Hi Everyone,

    I’m trying to install a custom font to my page and am ready to tear my hair out.

    I have tried pasting the font-face code into the CSS section of the Responsive Customize area. But it doesn’t seem to be picking up on the font (I’ve saved the relevant font files to my cpanel). Here is the code I’ve used:

    @font-face {
    font-family: “TrueNorth”;
    src: url(“www.homefromhomepetcare.co.uk/wp-content/Font/3AC3A6_0_0.ttf”) format(‘truetype’);
    src: url(‘www.homefromhomepetcare.co.uk/wp-content/Font/3AC3A6_0_0.eot’);
    src: url(“www.homefromhomepetcare.co.uk/wp-content/Font/3AC3A6_0_0.woff”) format(‘woff’);
    src: url(“www.homefromhomepetcare.co.uk/wp-content/Font/3AC3A6_0_0.woff2”);
    font-weight: normal;
    }
    h1 {
    font-family: “TrueNorth”, True North;
    }
    h2 {
    font-family: “TrueNorth”, True North;
    }

    The bottom section where I’ve allocated the font name for h1 and h2 seems to work because if I put in a known font (e.g. Calibri) then the page updates appropriately. But it is not importing the custom font.

    Any help would be really appreciated. Thank you.

    *The page is for a very small business and so they can’t pay for plugins, and they’ve already chosen this particular font “True North”, so it’s too late to switch to a Google font or similar.

Viewing 2 replies - 1 through 2 (of 2 total)

  • You could try copying/pasting the code below. There is an issue with your single and double quotes. Hopefully, that is the reason for it.

    @font-face {
font-family: "TrueNorth";
src: url("www.homefromhomepetcare.co.uk/wp-content/Font/3AC3A6_0_0.ttf") format('truetype');
src: url("www.homefromhomepetcare.co.uk/wp-content/Font/3AC3A6_0_0.eot");
src: url("www.homefromhomepetcare.co.uk/wp-content/Font/3AC3A6_0_0.woff") format('woff');
src: url("www.homefromhomepetcare.co.uk/wp-content/Font/3AC3A6_0_0.woff2");
font-weight: normal;
}

h1 {
font-family: "TrueNorth", True North;
}
h2 {
font-family: "TrueNorth", True North;
}
    Theme Author CyberChimps

    (@cyberchimps)

    @saffronb
    There is an issue with single-quotes and double-quotes in your custom css.

    Please update the single-quotes and double-quotes symbol accordingly.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Custom Font with Font Face’ is closed to new replies.