Navigation
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • #1255537

    Day Chow
    Participant

    Hi there,

    My website is Chinese, I would like to use Gothic font for all chinese font. How can I set up this.

    Thanks!

    #1255837

    Rupok
    Member

    Hi there,

    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.

    #1274025

    Day Chow
    Participant

    Hi There,

    It still not working, I have uploaded my font, and set the css file.
    However, How can i change all the text to this font family?

    Thanks

    #1274205

    Rupok
    Member

    Hi there,

    Setting the font-family for the body should apply for all element. Can you share your final code that you are using? And the CSS?

    Thanks!

    #1274316

    Day Chow
    Participant
    This reply has been marked as private.
    #1274329

    Christopher
    Moderator

    Hi there,

    The way you implement the font is correct but it’s incomplete. Please follow our previous replay https://community.theme.co/forums/topic/how-to-change-the-font-to-gothic/#post-1255837
    or this thread : https://community.theme.co/forums/topic/merriweather-google-font-problem/#post-219525

    Hope it helps.