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 currently learning sass and I want to rewrite my css into sass for learning. I wonder how to save h1 ... h6 in sass. I doing it well?
Is this the correct record in sass?
h1 {
font-family: "Aleo", sans-serif;
font-weight: 700;
margin: 0 0 20px 0;
line-height: 1.5;
color:#000;
}
h2 {
#extend h1;
font-size: 44px;
}
h3 {
#extend h1;
font-size: 22px;
}
h4 {
#extend h1;
font-size: 20px;
color:#9b9578;
font-weight: 400;
text-transform: uppercase;
}
h5 {
#extend h1;
font-size: 16px;
font-weight: 400;
text-transform: uppercase;
}
Thank you for all the advice!
You can use "mixin" and "include" event.
<!-- Set your wants -->
#mixin anything{
font-family: "Aleo", sans-serif;
font-weight: 700;
margin: 0 0 20px 0;
line-height: 1.5;
color:#000;
}
<!-- and assign to your tag. -->
h2{
#include anything;
font-size: 44px;
}
I think this is correct way to your looking for.
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 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;
}
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.