Custom font insertion

  • Hi,

    In the custom template, I successfully added a normal Gotham font but for some reason, other versions of the same font won’t affect template. For example, I am not able to apply a thin and light font.

    This is the CSS code that I am using. Fonts are inside fonts folder inside the template folder.

    /* Load font */
    @font-face {
    font-family: ‘Gotham’;
    font-style: normal;
    font-weight: normal;
    src: local(‘Gotham Medium’), local(‘Gotham-Medium’), url(<?php echo $this->get_template_path(); ?>/fonts/Gotham-Medium.ttf) format(‘truetype’);
    }

    @font-face {
    font-family: ‘Gotham’;
    font-style: normal;
    font-weight: thin;
    src: local(‘Gotham Thin’), local(‘Gotham-Thin’), url(<?php echo $this->get_template_path(); ?>/fonts/Gotham-Thin.ttf) format(‘truetype’);
    }

    @font-face {
    font-family: ‘Gotham’;
    font-style: normal;
    font-weight: light;
    src: local(‘Gotham Light’), local(‘Gotham-Light’), url(<?php echo $this->get_template_path(); ?>/fonts/Gotham-Light.ttf) format(‘truetype’);
    }

    Thank you

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Contributor kluver

    (@kluver)

    Hi @tonijeto,

    Are you also applying the font weight via some custom CSS to the HTML elements you want to target? And can you maybe sent an example of that CSS so we can see it is implemented correctly?

    Thread Starter tonijeto

    (@tonijeto)

    Thank you for a reply.

    I am using:
    body {
    font-weight: normal;
    }

    I am not able to call other two fonts as ‘thin’ or ‘light’. I discovered if I name light font as ‘Bold’ (in @font-face) and put font-weight: bold; for body, the light font gets applied.

    @font-face {
    font-family: ‘Gotham’;
    font-style: normal;
    font-weight: bold;
    src: local(‘Gotham Light’), local(‘Gotham-Light’), url(<?php echo $this->get_template_path(); ?>/fonts/Gotham-Light.ttf) format(‘truetype’);
    }

    I hope this is clear enough.

    Plugin Contributor Ewout

    (@pomegranate)

    Hello tonijito,
    I think we’re still missing some information about how you’re applying this. You wrote that you’re using:

    
body {
font-weight: normal;
}

    But that only applies to the normal font weight. If I understand correctly the issue here is with the light font weight specifically and normal is working fine? What styles do you use for the light font weight?
    Furthermore, the body definition here does not specify the font either, so it would be taking a different font altogether. To apply the light font you would need to specify that specific font and the font weight, like so:

    
body {
    font-family: 'Gotham';
    font-weight: bold;
}

    If you could provide a bit more CSS on how you are applying this, we’ll do our best to help resolve this issue

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