We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 42964
    • 22 Posts
    Hey there guys, I'm having a bit of trouble changing the font in my css, can some help me change the header font to impact ? whenever I do it the whole pages text turns into impact, Thanks in advance,css code below


    article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {
    	display:block;
    }
    mark, rp, rt, ruby, summary, time {
    	display:inline;
    }
    .left {
    	float:left;
    }
    .right {
    	float:right;
    }
    .wrapper {
    	width:100%;
    	overflow:hidden;
    }
    body {
    	background:url(../images/bg_top_repeat2.jpg) top repeat-x #f3f3f3;
    	border:0;
    	font:13px Arial, Helvetica, sans-serif;
    	color:#000;
    	line-height:20px;
    }
    .css3 {
    	border-radius:8px;
    	-moz-border-radius:8px;
    	-webkit-border-radius:8px;
    	box-shadow:0 0 4px rgba(0, 0, 0, .4);
    	-moz-box-shadow:0 0 4px rgba(0, 0, 0, .4);
    	-webkit-box-shadow:0 0 4px rgba(0, 0, 0, .4);
    	behavior:url(../js/PIE.htc);
    	position:relative;
    }
    .main {
    	margin:0 auto;
    	width:860px;
    	position:relative;
    }
    .body1 {
    	background:url(../images/bg_top2.jpg) top center no-repeat;
    }
    .body2 {
    	background:url(../images/bg_bot.jpg) bottom repeat-x;
    	height:99px;
    }
    .block {
    	height:99px;
    }
    .extra {
    	min-height:100%;
    	height:auto !important;
    	height:100%;
    	margin:0 auto -99px;
    }
    body, html {
    	height:100%;
    }
    a {
    	color:#628ba4;
    	text-decoration:underline;
    	outline:none;
    }
    a:hover {
    	text-decoration:none;
    }
    h1 {
    	font-size:40px;
    	text-transform:uppercase;
    	line-height:50px;
    	padding:13px 0 0 0;
    	float:left;
    	font-weight:400;
    }
    h2 {
    	font-size:30px;
    	color:#3b5b70;
    	line-height:36px;
    	font-weight:300;
    	padding:0 0 19px 0;
    	letter-spacing:-1px;
    }
    p {
    	padding-bottom:20px;
    }
    header {
    	height:306px;
    	overflow:hidden;
    }
    #logo {
    	color:#3a5b70;
    	text-decoration:none;
    }
    #logo span {
    	color:#628ba4;
    }
    #icons {
    	float:right;
    	padding:28px 5px 0 0;
    }
    #icons li {
    	float:left;
    	padding-left:10px;
    }
    #menu {
    	position:absolute;
    	top:102px;
    	left:-20px;
    }
    #menu li {
    	float:left;
    	padding-right:5px;
    }
    #menu li a {
    	display:block;
    	font-size:18px;
    	text-transform:uppercase;
    	text-decoration:none;
    	color:#fff;
    	behavior:url(../js/PIE.htc);
    	position:relative;
    	line-height:37px;
    	padding:0 20px;
    	margin:0 1px 1px 0;
    }
    #menu li a:hover, #menu #menu_active a {
    	color:#3a5b70;
    	border-radius:6px;
    	-moz-border-radius:6px;
    	-webkit-border-radius:6px;
    	background:url(../images/menu_bg.gif) top repeat-x;
    	border-bottom:1px solid #3f5f74;
    	border-right:1px solid #3f5f74;
    	margin:0;
    }
    .text1 {
    	font-size:30px;
    	line-height:36px;
    	color:#3c596b;
    	padding:119px 0 0 0;
    	font-weight:400;
    	letter-spacing:-1px;
    }
    .text1 span {
    	display:block;
    	font-size:40px;
    	color:#fff;
    	line-height:50px;
    	margin-top:-12px;
    }
    header p {
    	font-size:14px;
    	line-height:20px;
    	color:#000;
    	padding:14px 0 0 0;
    	width:510px;
    }
    #content {
    	width:100%;
    	overflow:hidden;
    	padding-top:86px;
    	padding-bottom:36px;
    }
    .inner_copy, .inner_copy a {
    	border:0;
    	float:right;
    	background:#fff;
    	color:#f00;
    	width:50%;
    	line-height:10px;
    	font-size:10px;
    	margin:-220% 0 0 0;
    	overflow:hidden;
    	padding:0;
    }
    .pad_left1 {
    	padding-left:64px;
    }
    .marg_left1 {
    	margin-left:25px;
    }
    .marg_right1 {
    	margin-right:25px;
    }
    .marg_right2 {
    	margin-right:10px;
    }
    .pad_bot1 {
    	padding-bottom:10px;
    }
    .pad_bot2 {
    	padding-bottom:20px;
    }
    .pad_bot3 {
    	padding-bottom:30px;
    }
    .marg_top1 {
    	margin-top:8px;
    }
    .line1 {
    	background:url(../images/line_ver1.gif) 543px 0 repeat-y;
    	width:100%;
    	float:left;
    }
    .line2 {
    	background:url(../images/line_ver2.gif) 255px 0 repeat-y;
    }
    .list1 li a {
    	padding-left:9px;
    	background:url(../images/marker_1.gif) 0 6px no-repeat;
    }
    .font1 {
    	font-weight:bold;
    	padding-bottom:4px;
    }
    .under {
    	background:url(../images/line_hor1.gif) bottom repeat-x;
    	padding-bottom:14px;
    	margin-bottom:13px;
    }
    .color1 {
    	color:#628ba4;
    }
    #ContactForm {
    	margin-top:-5px;
    }
    #ContactForm p {
    	line-height:21px;
    	padding-bottom:9px;
    }
    #ContactForm a {
    	margin-left:40px;
    	float:right;
    }
    #ContactForm .input {
    	width:209px;
    	height:15px;
    	border:1px solid #dadada;
    	background:#fff;
    	padding:2px 5px;
    	margin-bottom:9px;
    	color:#000;
    	font:13px Arial, Helvetica, sans-serif;
    }
    #ContactForm textarea {
    	overflow:auto;
    	width:393px;
    	height:304px;
    	border:1px solid #dadada;
    	background:#fff;
    	padding:2px 5px;
    	margin-bottom:5px;
    	color:#000;
    	font:13px Arial, Helvetica, sans-serif;
    }
    footer {
    	padding:30px 0 33px 0;
    	color:#4b5154;
    	font-size:12px;
    	line-height:18px;
    	width:100%;
    	overflow:hidden;
    }
    .footerlink {
    	margin:0 auto;
    	width:860px;
    	position:relative;
    }
    .footerlink p {
    	margin:0;
    	padding:0;
    	line-height:normal;
    	white-space:nowrap;
    	text-indent:inherit;
    	color:#4b5154;
    }
    .footerlink a {
    	color:#4b5154;
    	font-weight:normal;
    	margin:0;
    	padding:0;
    	border:none;
    	text-decoration:underline;
    	background-color:transparent;
    }
    .footerlink a:hover {
    	color:#4b5154;
    	background-color:transparent;
    	text-decoration:none;
    }
    .footerlink .lf {
    	float:left;
    }
    .footerlink .rf {
    	float:right;
    }
    a {
    	outline:none;
    }
    
      • 28042 ☆ A M B ☆
      • 24,524 Posts
      Could you post just the directive where you want the header to use the impact font? and have you validated your page? A missing or an extra tag somewhere can cause odd things to happen with css and js.
        Studying MODX in the desert - http://sottwell.com
        Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
        Join the Slack Community - http://modx.org
        • 42964
        • 22 Posts
        Yup things seem fine, here it is

        #menu li a {
        	display:block;
        	font-size:18px;
        	text-transform:uppercase;
        	text-decoration:none;
        	color:#fff;
        	behavior:url(../js/PIE.htc);
        	position:relative;
        	line-height:37px;
        	padding:0 20px;
        	margin:0 1px 1px 0;
          • 28042 ☆ A M B ☆
          • 24,524 Posts
          I don't see anything there to set the font huh
            Studying MODX in the desert - http://sottwell.com
            Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
            Join the Slack Community - http://modx.org
            • 42964
            • 22 Posts
            Hmm, I don't know where to set the font but when i do try change transform it does change so im not too sure, that why i posted the whole code smiley
              • 28042 ☆ A M B ☆
              • 24,524 Posts
              And that's why I asked to see the actual directive where you specify the font. You mentioned the header, but the directive you posted above is for a menu item, and doesn't say anything about the font-family.
                Studying MODX in the desert - http://sottwell.com
                Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
                Join the Slack Community - http://modx.org