I have h1 h2 and a for the text formatting.
In fact....h2 and a are identical,but I'd like to change a to non-bold text.
How can I do that?
here is my what I have put together so far:http://jsbin.com/tifuhute/44/
Set font-weight: normal;
to your css class:
#text h2 {
color: #151515;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
font-size: 14px;
padding-left: 15px;
padding-right: 15px;
font-weight: normal;
}
Related
Having issues with my custom MyFonts font rendering in Safari and mobile browsers. Chrome and Firefox are fine.
Font files and MyFontsWebfontsKit.css files are in the right place, with the files called correctly in the master stylesheet. Font files include .eot .woff. woff2 .ttf .svg.
URL: http://geltor.com
The correct font shows up in Chrome and Safari on my Mac, but Safari and all mobile browsers default to the sans-serif backup. Would appreciate any pointers on getting the correct Brasley font to display everywere. Thanks!
MyFontsWebfontsKit.css:
#import url("//hello.myfonts.net/count/391209");
#font-face {font-family: 'Brasley-Bold';src: url('webfonts/391209_0_0.eot');src: url('webfonts/391209_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/391209_0_0.woff2') format('woff2'),url('webfonts/391209_0_0.woff') format('woff'),url('webfonts/391209_0_0.ttf') format('truetype'),url('webfonts/3927A3_A_0.svg') format('svg');}
#font-face {font-family: 'Brasley-Light';src: url('webfonts/391209_1_0.eot');src: url('webfonts/391209_1_0.eot?#iefix') format('embedded-opentype'),url('webfonts/391209_1_0.woff2') format('woff2'),url('webfonts/391209_1_0.woff') format('woff'),url('webfonts/391209_1_0.ttf') format('truetype'),url('webfonts/3927A3_2_0.svg') format('svg');}
#font-face {font-family: 'Brasley-Thin';src: url('webfonts/391209_2_0.eot');src: url('webfonts/391209_2_0.eot?#iefix') format('embedded-opentype'),url('webfonts/391209_2_0.woff2') format('woff2'),url('webfonts/391209_2_0.woff') format('woff'),url('webfonts/391209_2_0.ttf') format('truetype'),url('webfonts/3927A3_0_0.svg') format('svg');}
#font-face {font-family: 'Brasley-BoldItalic';src: url('webfonts/391209_3_0.eot');src: url('webfonts/391209_3_0.eot?#iefix') format('embedded-opentype'),url('webfonts/391209_3_0.woff2') format('woff2'),url('webfonts/391209_3_0.woff') format('woff'),url('webfonts/391209_3_0.ttf') format('truetype'),url('webfonts/3927A3_B_0.svg') format('svg');}
#font-face {font-family: 'Brasley-Medium';src: url('webfonts/391209_4_0.eot');src: url('webfonts/391209_4_0.eot?#iefix') format('embedded-opentype'),url('webfonts/391209_4_0.woff2') format('woff2'),url('webfonts/391209_4_0.woff') format('woff'),url('webfonts/391209_4_0.ttf') format('truetype'),url('webfonts/3927A3_6_0.svg') format('svg');}
#font-face {font-family: 'Brasley-LightItalic';src: url('webfonts/391209_5_0.eot');src: url('webfonts/391209_5_0.eot?#iefix') format('embedded-opentype'),url('webfonts/391209_5_0.woff2') format('woff2'),url('webfonts/391209_5_0.woff') format('woff'),url('webfonts/391209_5_0.ttf') format('truetype'),url('webfonts/3927A3_3_0.svg') format('svg');}
#font-face {font-family: 'Brasley-ThinItalic';src: url('webfonts/391209_6_0.eot');src: url('webfonts/391209_6_0.eot?#iefix') format('embedded-opentype'),url('webfonts/391209_6_0.woff2') format('woff2'),url('webfonts/391209_6_0.woff') format('woff'),url('webfonts/391209_6_0.ttf') format('truetype'),url('webfonts/3927A3_1_0.svg') format('svg');}
#font-face {font-family: 'Brasley-SemiBold';src: url('webfonts/391209_7_0.eot');src: url('webfonts/391209_7_0.eot?#iefix') format('embedded-opentype'),url('webfonts/391209_7_0.woff2') format('woff2'),url('webfonts/391209_7_0.woff') format('woff'),url('webfonts/391209_7_0.ttf') format('truetype'),url('webfonts/3927A3_8_0.svg') format('svg');}
#font-face {font-family: 'Brasley-Regular';src: url('webfonts/391209_8_0.eot');src: url('webfonts/391209_8_0.eot?#iefix') format('embedded-opentype'),url('webfonts/391209_8_0.woff2') format('woff2'),url('webfonts/391209_8_0.woff') format('woff'),url('webfonts/391209_8_0.ttf') format('truetype'),url('webfonts/3927A3_4_0.svg') format('svg');}
#font-face {font-family: 'Brasley-MediumItalic';src: url('webfonts/391209_9_0.eot');src: url('webfonts/391209_9_0.eot?#iefix') format('embedded-opentype'),url('webfonts/391209_9_0.woff2') format('woff2'),url('webfonts/391209_9_0.woff') format('woff'),url('webfonts/391209_9_0.ttf') format('truetype'),url('webfonts/3927A3_7_0.svg') format('svg');}
#font-face {font-family: 'Brasley-SemiBoldItalic';src: url('webfonts/391209_A_0.eot');src: url('webfonts/391209_A_0.eot?#iefix') format('embedded-opentype'),url('webfonts/391209_A_0.woff2') format('woff2'),url('webfonts/391209_A_0.woff') format('woff'),url('webfonts/391209_A_0.ttf') format('truetype'),url('webfonts/3927A3_9_0.svg') format('svg');}
#font-face {font-family: 'Brasley-RegularItalic';src: url('webfonts/391209_B_0.eot');src: url('webfonts/391209_B_0.eot?#iefix') format('embedded-opentype'),url('webfonts/391209_B_0.woff2') format('woff2'),url('webfonts/391209_B_0.woff') format('woff'),url('webfonts/391209_B_0.ttf') format('truetype'),url('webfonts/3927A3_5_0.svg') format('svg');}
Style.css excerpt:
<style>
p, h2, h3, h4, h5, a {
color:#1a2f5a;
font-family: "Brasley", sans-serif !important;
font-size: 1em;
line-height: 1.25em;
-webkit-font-smoothing: antialiased;
}
article .title-link a {
color: #1a2f5a;
}
.bbx-bullet-link.type-2 {
color: #1a2f5a;
}
.Brasley-Bold {
font-family: Brasley-Bold;
font-weight: normal;
font-style: normal;
}
.Brasley-Light {
font-family: Brasley-Light;
font-weight: normal;
font-style: normal;
}
.Brasley-Thin {
font-family: Brasley-Thin;
font-weight: normal;
font-style: normal;
}
.Brasley-BoldItalic {
font-family: Brasley-BoldItalic;
font-weight: normal;
font-style: normal;
}
.Brasley-Medium {
font-family: Brasley-Medium;
font-weight: normal;
font-style: normal;
}
.Brasley-LightItalic {
font-family: Brasley-LightItalic;
font-weight: normal;
font-style: normal;
}
.Brasley-ThinItalic {
font-family: Brasley-ThinItalic;
font-weight: normal;
font-style: normal;
}
.Brasley-SemiBold {
font-family: Brasley-SemiBold;
font-weight: normal;
font-style: normal;
}
.Brasley-Regular {
font-family: Brasley-Regular;
font-weight: normal;
font-style: normal;
}
.Brasley-MediumItalic {
font-family: Brasley-MediumItalic;
font-weight: normal;
font-style: normal;
}
.Brasley-SemiBoldItalic {
font-family: Brasley-SemiBoldItalic;
font-weight: normal;
font-style: normal;
}
.Brasley-RegularItalic {
font-family: Brasley-RegularItalic;
font-weight: normal;
font-style: normal;
}
.colorblock-dblue {color: white; background-color: #1a2f5a; padding:1em; width: 200px; margin-bottom: 1em;}
.colorblock-mblue {color: white; background-color: #515d7d; padding:1em; width: 200px; margin-bottom: 1em;}
.colorblock-lblue {color: white; background-color: #c2c9d3; padding:1em; width: 200px; margin-bottom: 1em;}
.colorblock-pink {color: white; background-color: #fee9df; padding:1em; width: 200px; margin-bottom: 1em;}
.colorblock-dpink {color: white; background-color: #CF7475; padding:1em; width: 200px; margin-bottom: 1em;}
body {color:#1a2f5a; font-family: "Brasley-Regular", sans-serif; font-size: 1em; line-height: 1.25em; -webkit-font-smoothing: antialiased;}
a {color: inherit;}
a:hover {color: #CF7475; text-decoration: none;}
.menuitem {font-size: 1em; text-transform: uppercase; letter-spacing: .5em !important;}
.header-headline {font-size: 2.5em; line-heght: 3em; line-height: 1.25em; font-family: "Brasley-Medium", sans-serif;}
.header-body {font-size: 1.25em; line-height: 1.8em;}
.bluebox {background-color: #515d7d; padding: 1em; }
.bluebox-headline {font-size: 1.25em; line-height: 1.25em; font-family: "Brasley-Regular"; text-transform: uppercase; letter-spacing: .25em; color:#fee9df; }
.bluebox-body {color:#fee9df; line-height: 1.8em;}
.section-title {font-size: 1.25em; line-height: 1.5em; font-family: Brasley-Bold; text-transform: uppercase; letter-spacing: .25em;}
.section-headline-dblue {font-size: 3em; line-height: 1.25em; font-family: "Brasley-Medium";}
.section-headline-mblue {font-size: 3em; line-height: 1.25em; font-family: "Brasley-Medium"; color: #515d7d;}
.section-headline-dpink {font-size: 3em; line-height: 1.25em; font-family: "Brasley-Medium"; color:#CF7475;}
.section-subhead {font-family: "Brasley-Bold";}
.body-dblue {color:#1a2f5a;}
.body-mblue {color: #515d7d;}
.CTA {font-family: "Brasley-Medium";}
.Button-dblue {color:#fee9df; padding:.5em; padding-bottom: .4em; width: 200px; background-color: #1a2f5a; text-align: center; text-transform: uppercase; letter-spacing: .5em; }
.Button-mblue {color:#fee9df; padding:.5em; padding-bottom: .4em; width: 200px; background-color: #515d7d; text-align: center; text-transform: uppercase; letter-spacing: .5em; }
.legal {font-size: .75em; color:#515d7d;}
.footer {background-color: #2E4368; padding: 1em;}
.footer-menutitle {text-transform: uppercase; letter-spacing: .5em; font-family: "Brasley-Bold"; color: #fee9df; }
.footer-menuitem { font-size: .85em; color: #fee9df;}
</style>
From what I can see on your website, only the sans-serif fallback is used right now. Brasley is not currently displayed. If however you change the name of the font to "Brasley-Regular", it does work.
Basically switch this :
font-family: "Brasley", sans-serif !important;
To
font-family: Brasley-Regular, sans-serif !important;
FYI, you don't need quotes around font family names, it's only needed when the font name has spaces or other in its name (such as "Proxima Nova" for example). See this question for more information.
I am using Visual Developer 2008 Express Edition
StyleSheet.css
body {
font-size: 12px;
color: blue;
font-family: arial, helvetica, verdana, sans-serif;
text-decoration: underline;
}
.button{
font-weight: bold;
font-size: 14px;
color: red;
background-color: yellow;
font-family: arial, helvetica, verdana, sans-serif;
}
.label{
font-weight: bold;
font-size: 18px;
color: green;
font-family: arial, helvetica, verdana, sans-serif;
}
CssDemo.aspx
When I view CssDemo.aspx in Browser (IE 10) I get
Why isn't the .button and .label overwriting body in CSS?
In CSS dot . means class in HTML, if you want to style tag directly, leave the dot in CSS.
button {...}
label {...}
or use your IDs
#Button1 {...}
#Label1 {...}
I want multiple text styles in one line, but when I change the styles, the line breaks automatically.I made another page that does not have this problem, but I cannot find the difference. The header styles are below:
h1 {
font-family: 'Varela', sans-serif;
font-size: 0.9em;
font-weight: 400;
color: rgb(4,4,4);
text-decoration: none;
margin-bottom: 0px;
margin-top: 0px;
line-height:normal;
font-style: normal;
letter-spacing: 0.15em;
}
h2 {
font-family: 'Montserrat', sans-serif;
font-size: 1.9em;
font-weight: 700;
color: rgb(4,4,4);
text-decoration: none;
margin-bottom: 0px;
margin-top: 0px;
line-height:normal;
font-style: bold;
letter-spacing: 0.1em;
}
h3 {
font-family: 'Open Sans', sans-serif;
font-size: 0.8em;
font-style: normal;
font-weight: 300;
line-height: 1.6em;
color: rgb(4,4,4);
margin-bottom: 0px;
margin-top: 0px;
}
h4 {
font-family: 'Open Sans', sans-serif;
font-size: 0.8em;
font-style: normal;
font-weight: 300;
line-height: 1.6em;
color: rgb(4,4,4);
margin-bottom: 0px;
margin-top: 0px;
}
h5 {
font-family: 'Open Sans', sans-serif;
font-size: 0.8em;
font-style: normal;
font-weight: 400;
line-height: 1.6em;
color: rgb(4,4,4);
margin-bottom: 0px;
margin-top: 0px;
}
H1, H2, H3, etc are block elements. So instead of writing something like:
<h1>This is one font</h1><h2> and this is another.</h2>
Write it like this:
<span class="font1">This is one font</span><span class="font2"> and this is another</span>
Then give the classes of span1 and span2 different font-families.
I have written some css to overwrite the default styling on a Joomla template but feel there is too much code.
I'm not new to CSS but I am a novice. I'm hear to learn and take criticism.
.scf-h2-title {
background: #34495e;
color: #fff;
font-family: 'Vollkorn', 'Helvetica', arial, serif;
font-size: 1.8em;
font-weight: normal;
line-height: 1;
padding: 6px;
}
.scf-h3-title {
background: #34495e;
color: #fff;
font-family: 'Vollkorn', 'Helvetica', arial, serif;
font-size: 1.4em;
font-weight: normal;
line-height: 1;
padding: 6px;
}
.scf-h4-title {
background: #34495e;
color: #fff;
font-family: 'Vollkorn', 'Helvetica', arial, serif;
font-size: 1.2em;
font-weight: normal;
line-height: 1;
padding: 6px;
}
.scf-h5-title {
background: #34495e;
color: #fff;
font-family: 'Vollkorn', 'Helvetica', arial, serif;
font-size: 1.0em;
font-weight: normal;
line-height: 1;
padding: 6px;
}
Without seeing the HTML I can only do some simple shortening, but this still eliminates a lot of duplication:
.scf-h2-title,
.scf-h3-title,
.scf-h4-title,
.scf-h5-title
{
background: #34495e;
color: #fff;
font-family: 'Vollkorn', 'Helvetica', arial, serif;
font-size: 1.8em;
font-weight: normal;
line-height: 1;
padding: 6px;
}
.scf-h3-title {
font-size: 1.4em;
}
.scf-h4-title {
font-size: 1.2em;
}
.scf-h5-title {
font-size: 1.0em;
}
The image slider menu items are shifted downward 5px on every page the blog page, where they are positioned correctly. I can see the shift in Firebug but do not know where in CSS to fix.
http://drkateklemer.com
Thanks!
Your problem is in line 662 of your style.css for the organic natural summer theme. Change the margins to 0px, going from this:
#contenthome h1, #content h1 {
color: #333333;
font-size: 32px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: normal;
letter-spacing: -1px;
margin: 5px 0px 5px 0px;
padding: 0px;
line-height: 32px;
}
To this:
#contenthome h1, #content h1 {
color: #333333;
font-size: 32px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: normal;
letter-spacing: -1px;
margin: 0px;
padding: 0px;
line-height: 32px;
}
Note: Tested using Developer Tools for Chrome.
wordpress is loading the images into the content block, i dont think it your css just how images are accessed through your template
#contenthome h1, #content h1 {
color: #333333;
font-size: 32px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: normal;
letter-spacing: -1px;
margin: 0px 0px 0px 0px;
padding: 0px;
line-height: 32px;
}