Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Sep 2013
    Posts
    29
    Thanks
    1
    Thanked 1 Time in 1 Post

    How to replace a font on my theme?

    I have this font, "tangerine", that I want to put on my site to replace the current font that is on the 'catagories' section of my site, http://throughtheivy.com. My question is can I just delete the files of the font I want to get rid of in my cpanel and upload this zipped file of the new font http://http://www.dafont.com/font-co...file=tangerine. Also, the font that I am going to be replacing has a .eot, .svg, .ttf, and .woff. I'm not sure if my new font comes with those or where they are?
    I would really appreciate some help with this! As you can see I'm a total newb

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,918
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    There is more to it than just uploading a font file. You need to tell the browser to actually use the font by way of CSS (@font-face).

  • #3
    New Coder
    Join Date
    Sep 2013
    Posts
    29
    Thanks
    1
    Thanked 1 Time in 1 Post
    Alright, this is the font css of the font I want removed
    @font-face {
    font-family: 'great_vibesregular';
    src: url('greatvibes-regular-webfont.eot');
    src: url('greatvibes-regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('greatvibes-regular-webfont.woff') format('woff'),
    url('greatvibes-regular-webfont.ttf') format('truetype'),
    url('greatvibes-regular-webfont.svg#great_vibesregular') format('svg');
    font-weight: normal;
    font-style: normal;

    If I upload the new font to my cpanel, rewrite the new font files name in where the 'greatvibes' is, and then upload this new font css would that work?

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,918
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    Yes, that should work. Upload the font to the same directory as the old one and replace “greatvibes-regular-webfont” with the new font file name.

    Be aware that you can name your font family anyway you like in font-family: 'great_vibesregular';. Whenever you want to use the font you have to specify your custom name then. For example:
    Code:
    @font-face {
      font-family: 'My Super Awesome Font';
      …
      …
    }
    …
    h1 {font-family: 'My Super Awesome Font', Arial, Helvetica, Sans-serif;}

  • #5
    New Coder
    Join Date
    Sep 2013
    Posts
    29
    Thanks
    1
    Thanked 1 Time in 1 Post

    Resolved

    Thanks so much! I uploaded the new font files, deleted the old one's, rewrote the style.css and the font.css and it worked like a charm!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •