Using this #font-face css. works in Chrome, Safari, and IE, only not Firefox. All required files are uploaded to the server.
CSS:
#font-face {
font-family: 'Calgary';
src: url('../fonts/calgary.eot');
src: url('../fonts/calgary.eot?#iefix') format('embedded-opentype'),
url('../fonts/calgary.woff') format('woff'),
url('../fonts/calgary.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#header-text-webform {
position: relative;
top: 59px;
left: 20px;
font-family: 'Calgary', 'Helvetica', 'Arial', sans-serif !important;
color: white;
font-size: 26px;
font-weight: normal;
text-transform: uppercase;
z-index: 1;
}
You have a duplicate src declaration. Remove this line:
src: url('../fonts/calgary.eot');
and see if that helps at all. If Firefox only reads this, first, src definition, it will be trying to load an EOT font which it doesn't support...
I always use the following structure and have no issues in firefox (or anything else)
#font-face {
font-family: 'Calgary';
src: url('/fonts/calgary.eot');
src: url('/fonts/calgary.eot?#iefix') format('embedded-opentype'),
url('/fonts/calgary.woff') format('woff'),
url('/fonts/calgary.ttf') format('truetype'),
url('/fonts/calgary.svg#calgary') format('svg');
font-weight: normal;
font-style: normal;
}
Related
I am trying to use a custom font using font-face in my AMP pages, but the font is not rendered. The console says "Font download timed out for icons".
#font-face {
font-family: 'icons';
src: url('/fonts/icos2/icomoon.ttf?126oo9') format('truetype');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'icons';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-clock:before {
content: "\e94e";
}
<script async custom-element="amp-font" src="https://cdn.ampproject.org/v0/amp-font-0.1.js"></script>
<amp-font layout="nodisplay"
font-family="icons"
timeout="2000"
on-error-remove-class="icons-loading"
on-error-add-class="icons-missing"
on-load-remove-class="icons-loading"
on-load-add-class="icons-loaded">
</amp-font>
<span class="icon-clock"></span>
<span class="ribbon-txt">Text</span>
The font is being fetched via HTTPS.
Any help will be strongly appreciated.
Thanks!
Here is working Url
Js on Head
<script async custom-element="amp-font" src="https://cdn.ampproject.org/v0/amp-font-0.1.js"></script>
Css on Head
<style amp-custom>
h1 {
color: red;
}
#font-face {
font-family: 'icomoont';
src: url(https://www.fanaticguitars.com/download/icomoon.ttf) format('truetype');
}
.font {font-family: 'icomoont'; color:#f00;}
span {font-size:25px;}
[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoont';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-clock:before {
content: "\e94e";
}
</style>
HTML
<span>Hello Font!</span>
<br>
<span class="font">Hello Font!</span>
<br>
<span class="icon-clock"></span>
<span class="ribbon-txt">Text</span>
I have an issue with #Fontface via MyFonts for ProximaNova... Only in firefox and for some weights.
As you can see by the screenshot my fonts are not loading in firefox but have no problem in Safari and in Chrome. I've also noticed, on another page where I have multiple weights, some work, others do not. I have no altered the font face css file that was generated for me, other then adding font-weight/style to normal.
#font-face {font-family: 'ProximaNovaS-Extrabld';src: url('../webfonts/278301_2_0.eot');src: url('../webfonts/278301_2_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/278301_2_0.woff') format('woff'),url('../webfonts/278301_2_0.ttf') format('truetype'); font-weight: normal; font-style: normal; }
#font-face {font-family: 'ProximaNovaS-Semibold';src: url('../webfonts/278301_6_0.eot');src: url('../webfonts/278301_6_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/278301_6_0.woff') format('woff'),url('../webfonts/278301_6_0.ttf') format('truetype'); font-weight: normal; font-style: normal; }
#font-face {font-family: 'ProximaNova-Extrabld';src: url('../webfonts/278301_F_0.eot');src: url('../webfonts/278301_F_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/278301_F_0.woff') format('woff'),url('../webfonts/278301_F_0.ttf') format('truetype'); font-weight: normal; font-style: normal; }
#font-face {font-family: 'ProximaNova-Regular';src: url('../webfonts/278301_13_0.eot');src: url('../webfonts/278301_13_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/278301_13_0.woff') format('woff'),url('../webfonts/278301_13_0.ttf') format('truetype'); font-weight: normal; font-style: normal; }
#font-face {font-family: 'ProximaNova-Bold';src: url('../webfonts/278301_14_0.eot');src: url('../webfonts/278301_14_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/278301_14_0.woff') format('woff'),url('../webfonts/278301_14_0.ttf') format('truetype'); font-weight: normal; font-style: normal; }
#font-face {font-family: 'ProximaNovaS-Bold';src: url('../webfonts/278301_7_0.eot');src: url('../webfonts/278301_7_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/278301_7_0.woff') format('woff'),url('../webfonts/278301_7_0.ttf') format('truetype'); font-weight: normal; font-style: normal; }
#font-face {font-family: 'ProximaNova-Semibold';src: url('../webfonts/278301_12_0.eot');src: url('../webfonts/278301_12_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/278301_12_0.woff') format('woff'),url('../webfonts/278301_12_0.ttf') format('truetype'); font-weight: normal; font-style: normal; }
Here is a sample of the bigger text style
h1 { color: #ff6500; display: inline; font-family: 'ProximaNova-Semibold'; font-size: 34pt; letter-spacing: 1px; line-height: 42pt; text-align: left; text-transform: uppercase; }
I've tried to do some tests... as far as putting the same markup and style of working weights (in firefox) in the the same page as shown in the screen shot, which then doesn't work. So I'm stumped.
Thank you for your help.
---------- Update -----------
It seems for the most part Firefox is displaying the fonts correctly. However as you can see in the top window (firefox) the text different from the the bottom (Safari) This is really stumping me... http://postimg.org/image/vftkepyw1/
Font files do not exist at the specified path.
I believe you where just not linking to the specified font.
The above link http://www.chezvalois.com/test/index.html is now showing all proxima nova fonts in my Firefox.
I believe this is now fixed.
I'm trying to make my website more IE-compatible (now that developing for it is less of a nightmare), but I can't get some web fonts to work. Here's my markup:
#font-face syntax:
#font-face {
font-family:Roboto Thin;
font-weight:100;
font-style:normal;
src:url(/fonts/ttf/roboto-thin-webfont.ttf) format("truetype"),
url(/fonts/eot/roboto-thin-webfont.eot) format("embedded-opentype"),
url(/fonts/svg/roboto-thin-webfont.svg) format("svg"),
url(/fonts/otf/roboto-thin-webfont.otf) format("opentype"),
url(/fonts/woff/roboto-thin-webfont.woff) format("woff");
}
Implementation in CSS file:
.animation-text {
font-family:Roboto Thin,Helvetica Neue,Helvetica,Arial,sans-serif;
font-weight:100;
font-style:normal;
text-align:center;
margin:auto;
position: absolute;
background-position: center;
background-size: contain;
animation-fill-mode: forwards;
top: 1px;
}
#design {
transform-origin:50% 75%;
font-size:60px;
color:#ccc;
height:auto;
padding-top:540px;
opacity:0;
z-index:4;
animation-name:text;
animation-delay:3000ms;
animation-duration:500ms;
animation-timing-function:ease-out;
}
HTML:
<div class="animation-text" id="design">Design</div>
I've also tested out the code in the four other major browsers running under OS X (Firefox 19, Chrome 25, Safari 6.1, Opera 12), and they all display Roboto flawlessly. IE10 running under Windows 8 falls back to Arial. Shouldn't including .eot and .otf versions of the fonts have fixed this?
Try quoting the font and removing the space like the following... (you'll need to change the paths accordingly)
#font-face {
font-family: 'RobotoThin';
src: url('Roboto-Thin-webfont.eot');
src: url('Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'),
url('Roboto-Thin-webfont.woff') format('woff'),
url('Roboto-Thin-webfont.ttf') format('truetype'),
url('Roboto-Thin-webfont.svg#RobotoThin') format('svg');
font-weight: normal;
font-style: normal;
}
.animation-text {
font-family: 'RobotoThin',Helvetica Neue,Helvetica,Arial,sans-serif;
/* ... other styles ... */
}
I am using three different fonts. Here is my #fontface
#font-face {
font-family: 'Mikadan-Regular';
src: url('../fonts/mikadan/eot/style_134713.eot');
src: url('../fonts/mikadan/eot/style_134713.eot?#iefix') format('embedded-opentype'),
url('../fonts/mikadan/woff/style_134713.woff') format('woff'),
url('../fonts/mikadan/ttf/style_134713.ttf') format('truetype'),
url('../fonts/mikadan/svg/style_134713.svg#Mikadan-Regular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'MuseoSans500';
src: url('../fonts/museosans_500/MuseoSans_500-webfont.eot');
src: url('../fonts/museosans_500/MuseoSans_500-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/museosans_500/MuseoSans_500-webfont.woff') format('woff'),
url('../fonts/museosans_500/MuseoSans_500-webfont.ttf') format('truetype'),
url('../fonts/museosans_500/MuseoSans_500-webfont.svg#MuseoSans500') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'MuseoSlab500';
src: url('../fonts/museoslab_500/Museo_Slab_500-webfont.eot');
src: url('../fonts/museoslab_500/Museo_Slab_500-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/museoslab_500/Museo_Slab_500-webfont.woff') format('woff'),
url('../fonts/museoslab_500/Museo_Slab_500-webfont.ttf') format('truetype'),
url('../fonts/museoslab_500/Museo_Slab_500-webfont.svg#MuseoSlab500') format('svg');
font-weight: normal;
font-style: normal;
}
The first and the third work fine.
The second one is specified for the body tag as:
body, button, input, select, textarea {
font: 16px/1.625 MuseoSans500 "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif;
_font-size: 1em;
color: #333;
}
This works perfectly fine in Chrome and Safari
However, in Opera 11.50 and Firefox 4.0.1, bad news; the entire font stack does not work, and the font is rendered as plain old serif (yuck!)
I think the problem is with Museo,as when I take Museo out of the font stack it renders correctly.
I'm using these browsers on Windows 7.
You're missing a comma.
font: 16px/1.625 MuseoSans500 "Lucida Grande"
font: 16px/1.625 MuseoSans500, "Lucida Grande"
^^^ add this comma
Although you are missing that comma now, based on what you said, you were having problems with the MuseoSans500 font for body text. When you removed it you were fine. I think the comma is missing now that you are showing us your code.
I would try setting font-family to one choice at a time and see what happens. I would also separate the font-size and line-height just in case thereby isolating the problem, like so:
body, button, input, select, textarea {
font-family: MuseoSans500; /* start with this one by itself */
font-size: 16px;
line-height: 1.625;
color: #333;
}
I created font-face using http://www.fontsquirrel.com/fontface/generator. I have created myriad pro semi bold and italic fonts using it for the website. The fonts are coming fine in PC machine but on the Mac the links are not looking as Myriad pro semibold.
Here is the link to the site where you can see.
http://www.vr2020.com/gtgtoursdev/index.php
font-face code :
#font-face {
font-family: "MyriadProSemibold";
font-style: normal;
font-weight: normal;
src: url("myriadpro/myriadpro-semibold-webfont.eot?#iefix") format("embedded-opentype"), url("myriadpro/myriadpro-semibold-webfont.woff") format("woff"), url("myriadpro/myriadpro-semibold-webfont.ttf") format("truetype"), url("myriadpro/myriadpro-semibold-webfont.svg#MyriadProSemibold") format("svg");
}
#font-face {
font-family: "MyriadProSemiboldCondensed";
font-style: normal;
font-weight: normal;
src: url("myriadpro/myriadpro-semiboldcond-webfont.eot?#iefix") format("embedded-opentype"), url("myriadpro/myriadpro-semiboldcond-webfont.woff") format("woff"), url("myriadpro/myriadpro-semiboldcond-webfont.ttf") format("truetype"), url("myriadpro/myriadpro-semiboldcond-webfont.svg#MyriadProSemiboldCondensed") format("svg");
}
#font-face {
font-family: "MyriadProSemiboldItalic";
font-style: normal;
font-weight: normal;
src: url("myriadpro/myriadpro-semiboldit-webfont.eot?#iefix") format("embedded-opentype"), url("myriadpro/myriadpro-semiboldit-webfont.woff") format("woff"), url("myriadpro/myriadpro-semiboldit-webfont.ttf") format("truetype"), url("myriadpro/myriadpro-semiboldit-webfont.svg#MyriadProSemiboldItalic") format("svg");
}
#font-face {
font-family: "MyriadStdTilt";
font-style: normal;
font-weight: normal;
src: url("myriadpro/myriadstd-tilt-webfont.eot?#iefix") format("embedded-opentype"), url("myriadpro/myriadstd-tilt-webfont.woff") format("woff"), url("myriadpro/myriadstd-tilt-webfont.ttf") format("truetype"), url("myriadpro/myriadstd-tilt-webfont.svg#MyriadStdTilt") format("svg");
}
Thanks & Regards,
Karunakar Gowni
This post: CSS #font-face not working with Firefox, but working with Chrome and IE may help. I know it relates to Firefox, but you may find the solution there.
Update: Also, you're calling the stylesheet with your #font-face property in it after you call the stylesheet which you're using it in(voucher2.css). From what I saw you don't call any Myriad font in "menustyle.css".