Custom Fonts

  • jennyfogarty

    (@jennyfogarty)


    10 years, 7 months ago

    Hi Guys,
    I have purchased a gorgeous font to use on my site and have all versions uploaded to a fonts folder in my child theme.
    Pathway:
    /home/j53207/public_html/slowclapstudio.com/wp-content/themes/notio-wp-child/fonts/DecimaMono-Bold.ttf

    I am using the fontface rule and have the following code in place:

    @font-face {
    font-family: DecimaMono-Bold;
    src: url(/home/j53207/public_html/slowclapstudio.com/wp-content/themes/notio-wp-child/fonts/DecimaMono-Bold.ttf);
    url(/home/j53207/public_html/slowclapstudio.com/wp-content/themes/notio-wp-child/fonts/DecimaMono-Bold.woff);
    url(/home/j53207/public_html/slowclapstudio.com/wp-content/themes/notio-wp-child/fonts/DecimaMono-Bold.eot);
    url(/home/j53207/public_html/slowclapstudio.com/wp-content/themes/notio-wp-child/fonts/DecimaMono-Bold.svg);
    }

    .hero .extralargetitle {
    font-family: DecimaMono-Bold;
    }

    My problem is that even though I am calling the rule, I am still seeing Times New Roman font on the site… I cant figure this out and I have been trying for a couple of hours now!

    Even when I rollover the word DecimeMono on Firefox’s web developer tool, the preview is showing up as Times New Roman…. Any ideas??

    Im totally bamboozled.

    Thanks Jen

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter jennyfogarty

    (@jennyfogarty)

    10 years, 7 months ago

    Update:

    This is just happening on Firefox, not on Chrome or Safari..

    So I really have no clue how to fix this!

    Jen

    stephencottontail

    (@stephencottontail)

    10 years, 7 months ago

    Can you post a link to your site?

    Thread Starter jennyfogarty

    (@jennyfogarty)

    10 years, 7 months ago

    Sure thing Stephen..

    http://www.slowclapstudio.com

    Still baffled I am!

    Jen

    stephencottontail

    (@stephencottontail)

    10 years, 7 months ago

    I don’t see that exact code on your site now, but I do see some similar code. Also, I don’t see any HTML elements on your page with the classes “hero” or “extralargetitle”.

    If you’re going to call fonts with an absolute URL, it won’t work to do so that way. You need to call the fonts starting from your domain name:

    @font-face {
  font-family: "DecimaMono";
  font-style: normal;
  font-weight: normal;
  src: url("http://www.slowclapstudio.com/wp-content/themes/notio-wp-child/fonts/DecimaMono.eot?#iefix") format("embedded-opentype"),
url("http://www.slowclapstudio.com/wp-content/themes/notio-wp-child/fonts/DecimaMono.woff") format("woff"),
url("http://www.slowclapstudio.com/wp-content/themes/notio-wp-child/fonts/DecimaMono.ttf") format("truetype"),
url("http://www.slowclapstudio.com/wp-content/themes/notio-wp-child/fonts/DecimaMono.svg#DecimaMono") format("svg");
}
Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Custom Fonts’ is closed to new replies.

Tags