Adding Webfont to Theme

  • Resolved BobG489

    (@bobg489)


    8 years, 10 months ago

    Hello, first of all, I am a wordpress/php/css/html complete newbie. I will also be using googledoc links to share content. I would appreciate it if anyone could help me through this. I have been trying for several hours with no luck. I purchased a font from myfonts.com and need to upload the font into my theme.

    – My Website: thrivephoto.co

    – I am using wordpress with Armada by Dream-Theme
    https://themeforest.net/item/armada-multifunction-photography-wordpress-theme/9314649

    – MyFonts.com (“MulberryScript” is the font I purchased) provided a webkit with .eot, .ttf, .woff, .woff2. They also included a “Starthere.html” file with instructions.

    – You can also view the CSS file they provided me.

    – This is My Current style.css:

    – This is what I curently have to link css under <head> in header-single.php file:

    <head>
    <link rel=”stylesheet” type=”text/css” href=”thrivephoto.co/wp-content/themes/dt-armada-child/fonts/MyFontsWebfontsKitCustom.css”>

    **I am using a child theme.
    ** Location of Fonts and css file: ‘thrivephoto.co/wp-content/themes/dt-armada-child/fonts’
    **My theme has 3 files titled with “head” (header.php, header-single.php, header-main.php). The “headersingle.php” seems to be the one being utilized with <head> code in it, not the others. This confuses me as to which I should place my link to css in.
    **You can see for yourself if you download this font, Windows 7 will say “The requested file …302544_1_0_1.ttf is not a valid font file.”

    It seems like there are 5 steps:
    1.) Upload font files & css file to C-Panel
    2.) Reference the css file in the <head>
    3.) use @import in style.css
    4.) use @fontface in style.css
    5.) apply font settings in style.css

    Notes: I hid Font “BuildID” with “……….” on the myfont google doc. No sure if that was sensative information or not, so I hid it.

    My Main Goal is to get this font in my font settings (drop down bar) for my theme but if we can just get it to work for css that would be great.

    THANK YOU!
    Bob

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

  • Because you are using a commercial theme, you won’t touch this theme whatsoever. The best method, because you obviously want to change fonts on the theme, is to create a Child Theme for any changes, as when the main theme updates, all the changes you may have made to the main theme will be lost – including any font files you may upload to it.

    So, if you create a child theme as above, then I can guide you through the process of adding new fonts.
    If you require assistance in creating the Child Theme also, I can provide that, as well.

    Thread Starter BobG489

    (@bobg489)

    I truly appreciate your help. However, I did solve this problem.

    In case anyone needs to know how to do this, feel free to message me but here are the steps:

    1.) Upload font files & css file to C-Panel
    2.) Customize the paths
    – it come stock with webfonts/’fonttitle…’ but you have to change this for A) the link in head (webfonts/…), B) the css sheet that you are linking (in this case MyFontsWebfontsKit.css customize each @font-face path withing this sheet, and C) in your style.css (each @font-face once again, same as your myfontswebfontskit.css)
    3.) Reference the css file in the <head>
    – in my case this was my header-single.php file just like this:
    <head> (..this is already there)
    <link rel=”stylesheet” type=”text/css” href=”wp-content/themes/dt-armada-child/fonts/MyFontsWebfontsKitCustom.css”>
    ………other stuff your theme has
    </head> (this is also already there)
    4.) use @import in style.css (put the @import code at the very top (make it first) of your style.css file
    5.) use @fontface in style.css (under whatever you already have on your style sheet put your @font-face code there
    6.) apply font settings in style.css (now apply the font! in my case, I used:

    body, p, h1 h2 {
    font-family: MulberryScript-Regular;
    }

    One of my main mistakes: getting the correct file paths (I didnt have to include my actual url just src: url(‘wp-content/themes/your theme/fonts/font file title.ttf’) etc….. same went for the link in head

    Another main mistake was that I had my font setting like this

    body, p, h1 h2 {
    font-family: ‘MulberryScript-Regular’;
    }

    I used firebug to figure out that I dont need the ” around my font here. It actually caused it not to work!

    Happy WordPressing! ??

    Thread Starter BobG489

    (@bobg489)

    This topic has been resolved

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Adding Webfont to Theme’ is closed to new replies.