Hello stackoverflowers,
I have built a site that looks great in Chrome and FF (but only in local server). When uploaded, chrome does a great job and looks great. FF does not render the #font-face font..cant figure out why. Using Foundation 3.
SASS:
#font-face {
font-family: 'oswald';
src: url('/stylesheets/font/oswald/oswald-webfont.eot');
src: url('/stylesheets/font/oswald/oswald-webfont.eot?#iefix') format('embedded-opentype'),
url('/stylesheets/font/oswald/oswald-webfont.woff') format('woff'),
url('/stylesheets/font/oswald/oswald-webfont.ttf') format('truetype'),
url('/stylesheets/font/oswald/oswald-webfont.svg#oswaldregular') format('svg');
font-weight: lighter;
font-style: lighter;
}
$headerFontFamily: "oswald", Helvetica, Arial, sans-serif;
In the footer, there are some social links. these have icons using the a:before pseudo selector. Again, fine in chrome but no go in firefox. I have checked the code letter by letter and cant see any typos....but then it is getting late. This one is strange as one of the links is fine, just not the first two:
css:
li:nth-of-type(1) a:before { content: url('../images/watch-trailer.png'); }
li:nth-of-type(2) a:before { content: url('../images/rating.png'); }
li:nth-of-type(3) a:before { content: url('../images/book-seats.png'); }
li:nth-of-type(1) a:hover:before { content: url('../images/watch-trailer-active.png'); }
li:nth-of-type(2) a:hover:before { content: url('../images/rating-active.png'); }
li:nth-of-type(3) a:hover:before { content: url('../images/book-seats-active.png');
}
http://schwack.madmantis.co.uk/
Any help with these two questions please.
On a side note, the page does have some problems in ie (such as slider content missing, movie thumb overlay not going transparent and probably a few others) I am not in a big hurry to fix these but would be nice if someone happened to have a fix for them. Silly IE getting in the way of progress.
It seems that your server is wrongly configured and can't handle font files (woff, svg, eot, ttf).
The server returns a 500 Internal Server Error.
http://schwack.madmantis.co.uk/stylesheets/font/Oswald/oswald-webfont.woff
http://schwack.madmantis.co.uk/stylesheets/font/Oswald/oswald-webfont.ttf
Update
It seems that the fonts are available under (all lowercase) http://schwack.madmantis.co.uk/stylesheets/font/oswald/oswald-webfont.{format}
Change your styles.css with the following font definition:
#font-face {
font-family: 'oswald';
src: url("/stylesheets/font/oswald/oswald-webfont.eot");
src: url("/stylesheets/font/oswald/oswald-webfont.eot?#iefix") format("embedded-opentype"), url("/stylesheets/font/oswald/oswald-webfont.woff") format("woff"), url("/stylesheets/font/Oswald/oswald-webfont.ttf") format("truetype"), url("/stylesheets/font/Oswald/oswald-webfont.svg#oswaldregular") format("svg");
font-weight: lighter;
font-style: lighter;
}
Related
I am trying to get custom fonts working in Nativescript, and hve them in the src/fonts folder at root. I have looked at other questions on SO, but not solved it, the css is below, and it is a display font just for the action bar title, not used anywhere else.
#font-face {
font-family: 'Trade Winds';
font-style: normal;
font-weight: 400;
src: local('Trade Winds'), local('TradeWinds'),
url('src/fonts/trade-winds-v8-latin-regular.ttf') format('ttf'), /* Safari, Android, IOS*/
}
.action-label {
font-family: 'Trade Winds', 'trade-winds';
font-size: 28px;
font-weight: bold;
color:blue;
}
have also tried variations of the path but not working. Only testing in Android at the moment. Thanks
Urggh. This is all the more confusing because the CSS and file references must be right - it's working offline - so why wouldn't it work on the live site?
Here's the local view. The first three icons - the Window, Door and Conservatory - are Flaticon icons:
Here's the same page on the live site (www.bairdswindows.co.uk):
This is my flaticon.css file which is located in my 'css' directory:
#font-face {
font-family: "Flaticon";
src: url("../icons/flaticon.eot");
src: url("../icons/flaticon.eot#iefix") format("embedded-opentype"),
url("../icons/flaticon.woff") format("woff"),
url("../icons/flaticon.ttf") format("truetype"),
url("../icons/flaticon.svg") format("svg");
font-weight: normal;
font-style: normal;
}
[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {
font-family: Flaticon;
font-size: 20px;
font-style: normal;
margin-left: 20px;
}
.flaticon-bill:before {
content: "\e000";
}
.flaticon-calculator18:before {
content: "\e001";
}
.flaticon-doorway:before {
content: "\e002";
}
.flaticon-house112:before {
content: "\e003";
}
.flaticon-open203:before {
content: "\e004";
}
.flaticon-opened33:before {
content: "\e005";
}
.flaticon-window-frame:before {
content: "\e006";
}
The icons, on the live site, are appearing as small boxes with what looks like their e0001 etc title so the browser is seeing them, on the live site, it just isn't interpreting them and/or converting them to the icons.
Considering that it works locally, it has me completely stumped and I haven't been able to get a response from Flaticon support as of yet. Hope someone can point out the obvious problem.
Thank you.
NJ
Fasthosts, my host company, don't allow a sub-directory called "icons" on their shared Unix/Linux servers. Oh, and yes, they didn't bother telling anyone. Yay Fasthosts! :|
NJ
http://ocw.mit.edu/courses/mathematics/18-06sc-linear-algebra-fall-2011/download-course-materials/ try downloading the course from this link.
from the zip folder when i view the pages offline in firefox the fonts are not rendered correctly you can compare it with chrome and IE by opening the course in offline mode in both the browsers.
I tried using local() in #font-face src: but there was no impact, cant use .htaccess option as the course will be available offline after downloading and it may not be necessary to have apache on machines.
I tried changing the fileURI in about:config of firefox it worked but it is not a perfect solution as there are many users and they can't do this.
Please Suggest some solution.
code for base.css:
#font-face {
font-family: TitilliumText22LLight;
src: local("TitilliumText22LLight"), url('../webfonts/TitilliumText22L002- webfont.eot');
src: local("TitilliumText22LLight"), url('../webfonts/TitilliumText22L002-webfont.eot?#iefix') format("embedded-opentype"),
url('../webfonts/TitilliumText22L002-webfont.otf') format("otf"),
url('../webfonts/TitilliumText22L002-webfont.woff') format("woff"),
url('../webfonts/TitilliumText22L002-webfont.ttf') format("truetype"),
url('../webfonts/TitilliumText22L002-webfont.svg#TitilliumText22LLight') format("svg");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: TitilliumText22LRegular; /* Titillium Regular */
src: local("TitilliumText22LRegular"), url('../webfonts/TitilliumText22L003-webfont.eot');
src: local("TitilliumText22LRegular"), url('../webfonts/TitilliumText22L003-webfont.eot?#iefix') format("embedded-opentype"),
url('../webfonts/TitilliumText22L002-webfont.otf') format("otf"),
url('../webfonts/TitilliumText22L003-webfont.woff') format("woff"),
url('../webfonts/TitilliumText22L003-webfont.ttf') format("truetype"),
url('../webfonts/TitilliumText22L003-webfont.svg#TitilliumText22LRegular') format("svg");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: TitilliumText22LBold; /* Titillium Bold */
src: local("TitilliumText22LBold"), url('../webfonts/TitilliumText22L005-webfont.eot');
src: local("TitilliumText22LBold"), url('../webfonts/TitilliumText22L005-webfont.eot?#iefix') format("embedded-opentype"),
url('../webfonts/TitilliumText22L005-webfont.otf') format("otf"),
url('../webfonts/TitilliumText22L005-webfont.woff') format("woff"),
url('../webfonts/TitilliumText22L005-webfont.ttf') format("truetype"),
url('../webfonts/TitilliumText22L005-webfont.svg#TitilliumText22LBold') format("svg");
font-weight: bold;
font-style: normal;
}`
code for Courses_new.css :
#course_nav li a,
#course_nav li a:visited {
font-family: TitilliumText22LBold, Verdana;
color: #666;
font-size: 1.2em;
text-decoration: none;
text-transform: uppercase;
margin: inherit;
padding: inherit;
width: 125px;
}
in the above scenario course_new.css is calling the class TitilliumText22LBold from base.css but it is not applying on the text in offline mode which you can see in the left navigation panel when opening the page from zips.
When i remove verdana it is applying TitilliumText22LBold but still the fonts are not same as fonts in online mode.
Please suggest what should be done next so that this font should be applied in offline mode as well.
I have used custom fonts myself. My code worked on both sides, on and offline.
This is the CSS rule i added in the first lines of my css file:
#font-face { font-family: BebasNeue; src: url('../fonts/BebasNeue.otf'); }
And then i just called them in my css like this:
h1 {
font-family: BebasNeue;
}
I hope this is of any help.
And, my advise to you is to use .otf files! I have learned that TTF files won't load locally. that also might be your problem :)
I am using two commercial fonts FrenchScriptStd and FuturaStd-Light (I have bought them separately and then using them to create a webpage)
This is my first page using this kind of fonts which are commercial (I have tried googlefonts but they do not have these fonts)...
#font-face {
font-family: 'FrenchScriptStd';
font-style: normal;
font-weight: 400;
src: local('FrenchScriptStd'), url('css/FrenchScriptStd.ttf') format('ttf');
}
#font-face {
font-family: 'FuturaStd-Light';
font-style: normal;
font-weight: 400;
src: local('FuturaStd-Light'), url('css/FuturaStd-Light.ttf') format('ttf');
}
#fontface1{font-family : Font1; }
h1{font-family : Font1; }
#fontface2{font-family : Font2; }
#nav a {font-family : Font2;}
so the french font i want to be displayed when using h1 and futura font when using #nav a
/* Typography
=============================================================== */
h1 { color:#cc6602; font-size:36px; font-family:FrenchScriptStd, arial, serif; font-weight:normal; padding-bottom:14px; }
#nav a {font-family:FuturaStd-Light, arial, serif; text-decoration:none; color:#a8241b; font-size:20px; text-shadow:0 1px #fff; display: block; }
In my pc it seems to work, but in some computers it is not displaying correctly,
Is there a way to correct this, maybe i am messing something up...
I would look into Paul Irish's bulletproof #font-face syntax as the reason why you cannot see the font on 'some computers' is the fact that these computers may have different browsers installed than the browser you were originally testing on that need different font files, other than TrueType.
A syntax that I use and have a lot of success with is:
#font-face {
font-family: 'FrenchScriptStd';
src: url('css/FrenchScriptStd.eot');
src: url('css/FrenchScriptStd.eot?#iefix') format('embedded-opentype'),
url('css/FrenchScriptStd.woff') format('woff'),
url('css/FrenchScriptStd.ttf') format('truetype'),
url('css/FrenchScriptStd.svg#FrenchScriptStd') format('svg');
font-weight: normal;
font-style: normal;
}
I believe that this is the #font-face style FontSquirrel uses.
Note that in your example you have not converted the font to various web formats. Here are some services that you can use online to get all of the files converted:
FontSquirell
Free Font Converter
OTF to WOFF
Font Kit Generator
You should then host these font files locally as you may run into issues with MIME types and headers and the FireFox browser not downloading the font files if the files are hosted externally and not on the same domain for which they are being used.
Also, your milage will vary in mobile browsers and older versions of IE. :)
The fonts have to be installed on every computers on which your web page shall be displayed.
I know there are browser rendering inconsistencies between Chrome and Firefox (Windows, both). But I am seeing a weird bug involving #font-face & gooogle-fonts shifting the font down about 10px in Chrome.
Here is an image to illustrate the problem. I have highlighted the text so that you can see the shift:
Here is the CSS for clarity:
.primary-menu li a,
.primary-menu li a:visited {
display: block;
text-decoration: none;
text-transform: uppercase;
color: white;
font-family: 'Oswald', sans-serif;
font-weight: 700;
padding-right: 0;
transition: padding-right .5s;
}
I am using Google Fonts for the Oswald type face:
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Open+Sans:400,700|Oswald:400,700' type='text/css'>
I am using a CSS reset, so most properties are set to a default value. I have tried fiddling with the CSS to see if I can analyse why it is shifting, but I can not see an effect other than turning off the font-face.
Here is the source site for reference. Concept Design Ltd
Any knowledge on why this is happening would be fantastic.
Many thanks,
Neil
I recently had the same problem, but my font was NOT locally installed. (By the way, that would be a problem in web design, as you cant control the installed fonts on pageviewer´s computer).
The problem only occurred in Chrome 26 on Windows, and later in Firefox 19 for Windows but not on any other browser (neither Windows nor Mac OS x).
I finally found out that Chrome/Win would only render SVG Font correctly and Firefox took WOFF unhinted.
So I dirty-fixed the uncorrectly-rendered down-shifting with this-like CSS-code
/* for all browsers */
#font-face {
font-family: 'myfont';
src: url('myfont.eot');
src: url('myfont?#iefix') format('embedded-opentype'),
url('myfont.woff') format('woff'),
url('myfont.ttf') format('truetype'),
url('myfont.svg#wf') format('svg');
}
/* for all webkit-browsers (Chrome, Safari and newly Opera */
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: 'myfont';
src: url('myfont.svg#wf') format('svg');
}
}
/* for all mozilla-browsers (Firefox) */
#-moz-document url-prefix() {
#font-face {
font-family: 'myfont';
src: url('myfont_unhinted.woff') format('woff');
}
}
Hope this helps anyone.
I was having the same issue, but in FireFox - I removed the Oswald fonts I had in my font directory on my computer and it fixed the issue. Maybe give that a go?