lundi 13 juin 2016

Need help getting a web font to work in a template

I have a template for Wordpress that I downloaded an it comes with what I consider a hard-to-read (because it is so skinny) font for h1 and h2 text. It is called Century Gothic. I have a font on my Mac that I'd rather use called Noteworthy. I have used an online conversion to convert it from OTF to several web-font styles (eot, svg, ttf, woff). The conversion outfit also provided a bit of code.

The problem is can't find where the Century-Gothic is defined so I can replace it with Noteworthy. I've found all the instances where it is part of

Here is the code I've inserted in the file style.css.

h1, h2, h3, h4, h5 {
    font-family: Noteworthy;
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Noteworthy';
    src: url('fonts/Noteworthy.eot');
    src: url('fonts/Noteworthy.woff') format('woff'), url('fonts/Noteworthy.ttf') format('truetype'), url('fonts/Noteworthy.svg') format('svg');
    font-weight: normal;
    font-style: normal;
    color: #750000;
}

And here is an example of its use in various style definitions:

.post div h2 {
    margin: 5px 0 5px 0;
    padding: 0;
    font-size: 18px;
    font-family: Century-Gothic, Helvetica, Arial;
    color: #750000;
    font-weight: normal;
    font-style: normal;
}

I've gone through and replaced all instances of this with Noteworthy yet when I refresh my page, the old font remains.

There is a folder at the top level of this template folder called Fonts where the Noteworthy font files reside.

Please note that I'm a rank novice at this and have been trying to learn as I go by checking online resources but this one really stumps me.

My site's URL is http://scruffydog.org and you can see some of what I'm talking about. The script at the top (Stories...) is in Noteworthy but it is a PNG. The headers in each of the posts ("Hello World," "Note Post," etc.) are primarily what I'm trying to fix.

I'm on a Mac Mini running OS X 10.11.5, using Safari.

A secondary question has to do with the post that is third from the left whose title is a URL. I have no idea how to alter that one at all!

Any tips or resources would be greatly appreciated. I can also zip the css file and email it if that would help. There is no hurry on this as it's just an old retired man's hobby.

Thank you!

-Tod

Aucun commentaire:

Enregistrer un commentaire