Title: Adding Webfont to Theme
Last modified: August 31, 2016
---
# Adding Webfont to Theme
* Resolved [BobG489](https://wordpress.org/support/users/bobg489/)
* (@bobg489)
* [10 years, 4 months ago](https://wordpress.org/support/topic/adding-webfont-to-theme/)
* 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
[http://themeforest.net/item/armada-multifunction-photography-wordpress-theme/9314649](http://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](https://docs.google.com/document/d/1rdmyWYC_vJIchwv0mD_TUS3jyjJHvOsaF14d8GV3Jk0/edit?usp=sharing)”
file with instructions.
* – You can also view the [CSS](https://docs.google.com/document/d/14Cn8RbXBgbV6mfu1cXLuAUoEL4s2QEcxRifq9QupjVA/edit?usp=sharing)
file they provided me.
* – This is [My Current style.css](https://docs.google.com/document/d/1ES1F1_01FaeRaNw2VB24Y2ajbV95b1I0hxpoDllUA1U/edit?usp=sharing):
* – This is what I curently have to link css under in header-single.php
file:
*
* **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 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 3.) use [@import](https://wordpress.org/support/users/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)
* [neotechnomad](https://wordpress.org/support/users/neotechnomad/)
* (@neotechnomad)
* [10 years, 4 months ago](https://wordpress.org/support/topic/adding-webfont-to-theme/#post-6983937)
* 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](https://codex.wordpress.org/Child_Themes) 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](https://wordpress.org/support/users/bobg489/)
* (@bobg489)
* [10 years, 4 months ago](https://wordpress.org/support/topic/adding-webfont-to-theme/#post-6984028)
* 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 – in my case this was my header-single.php file just
like this: (..this is already there) ………other stuff your theme has (this is also already there) 4.) use
[@import](https://wordpress.org/support/users/import/) in style.css (put the
[@import](https://wordpress.org/support/users/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](https://wordpress.org/support/users/bobg489/)
* (@bobg489)
* [10 years, 4 months ago](https://wordpress.org/support/topic/adding-webfont-to-theme/#post-6984029)
* 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.
## Tags
* [font](https://wordpress.org/support/topic-tag/font/)
* [font face](https://wordpress.org/support/topic-tag/font-face/)
* [webfont](https://wordpress.org/support/topic-tag/webfont/)
* In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
* 3 replies
* 2 participants
* Last reply from: [BobG489](https://wordpress.org/support/users/bobg489/)
* Last activity: [10 years, 4 months ago](https://wordpress.org/support/topic/adding-webfont-to-theme/#post-6984029)
* Status: resolved
## Topics
### Topics with no replies
### Non-support topics
### Resolved topics
### Unresolved topics
### All topics