Navigation
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • #1238474

    mattdmedia
    Participant

    Hi,

    I have a client who used Avenir.ttc as their branding font. Do you have any suggestions as to how to get this font to load into Xtheme? I’ve been struggling to find a way.

    Thanks!

    #1238769

    Rupok
    Member

    Hi there,

    You can use any webfont to your site but .ttc is not web font rather seems desktop font.

    Here goes the step by step guide to add custom webfont to your site.

    You can add custom fonts to your website using CSS3 @font-face rule. To do this, please review this article: http://css-tricks.com/snippets/css/using-font-face/

    Basically you need to add the following code in your child theme’s style.css file (if you haven’t installed a child theme, please visit this to install Child Theme):

    @font-face {
      font-family: 'MyWebFont';
      src: url('path-to-your-font-directory/font_name.eot');
      src: url('path-to-your-font-directory/font_name.eot?#iefix') format('embedded-opentype'),
           url('path-to-your-font-directory/font_name.woff') format('woff'),
           url('path-to-your-font-directory/font_name.ttf')  format('truetype'),
           url('path-to-your-font-directory/font_name.svg#svgFontName') format('svg');
    }

    Replace MyWebFont with the name of your font, path-to-your-font-directory with your fonts directory URL (e.g, http://yourwebsite.com/fonts) and font_name with your font’s name.

    Next, whenever you need to use this font, simply use “MyWebFont” (or your custom font name), e.g:

    body {
       font-family: 'MyWebFont', sans-serif;
    }

    Hope this helps. 🙂

    Thank you.

    #1239949

    mattdmedia
    Participant

    Hi Rupok

    Thanks for great response,

    Cheers!

    #1240079

    Nico
    Moderator

    Happy to hear that.

    Feel free to ask us again.

    Thanks.