I have two font face styles in my css, both are identical, but only one doesnt work in firefox? i have tried changing the speech marks, adding a local version, changing the files root, and urls, and various other things, i just cant understand why one would work and the other wouldnt, here is my code:
#font-face {
font-family: 'AlienLeague';
src: url('fonts/alien5.eot');
src: url('fonts/alien5.eot?#iefix') format('embedded-opentype'),
url('fonts/alien5.woff') format('woff'),
url('fonts/alien5.ttf') format('truetype'),
url('fonts/alien5.svg#alien5') format('svg');
font-weight: normal;
font-style: normal;
}
#title {
width: auto;
font-family: "AlienLeague", sans-serif;
font-size: 34px;
color: #fff;
float: left;
margin: 0px 40px 0px 40px;
}
I used font squirrel so please dont mention that and heres a link: http://aawilson.co.uk/assign1/ (its the top left heading "space and beyond")
Thanks in advance.
Related
I am trying to embed a font with css #font-face as a light font. It works fine in Firefox, but not in IE11. In IE11 font-weights bold and regular work fine, but not font-weight light. In the following code, the text displays as Oswald regular:
#font-face {
font-family: Oswald;
font-weight: 300;
src: url('oswaldlight.eot');
src: url('oswaldlight.eot?#iefix') format('embedded-opentype'), url('oswaldlight.woff') format('woff'), url('oswaldlight.ttf') format('truetype');
}
div.h-title {
font-size: 62px;
letter-spacing: 3px;
font-family: Oswald, sans-serif;
font-weight: 300;
color: #7a7a7a;
text-transform: uppercase;
line-height: 1.3em;
}
I have reviewed the the following similar posting, but the solution they recommend does not work.
#font-face IE9 font-weight doesn't work
In the following code, the text actually displays as sans-serif:
#font-face {
font-family: Oswald-light;
src: url('oswaldlight.eot');
src: url('oswaldlight.eot?#iefix') format('embedded-opentype'), url('oswaldlight.woff') format('woff'), url('oswaldlight.ttf') format('truetype');
}
div.h-title {
font-size: 62px;
letter-spacing: 3px;
font-family: Oswald-light, sans-serif;
color: #7a7a7a;
text-transform: uppercase;
line-height: 1.3em;
}
Any ideas how I could resolve this?
On my website I'm using a custom font which I have uploaded. It seems to be choosing when to work intermittently. It works on some computers/browsers, but not on others. It is also mapped correctly.
This is my code:
<style type="text/css">
#font-face {
font-family: 'AgencyFBRegular';
src: url('agencyr.eot');
src: url('agencyr.eot?#iefix') format('embedded-opentype'),
url('agencyr.woff') format('woff'),
url('AGENCYR.TTF') format('truetype'),
url('agencyr.svg#AgencyFBRegular') format('svg');
}
h3 { font-family: 'Agency FB', sans-serif; font-size: 26px; font-weight:normal; text-align: left; line-height: 100%;
border-bottom: 1px solid #484848; padding-bottom: 5px; margin-bottom:7px;
</style>
I thought it was working everywhere until I used a friend's laptop to view it.
Can you see where I'm going wrong?
UPDATE:
I have updated font CSS. It seems to be working, but now not on iOS.
The following code should work:
#font-face {
font-family:"AgencyFBRegular";
src: url("agencyr.eot") /* EOT file for IE */
}
#font-face {
font-family:"AgencyFBRegular";
src: url("agencyr.ttf") /* TTF file for CSS3 browsers */
}
h3 {
font-family:'Agency FB', sans-serif;
font-size: 26px;
font-weight:normal;
text-align: left;
line-height: 100%;
border-bottom: 1px solid #484848;
padding-bottom: 5px;
margin-bottom:7px;
}
You need change file name of your font without Uppercase. Like this: from AGENCYR.TTF to agencyr.ttf
and in your css file:
src: url('agencyr.ttf');
From the start I need to say that I know what I'm trying to do is not "the right way to do it", but the client I'm working for desperately wants THIS specific font.
So, I need to use on a client's website the exact font as VOGUE uses. So I took the .eot & .ttf and uploaded them on my server. Then I added the CSS definitions:
/*fonts fonts for IE*/
#font-face {
font-family: VogueDidot;
src: url('font/FBDidotL-Regular.eot') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "VogueDidot Light";
src: url('font/FBDidotL-Light.eot') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
/*fonts for other browsers*/
#font-face {
font-family: VogueDidot;
src: url('font/FBDidotL-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "VogueDidot Light";
src: url('font/FBDidotL-Light.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
And the CSS for my element is:
.post h1 {
display: block;
height: 100%;
font-family: VogueDidot;
font-size: 55px;
text-transform: uppercase;
overflow: hidden;
line-height: 58px;
}
And, normally, I expected to see everything working like a charm.
But it's not...
Here's how it should look like:
And that's how it looks on my website :
Any ideas?
Looks like the browser is trying to display the font bold and repeating the gray pixels (from the thin lines) next to each other. Try using font-weight: normal (The font-weight:bold is inherited from the h1 element).
Edit:
Chrome is somehow rendering the fonts i use via #font-face incorrectly. Which i found as i changed the font family of the inspected element to arial. The reason this might be, is because as i was searching for a fix on how chrome renders fonts so they appear more smooth instead of pixelated, i found that you could swap the order of the font formats and put the svg on top which would cause chrome to render it perfectly. As seen here.
So either the order is messing them up, or simply the font is broken in some way.
Now the question is, how do i use this font without breaking the site and keeping the fonts smooth?
Here is the #font-face code i use:
#font-face {
font-family: 'alegreya_scregular';
src: url('../includes/fonts/alegreyasc-regular-webfont.eot');
src: url('../includes/fonts/alegreyasc-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../includes/fonts/alegreyasc-regular-webfont.svg#alegreya_scregular') format('svg'),
url('../includes/fonts/alegreyasc-regular-webfont.woff') format('woff'),
url('../includes/fonts/alegreyasc-regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'droid_sansregular';
src: url('../includes/fonts/droidsans-webfont.eot');
src: url('../includes/fonts/droidsans-webfont.eot?#iefix') format('embedded-opentype'),
url('../includes/fonts/droidsans-webfont.svg#droid_sansregular') format('svg'),
url('../includes/fonts/droidsans-webfont.woff') format('woff'),
url('../includes/fonts/droidsans-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'droid_sansbold';
src: url('../includes/fonts/droidsans-bold-webfont.eot');
src: url('../includes/fonts/droidsans-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../includes/fonts/droidsans-bold-webfont.svg#droid_sansbold') format('svg'),
url('../includes/fonts/droidsans-bold-webfont.woff') format('woff'),
url('../includes/fonts/droidsans-bold-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
I have some rendering issues on chrome. For some reason, the links right side gets cut off so the underlines will only fill half the of text, and the divs on the right side will not break off the words to a new line. It only happens some of the time and if i refresh the page a couple of times (differs how many times) it will fix itself eventually. Images are below.
Note: The site is in danish.
Images, underlined the issues in red:
http://i.stack.imgur.com/zJHXD.jpg
What causes this, and how do i fix it?
Note: This is for the navigation links
HTML:
<ul class="nav">
<li class="first"></li>
<li>Forside</li>
<li>Booking</li>
<li>Galleri</li>
<li>Begivenheder</li>
<li>Events</li>
<li>Politik</li>
<li>Kontakt</li>
</ul>
CSS:
.header .nav {
position: absolute;
overflow: hidden;
font-size: .70em;
bottom: -8px;
right: 16px;
}
.header .nav li {
float: left;
background: #171717 url(../images/site/nav_divider.png) repeat-y right;
text-transform: uppercase;
} .header .nav li:hover {
background: #1a1a1a url(../images/site/nav_divider.png) repeat-y right;
}
.header .nav .first {
width:2px;
height:31px;
margin-bottom:-0.95em;
}
.header .nav li a {
display: block;
padding: .75em .85em .75em .75em;
color: #e0e0e0;
text-decoration: none;
}
After a bit of searching on #font-face and chrome behaviour, i found a solution to the problem. Apparently moving the svg to the top will make the rendered font break the layout, so instead you should keep the original formatting and add a special media query, which will render the font smoothly in chrome while not breaking the layout.
Example:
#font-face {
font-family: 'droid_sansregular';
src: url('../includes/fonts/droidsans-webfont.eot');
src: url('../includes/fonts/droidsans-webfont.eot?#iefix') format('embedded-opentype'),
url('../includes/fonts/droidsans-webfont.woff') format('woff'),
url('../includes/fonts/droidsans-webfont.ttf') format('truetype'),
url('../includes/fonts/droidsans-webfont.svg#droid_sansregular') format('svg');
font-weight: normal;
font-style: normal;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: 'droid_sansregular';
src: url('../includes/fonts/droidsans-webfont.svg#droid_sansregular') format('svg');
font-weight: normal;
font-style: normal;
}
}
I have an inline heading (h1) with a background-color on the heading, but on Mac OS in both safari and Firefox it does not seem to stretch around the font. With a websafe font it works fine. Line height is set according to the font-size.
Any suggestions?
See visual expamle:
http://www.flickr.com/photos/hegerokenes/5038724235/
#font-face {
font-family: 'FedraMonoStd-Medium';
src: url('fonts/fedramonostd-medium-webfont.eot');
src: local('☺'), url('fonts/fedramonostd-medium-webfont.woff') format('woff'), url('fonts/fedramonostd-medium-webfont.ttf') format('truetype'), url('fonts/fedramonostd-medium-webfont.svg#webfontNCPrZ83i') format('svg');
font-weight: normal;
font-style: normal;
}
h1 {
font-size: 22px;
background-color: #999895;
line-height: 38px;
display: inline;
color: #fff;
padding: 3px;
}
try a little more padding, this should work without messing up the line-height. say
padding: 12px 3px 3px 3px;
at least it did with the font i was using...
Try floating left or display:inline-block instead, so it can be "blocky".