Fonts not changing - css

Question

I keep trying to change different fonts to helvetica on a site for a client. I have been through and through this, and it seems like the more I change the font, the more each part seems to turn into the wrong font. I accidentally changed the title bars to a different font and now I'm stumped.
Here is the first page I was trying to change. It all started when the only thing that was not helvetica was where it says "Blog Test" here: http://dolceaquaswim.com/blog/
Now nothing is displaying as helvetica it seems. I've uploaded the font in all it's versions to the server and put them in the css with #font. Here is my/the theme's css:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
border: 0;
font-size: 100%;
font: inherit;
margin: 0;
padding: 0;
vertical-align: baseline;
}
/*HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
#font-face {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
src: url('fonts/helveticaneue-webfont.eot');
src: url('fonts/helveticaneue-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/helveticaneue-webfont.woff') format('woff'),
url('fonts/helveticaneue-webfont.ttf') format('truetype'),
url('fonts/helveticaneue-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
src: url('fonts/helveticaneuebd-webfont.eot');
src: url('fonts/helveticaneuebd-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/helveticaneuebd-webfont.woff') format('woff'),
url('fonts/helveticaneuebd-webfont.ttf') format('truetype'),
url('fonts/helveticaneuebd-webfont.svg') format('svg');
font-weight: bold;
font-style: bold;
}
#font-face {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
src: url('fonts/helveticaneueit-webfont.eot');
src: url('fonts/helveticaneueit-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/helveticaneueit-webfont.woff') format('woff'),
url('fonts/helveticaneueit-webfont.ttf') format('truetype'),
url('fonts/helveticaneueit-webfont.svg') format('svg');
font-weight: italic;
font-style: italic;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
button, input, select, textarea {
font-size: 100%;
overflow: visible;
margin: 0;
vertical-align: baseline;
width: auto;
}
textarea {
overflow: auto;
vertical-align: text-top;
}
/* =Horizontal Rule
-------------------------------------------------------------- */
hr {
background: #dddddd;
border: none;
clear: both;
color: #dddddd;
float: none;
height: 1px;
width: 100%;
}
hr.space {
background: #ffffff;
color: #ffffff;
}
/* =Base
-------------------------------------------------------------- */
html {
height: 100%;
}
body {
-moz-font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
background: #efefef;
color: #555555;
font-family: 'Helvetica Neue' !important;
font-size: 14px;
font-smoothing: antialiased;
line-height: 1.5em;
text-rendering: optimizeLegibility;
}
/* =Typography
-------------------------------------------------------------- */
p {
word-wrap: break-word;
}
i,
em,
dfn,
cite {
font-style: italic;
}
tt,
var,
pre,
kbd,
samp,
code {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-style: normal;
}
b,
strong {
font-weight: 700;
font-size: 27px;
font-weight: 700;
font-weight: normal;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-style: normal;
}
pre {
-moz-box-sizing: border-box;
-moz-border-radius: 2px;
-moz-box-shadow: 0 1px 0 #ffffff, inset 0 1px 1px rgba(0, 0, 0, 0.2);
-webkit-border-radius: 2px;
-webkit-box-shadow: 0 1px 0 #ffffff, inset 0 1px 1px rgba(0, 0, 0, 0.2);
-webkit-box-sizing: border-box;
box-shadow: 0 1px 0 #ffffff, inset 0 1px 1px rgba(0, 0, 0, 0.2);
box-sizing: border-box;
background: #f4f4f4;
border: 1px solid #aaaaaa;
border-bottom-color: #cccccc;
border-radius: 2px;
height: auto;
margin: 0;
outline: none;
padding: 6px 10px;
vertical-align: middle;
width: 100%;
word-wrap: break-word;
white-space: pre-wrap;
}
del {
color: #555555;
text-decoration: line-through;
}
ins,
dfn {
border-bottom: 1px solid #cccccc;
}
sup,
sub,
small {
font-size: 85%;
}
abbr,
acronym {
font-size: 85%;
letter-spacing: .1em;
text-transform: uppercase;
}
a abbr,
a acronym {
border: none;
}
dfn[title],
abbr[title],
acronym[title] {
border-bottom: 1px solid #cccccc;
cursor: help;
}
sup {
vertical-align: super;
}
sub {
vertical-align: sub;
}
/* =Responsive 12 Column Grid
http://themeid.com/responsive-grid/
-------------------------------------------------------------- */
.grid {
float: left;
margin-bottom: 2.127659574468%;
padding-top: 0;
}
.grid-right {
float: right;
margin-bottom: 2.127659574468%;
padding-top: 0;
}
.col-60,
.col-140,
.col-220,
.col-300,
.col-380,
.col-460,
.col-540,
.col-620,
.col-700,
.col-780,
.col-860 {
display: inline;
margin-right: 2.127659574468%;
}
.col-60 {
width: 6.382978723404%;
}
.col-140 {
width: 14.893617021277%;
}
.col-220 {
width: 23.404255319149%;
}
.col-300 {
width: 31.914893617021%;
}
.col-380 {
width: 40.425531914894%;
}
.col-460 {
width: 48.936170212766%;
}
.col-540 {
width: 57.446808510638%;
}
.col-620 {
width: 65.957446808511%;
}
.col-700 {
width: 74.468085106383%;
}
.col-780 {
width: 82.978723404255%;
}
.col-860 {
width: 91.489361702128%;
}
.col-940 {
width: 100%;
}
.fit {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* =Visibility
-------------------------------------------------------------- */
.hidden {
visibility: hidden;
}
.visible {
visibility: visible;
}
.none {
display: none;
}
.hide-desktop {
display: none;
}
.show-desktop {
display: block;
}
/* =Responsive Images
-------------------------------------------------------------- */
img {
-ms-interpolation-mode: bicubic;
border: 0;
height: auto;
max-width: 100%;
vertical-align: middle;
}
.ie8 img {
height: auto;
width: auto\9;
}
.ie8 img.size-large {
max-width: 60%;
width: auto;
}
/* =Responsive Videos
-------------------------------------------------------------- */
video {
width: 100%;
max-width: 100%;
height: auto;
}
/* =Responsive Embeds/Objects
-------------------------------------------------------------- */
embed,
object {
max-width: 100%;
}
svg:not(:root) {
overflow: hidden;
}
/* =Links
-------------------------------------------------------------- */
a {
color: #00CCFF;
font-weight: 400;
text-decoration: none;
}
a:hover,
a:focus,
a:active {
color: #444444;
outline: 0;
text-decoration: none;
}
::selection {
background: #999999;
color: #ffffff;
text-shadow: none;
}
/* =Forms
-------------------------------------------------------------- */
label {
display: inline-block;
font-weight: 700;
padding: 2px 0;
}
legend {
padding: 2px 5px;
}
fieldset {
border: 1px solid #cccccc;
margin: 0 0 1.5em;
padding: 1em 2em;
}
select,
input[type="text"],
input[type="password"],
input[type="email"] {
-moz-box-sizing: border-box;
-moz-border-radius: 2px;
-webkit-box-sizing: border-box;
-webkit-border-radius: 2px;
-webkit-box-shadow: 0 1px 0 #ffffff, inset 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 0 #ffffff, inset 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 0 #ffffff, inset 0 1px 1px rgba(0, 0, 0, 0.2);
background-color: #ffffff;
box-sizing: border-box;
border: 1px solid #aaaaaa;
border-bottom-color: #cccccc;
border-radius: 2px;
cursor: text;
margin: 0;
outline: none;
padding: 6px 8px;
vertical-align: middle;
max-width: 100%;
}
select {
height: auto;
max-width: 100%;
}
area,
textarea {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-webkit-border-radius: 2px;
-webkit-box-shadow: 0 1px 0 #ffffff, inset 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 0 #ffffff, inset 0 1px 1px rgba(0, 0, 0, 0.2);
background-color: #ffffff;
box-shadow: 0 1px 0 #ffffff, inset 0 1px 1px rgba(0, 0, 0, 0.2);
box-sizing: border-box;
border: 1px solid #aaaaaa;
border-bottom-color: #cccccc;
border-radius: 2px;
height: auto;
overflow: auto;
margin: 0;
outline: none;
padding: 8px 10px;
max-width: 100%;
}
map area {
padding: 0px;
border: 0px;
}
input,
select {
cursor: pointer;
}
area:focus,
input:focus,
textarea:focus {
border: 1px solid #66ccff;
}
input[type='text'],
input[type='password'] {
cursor: text;
}
/* =IE Forms
-------------------------------------------------------------- */
.ie7 area,
.ie7 select,
.ie7 textarea,
.ie7 input[type="text"],
.ie7 input[type="password"],
.ie7 input[type="email"] {
width: 96%;
}
/* =IE6 Notice
-------------------------------------------------------------- */
.msie-box {
background-color: #f9edbe;
border: 1px solid #f0c36d;
color: #212121;
display: block;
margin: 0 auto;
max-width: 960px;
padding: 10px;
position: absolute;
top: 60px;
text-align: center;
width: 100%;
}
.msie-box a {
color: #212121;
}
/* =Tables
-------------------------------------------------------------- */
th,
td,
table {
border: 1px solid #dddddd;
}
table {
border-collapse: collapse;
width: 100%;
}
/* =Lists
-------------------------------------------------------------- */
ul {
list-style-type: disc;
margin: 0;
padding: 0;
}
ol {
line-height: 22px;
list-style-position: outside;
list-style-type: decimal;
margin: 0;
padding: 0;
}
dt {
font-weight: 400;
}
/* =Blockquote
-------------------------------------------------------------- */
blockquote {
background: #f9f9f9;
border: none;
border-left: 4px solid #d6d6d6;
margin: 20px;
overflow: auto;
padding: 0 0 10px 12px;
}
blockquote p {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-style: italic;
font-size: 18px;
line-height: 26px;
}
/* =Headings
-------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
font-weight: 700;
line-height: 1.0em;
word-wrap: break-word;
font-family: "Open Sans";
}
h1 {
font-size: 2.625em; /* = 42px */
margin-bottom: .5em;
margin-top: .5em;
font-family: "Open Sans";
}
h2 {
font-size: 2.250em; /* = 36px */
margin-bottom: .75em;
margin-top: .75em;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
h3 {
font-size: 1.875em; /* = 30px */
margin-bottom: .857em;
margin-top: .857em;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
h4 {
font-size: 1.500em; /* = 24px */
margin-bottom: 1em;
margin-top: 1em;
font-family: "Open Sans";
}
h5 {
font-size: 1.125em; /* = 18px */
margin-bottom: 1.125em;
margin-top: 1.125em;
font-family: "Open Sans";
}
h6 {
font-size: 1.000em; /* = 16px */
margin-bottom: 1.285em;
margin-top: 1.285em;
font-family: "Open Sans";
}
/* =Margins & Paddings
-------------------------------------------------------------- */
p,
hr,
dl,
pre,
form,
table,
address,
blockquote {
margin: 1.6em 0;
}
th, td {
padding: .8em;
}
caption {
padding-bottom: .8em;
}
blockquote {
padding: 0 1em;
}
blockquote:first-child {
margin: .8em 0;
}
fieldset {
margin: 1.6em 0;
padding: 0 1em 1em;
}
legend {
padding-left: .8em;
padding-right: .8em;
}
legend+* {
margin-top: 1em;
}
input,
textarea {
padding: .3em .4em .15em;
}
select {
padding: .1em .2em 0;
}
option {
padding: 0 .4em;
}
dt {
margin-bottom: .4em;
margin-top: .8em;
}
ul {
list-style-type: disc;
}
ol {
list-style-type: decimal;
}
ul,
ol {
margin: 0 1.5em 1.5em 0;
padding-left: 2.0em;
}
li ul,
li ol {
margin: 0;
}
form div {
margin-bottom: .8em;
}
/* =Globals
-------------------------------------------------------------- */
#container {
margin: 0 auto;
max-width: 960px;
padding: 0px 0px;
background: #ffffff;
border-right: 1px solid #e4e4e4;
border-bottom: 1px solid #e4e4e4;
border-top: 1px solid #e4e4e4;
-webkit-box-shadow: 0px 4px 4px 0px rgba(50, 50, 50, 0.49);
-moz-box-shadow: 0px 4px 4px 0px rgba(50, 50, 50, 0.49);
box-shadow: 0px 4px 4px 0px rgba(50, 50, 50, 0.49);
}
#wrapper {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
background-color: #ffffff;
border: 1px solid #e5e5e5;
border-radius: 4px;
clear: both;
margin: 20px auto 20px auto;
padding: 0 20px 20px 20px;
position: relative;
}
.front-page #wrapper {
background-color: #ffffff;
border: none;
margin: 20px auto 20px auto;
padding: 0;
}
#header {
margin: 0;
}
#footer {
clear: both;
margin: 0 auto;
max-width: 960px;
padding: 0 25px 0 25px;
}
#footer-wrapper {
margin: 0;
padding: 0;
}
/* =Header
-------------------------------------------------------------- */
#logo {
text-align: center;
margin: 0;
}
.site-name {
display: block;
font-size: 2.063em; /* = 33px */
line-height: 1.0em;
padding-top: 20px;
font-family: "Helvetica Neue";
}
.site-name a {
color: #333333;
font-weight: 700;
font-family: "Helvetica Neue";
}
.site-description {
color: #afafaf;
display: block;
font-size: 0.875em; /* = 14px */
font-family: "Helvetica Neue";
margin: 10px 0;
}
.latestTextstory {
font-family: "Helvetica Neue";
}
.part1 {
font-family: "Helvetica Neue";
}
.part2 {
font-family: "Helvetica Neue";
}
/* =Content
-------------------------------------------------------------- */
#content {
margin-top: 40px;
margin-bottom: 20px;
}
#content-full {
margin-top: 40px;
margin-bottom: 20px;
}
#content-blog {
margin-top: 40px;
margin-bottom: 20px;
}
#content-images {
margin-bottom: 20px;
}
#content-search {
margin-bottom: 20px;
margin-top: 20px;
}
#content-archive {
margin-top: 40px;
margin-bottom: 20px;
}
#content-sitemap {
margin-top: 40px;
margin-bottom: 20px;
}
#content-sitemap a {
font-size: 12px;
}
#content .sticky {
clear: both;
}
#content .sticky p {
}
/* =Templates (Landing Page)
-------------------------------------------------------------- */
/*
.page-template-landing-page-php .menu,
.page-template-landing-page-php .top-menu,
.page-template-landing-page-php .main-nav,
.page-template-landing-page-php .footer-menu,
.page-template-landing-page-php .sub-header-menu {
display: none;
}
*/
/* =Templates (Blog Page)
-------------------------------------------------------------- */
.page-template-blog-php .menu,
.page-template-blog-php .top-menu,
.page-template-blog-php .main-nav,
.page-template-blog-php .footer-menu,
.page-template-blog-php .sub-header-menu {
display: none;
}
/* =Author Meta (Author's Box)
-------------------------------------------------------------- */
#author-meta {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background: #f9f9f9;
border: 1px solid #d6d6d6;
border-radius: 4px;
clear: both;
display: block;
margin: 30px 0 40px 0;
padding: 10px;
overflow: hidden;
}
#author-meta img {
float: left;
padding: 10px 15px 0 5px;
}
#author-meta p {
margin: 0;
padding: 5px;
}
#author-meta .about-author {
font-weight: 700;
margin: 10px 0 0 0;
}
/* =Featured Content
-------------------------------------------------------------- */
#featured {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background-color: #ffffff;
border: 1px solid #e5e5e5;
border-radius: 4px;
padding-bottom: 40px;
width: 99.893617021277%;
}
#featured p {
font-size: 18px;
font-weight: 200;
line-height: 27px;
padding: 0 40px 0 40px;
text-align: center;
}
#featured-image {
margin: 40px 0 0 0;
}
#featured-image .fluid-width-video-wrapper {
margin-left: -20px;
}
.featured-image img {
margin-top: 44px;
}
/* =Post
-------------------------------------------------------------- */
.comments-link {
font-size: 12px;
}
#cancel-comment-reply-link {
color: #990000;
}
.post-data {
clear: both;
font-size: 12px;
font-weight: 700;
margin-top: 20px;
}
.post-data a {
color: #111111;
}
.post-entry {
clear: both;
font-family: "Helvetica Neue";
}
.entry-title {
font-family: "Helvetica Neue";
}
.post-title {
font-family: "Helvetica Neue";
}
.post-meta {
clear: both;
color: #9f9f9f;
font-size: 12px;
margin-bottom: 10px;
}
.post-edit {
clear: both;
display: block;
font-size: 12px;
margin: 1.5em 0;
}
.post-search-terms {
clear: both;
}
.read-more {
clear: both;
font-weight: 700;
}
.attachment-entry {
clear: both;
text-align: center;
}
/* =bbPress
bbPress has its own breadcrumb lists
-------------------------------------------------------------- */
.bbPress .breadcrumb-list {
display: none;
}
/* =Symbols
-------------------------------------------------------------- */
.ellipsis {
color: #aaaaaa;
font-size: 18px;
margin-left: 5px;
}
.form-allowed-tags {
display: none;
font-size: 10px;
}
/* =Widgets
-------------------------------------------------------------- */
.widget-wrapper {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
background-color: #f9f9f9;
border: 1px solid #e5e5e5;
border-radius: 4px;
margin: 0 0 20px;
padding: 20px;
}
.widget-wrapper select,
.widget-wrapper input[type="text"],
.widget-wrapper input[type="password"],
.widget-wrapper input[type="email"] {
width: 75%;
}
#widgets {
margin-top: 40px;
}
#widgets a {
display: inline-block;
margin: 0;
padding: 0;
text-decoration: none;
}
#widgets form {
margin: 0;
}
#widgets ul,
#widgets ol {
padding: 0 0 0 20px;
}
#widgets ul li a {
display: inline;
text-decoration: none;
}
#widgets .widget-title img {
float: right;
height: 11px;
position: relative;
top: 4px;
width: 11px;
}
#widgets .rss-date {
line-height: 18px;
padding: 6px 12px;
}
#widgets .rssSummary {
padding: 10px;
}
#widgets cite {
font-style: normal;
line-height: 18px;
padding: 6px 12px;
}
#widgets .tagcloud,
#widgets .textwidget {
display: block;
line-height: 1.5em;
margin: 0;
word-wrap: break-word;
}
#widgets .textwidget a {
display: inline;
}
#widgets ul .children {
padding: 0 0 0 10px;
}
#widgets .author {
font-weight: 700;
padding-top: 4px;
}
.widget_archive select, #cat {
display: block;
margin: 0 15px 0 0;
}
#colophon-widget ul {
}
.colophon-widget {
background: none;
min-height: 0;
}
.colophon-widget select,
.colophon-widget input[type="text"],
.colophon-widget input[type="password"],
.colophon-widget input[type="email"] {
width: 100%;
}
#top-widget {
}
.top-widget {
background: none;
border: none;
clear: right;
float: right;
min-height: 0;
padding: 0 3px 0 0;
text-align: right;
width: 45%;
}
.top-widget ul {
padding: 0;
}
.top-widget select,
.top-widget input[type="text"],
.top-widget input[type="password"],
.top-widget input[type="email"] {
width: auto;
}
.top-widget #searchform {
margin: 0;
}
/* =Titles
-------------------------------------------------------------- */
.featured-title {
font-size: 60px;
letter-spacing: -1px;
margin: 0;
padding-top: 40px;
text-align: center;
font-family: "Helvetica Neue";
}
.featured-subtitle {
padding: 0 10px;
text-align: center;
font-family: "Helvetica Neue";
}
.widget-title h3,
.widget-title-home h3 {
display: block;
font-size: 16px;
font-weight: 700;
line-height: 18px;
margin: 0;
padding: 0 0 20px 0;
text-align: left;
font-family: "Helvetica Neue";
}
.top-widget .widget-title h3 {
font-size: 14px;
padding: 0;
text-align: right;
font-family: "Helvetica Neue";
}
.widget-title a {
border-bottom: none;
padding: 0 !important;
font-family: "Helvetica Neue";
}
.title-404 {
color: #993333;
}
/* =404 Page
-------------------------------------------------------------- */
.error404 select,
.error404 input[type="text"],
.error404 input[type="password"],
.error404 input[type="email"] {
width: auto;
}
/* =Top Menu
-------------------------------------------------------------- */
.top-menu {
float: right;
margin: 10px 0;
padding: 0;
}
.top-menu li {
display: inline;
list-style-type: none;
}
.top-menu li a {
border-left: 1px solid #cccccc;
color: #333333;
font-size: 11px;
padding: 0 4px 0 8px;
}
.top-menu > li:first-child > a {
border-left: none;
}
.top-menu li a:hover {
color: #333333;
}

Answer 1

What both Jack and rgdesign are right on. You can see that the #font-face rule is used to name a font or give it an ID and define it's location. From the looks of it, it seems like your trying to edit something that was already made. The problem is I can't see where you are actually referencing the font for the locations you want to change. For CSS changes and to avoid bloating your css files I would recommend using a tool like firebug to look at the css on the site and make changes that you can verify work.
Checking your site, it looks like you are defining Open-Sans for your headings.
h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
font-family: "Open-Sans";
font-weight: 700;
letter-spacing: 1px;
line-height: 1em;
word-wrap: break-word;
}
You need to change the font here by defining the font-family to Helvetica Neue and continue to do that for each section you want to change.
h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
font-weight: 700;
letter-spacing: 1px;
line-height: 1em;
word-wrap: break-word;
}