I have two #font-face assignments in my CSS. Only the second/last one ever renders, though they are nearly identical.
#font-face {
font-family: 'callunaregular';
src: url('callunaregular/Calluna-Regular-webfont.eot');
src: url('callunaregular/Calluna-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('callunaregular/Calluna-Regular-webfont.woff') format('woff'),
url('callunaregular/Calluna-Regular-webfont.ttf') format('truetype'),
url('callunaregular/Calluna-Regular-webfont.svg#callunaregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'bodonitownregular';
src: url('bodonitownregular/bodonitown-webfont.eot');
src: url('bodonitownregular/bodonitown-webfont.eot?#iefix') format('embedded-opentype'),
url('bodonitownregular/bodonitown-webfont.woff') format('woff'),
url('bodonitownregular/bodonitown-webfont.ttf') format('truetype'),
url('bodonitownregular/bodonitown-webfont.svg#bodonitownregular') format('svg');
font-weight: normal;
font-style: normal;
}
I think it's a simple fix, but I don't know what I'm doing wrong!
Edit:
<body style='background-color:white'>
<div align='center' style='position:absolute;left:500px;top:89px'>
<a id='title' href='home.html' >
<span style="font-family: callunaregular; font-size: 79px;">Open Mic Night</span>
</a>
is identical to setting the font-family to Times.
Perhaps this one causes the problem?:
'callunaregular/Calluna-Regular-webfont.svg#bodonitownregular'
See, after the hash?
Related
I am trying to create my first website and I am experimenting with fonts from fontsquirrel.
The only problem is that I can use only some of the fonts I have downloaded through the site.
I am having a great deal of a problem in particular in writing the CSS code correctly, when the font family includes more than one style.
Lets take for example the LM Mono 10 Regular and Special Elite for example:
My code for special elite is the following and it works great:
#font-face {
font-family: 'specialelite';
src: url('specialelite.eot');
src: url('specialelite.eot?#iefix') format('embedded-opentype'),
url('specialelite.woff2') format('woff2'),
url('specialelite.woff') format('woff'),
url(' specialelite.ttf') format('truetype'),
url(' specialelite.svg# specialelite') format('svg');
font-weight: normal;
font-style: normal;
}
and
.fifth {font-family: 'specialelite'; font-weight: normal; font-size: 16px; color:black;}
This format is easy to work with because the special elite font-family has only one style.
BUT.. When I am trying to adapt this format on a font-family that has more than one styles like for example the LM Mono 10 family, it simply does not work....
http://www.fontsquirrel.com/fonts/Latin-Modern-Mono
I do not know if the mistake is on the way I am referring to the font family, or if I write the urls wrong... Could you please provide an example of the code in a reply?
Let's say for "Latin Modern Mono Light 10 Regular". How will the font-weight and font-style properties change? I just don't get it...
When I download the resources at the link you provided, it shows each font style as a completely different font family.
This is the Italic version:
#font-face {
font-family: 'latin_modern_mono10_italic';
src: url('lmmono10-italic-webfont.eot');
src: url('lmmono10-italic-webfont.eot?#iefix') format('embedded-opentype'),
url('lmmono10-italic-webfont.woff') format('woff'),
url('lmmono10-italic-webfont.ttf') format('truetype'),
url('lmmono10-italic-webfont.svg#latin_modern_mono10_italic') format('svg');
font-weight: normal;
font-style: normal;
}
This is the Regular version:
#font-face {
font-family: 'latin_modern_mono10_regular';
src: url('lmmono10-regular-webfont.eot');
src: url('lmmono10-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('lmmono10-regular-webfont.woff') format('woff'),
url('lmmono10-regular-webfont.ttf') format('truetype'),
url('lmmono10-regular-webfont.svg#latin_modern_mono10_regular') format('svg');
font-weight: normal;
font-style: normal;
}
In order to use these fonts as-is, you will need to specify the appropriate font-family whenever you use them.
For example:
.fifth {
font-family: 'latin_modern_mono10_regular';
font-weight: normal;
...
}
or
.fifth {
font-family: 'latin_modern_mono10_italic';
font-weight: normal;
...
}
For Regular and Italic version:
#font-face {
font-family: 'specialelite';
src: url('specialelite.eot');
src: url('specialelite.eot?#iefix') format('embedded-opentype'), url('specialelite.woff2') format('woff2'), url('specialelite.woff') format('woff'), url(' specialelite.ttf') format('truetype'), url(' specialelite.svg# specialelite') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'specialelite';
src: url('specialelite_italic.eot');
src: url('specialelite_italic.eot?#iefix') format('embedded-opentype'), url('specialelite_italic.woff2') format('woff2'), url('specialelite_italic.woff') format('woff'), url(' specialelite_italic.ttf') format('truetype'), url(' specialelite_italic.svg# specialelite') format('svg');
font-weight: normal;
font-style: italic;
}
Now, you can use this for Regular: font-style: normal
.fifth {font-family: 'specialelite'; font-style: normal; font-size: 16px; color:black;}
OR this for Italic: font-style: italic
.fifth {font-family: 'specialelite'; font-style: italic; font-size: 16px; color:black;}
On FontSquirrell, I have converted the font Exo from ttf to all the possible versions, I have put all the fonts in fonts>exo and in the CSS file this code:
#font-face{
font-family: 'exoblack';
src: url('/fonts/exo/exo-black-webfont.eot');
src: url('/fonts/exo/exo-black-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/exo/exo-black-webfont.woff2') format('woff2'),
url('/fonts/exo/exo-black-webfont.woff') format('woff'),
url('/fonts/exo/exo-black-webfont.ttf') format('truetype'),
url('/fonts/exo/exo-black-webfont.svg#exoblack') format('svg');
font-weight: normal;
font-style: normal;
}
Why can't I see the font in local? I tried to put src: local:
#font-face{
font-family: 'exoblack';
src: url('/fonts/exo/exo-black-webfont.eot');
**src: local('exoblack'), url('/fonts/exo/exo-black-webfont.eot') format('embedded-opentype');**
src: url('/fonts/exo/exo-black-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/exo/exo-black-webfont.woff2') format('woff2'),
url('/fonts/exo/exo-black-webfont.woff') format('woff'),
url('/fonts/exo/exo-black-webfont.ttf') format('truetype'),
url('/fonts/exo/exo-black-webfont.svg#exoblack') format('svg');
font-weight: normal;
font-style: normal;
}
What am I doing wrong?
I use a fontface from font squirrel but they don't load. is there something in the code that has conflict?
#font-face {font-family: 'chunk-webfont';
src: url('/fonts/chunk-webfont.eot');
src: url('/fonts/chunk-webfont.eot?#iefix') format('eot'),
url('/fonts/chunk-webfont.woff') format('woff'),
url('/fonts/chunk-webfont.ttf') format('truetype'),
url('/fonts/chunk-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;}
try this
#font-face {font-family: 'chunk-webfont';
src: url('fonts/chunk-webfont.eot');
src: url('fonts/chunk-webfont.eot?#iefix') format('eot'),
url('fonts/chunk-webfont.woff') format('woff'),
url('fonts/chunk-webfont.ttf') format('truetype'),
url('fonts/chunk-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;}
Site in progress: http://stonetoolsupply.com
When I view the site http://stonetoolsupply.com in Firefox 26 on OSX 10.6.8 the fonts load correctly, but when I view this site as http://www.stonetoolsupply.com in Firefox 26 on OSX 10.6.8 the fonts aren't loaded and my text is unstyled. Why is this happening? I'm so stumped! Thanks!
Font stylesheet:
#font-face {
font-family: 'avenir_lt_std35_light';
src: url('avenirltstd-light-webfont.eot');
src: url('avenirltstd-light-webfont.eot?#iefix') format('embedded-opentype'),
url('avenirltstd-light-webfont.woff') format('woff'),
url('avenirltstd-light-webfont.ttf') format('truetype'),
url('avenirltstd-light-webfont.svg#avenir_lt_std35_light') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'avenir_lt_std85_heavy';
src: url('avenirltstd-heavy-webfont.eot');
src: url('avenirltstd-heavy-webfont.eot?#iefix') format('embedded-opentype'),
url('avenirltstd-heavy-webfont.woff') format('woff'),
url('avenirltstd-heavy-webfont.ttf') format('truetype'),
url('avenirltstd-heavy-webfont.svg#avenir_lt_std85_heavy') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'helvetica_neue_lt_st25ultraLt';
src: url('helveticaneueltstd-ultlt-webfont.eot');
src: url('helveticaneueltstd-ultlt-webfont.eot?#iefix') format('embedded-opentype'),
url('helveticaneueltstd-ultlt-webfont.woff') format('woff'),
url('helveticaneueltstd-ultlt-webfont.ttf') format('truetype'),
url('helveticaneueltstd-ultlt-webfont.svg#helvetica_neue_lt_st25ultraLt') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'helvetica_neue_lt_std45_light';
src: url('helveticaneueltstd-lt-webfont.eot');
src: url('helveticaneueltstd-lt-webfont.eot?#iefix') format('embedded-opentype'),
url('helveticaneueltstd-lt-webfont.woff') format('woff'),
url('helveticaneueltstd-lt-webfont.ttf') format('truetype'),
url('helveticaneueltstd-lt-webfont.svg#helvetica_neue_lt_std45_light') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'helvetica_neue_lt_std35_thin';
src: url('helveticaneueltstd-th-webfont.eot');
src: url('helveticaneueltstd-th-webfont.eot?#iefix') format('embedded-opentype'),
url('helveticaneueltstd-th-webfont.woff') format('woff'),
url('helveticaneueltstd-th-webfont.ttf') format('truetype'),
url('helveticaneueltstd-th-webfont.svg#helvetica_neue_lt_std35_thin') format('svg');
font-weight: normal;
font-style: normal;
}
Links to css files:
<link rel="stylesheet" type="text/css" href="http://stonetoolsupply.com/v/vspfiles/splash/css/main.css">
<link rel="stylesheet" type="text/css" href="http://stonetoolsupply.com/v/vspfiles/splash/fonts/stylesheet.css">
As per comments above - make sure you have refreshed the browser cache (also note that I am getting a javascript error in the F12 console)
Website us using this fonts css file and for some reason the correct fonts are being displayed only in Chrome, but not on Firefox or IE-
Can someone help us figure out what the problem could be and how we could fix this issue ?
Thanks
/*Museo Sans 100*/
#font-face {
font-family: 'museo_sans';
src: url('http://xxx.domain.com/fonts/museosans-100-webfont.eot');
src: url('http://xxx.domain.com/fonts/museosans-100-webfont.svg#museo_sans100') format('svg'),
url('http://xxx.domain.com/fonts/museosans-100-webfont.eot?#iefix') format('embedded-opentype'),
url('http://xxx.domain.com/fonts/museosans-100-webfont.woff') format('woff'),
url('http://xxx.domain.com/fonts/museosans-100-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/*Museo Sans 300*/
#font-face {
font-family: 'museo_sans';
src: url('http://xxx.domain.com/fonts/museosans-300.eot');
src: url('http://xxx.domain.com/fonts/museosans-300.svg#museo_sans300') format('svg'),
url('http://xxx.domain.com/fonts/museosans-300.eot?#iefix') format('embedded-opentype'),
url('http://xxx.domain.com/fonts/museosans-300.woff') format('woff'),
url('http://xxx.domain.com/fonts/museosans-300.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/*Museo Sans 700 italic*/
#font-face {
font-family: 'museo_sans';
src: url('http://xxx.domain.com/fonts/museosans-700italic-webfont.eot');
src: url('http://xxx.domain.com/fonts/museosans-700italic-webfont.svg#museo_sans700_italic') format('svg'),
url('http://xxx.domain.com/fonts/museosans-700italic-webfont.eot?#iefix') format('embedded-opentype'),
url('http://xxx.domain.com/fonts/museosans-700italic-webfont.woff') format('woff'),
url('http://xxx.domain.com/fonts/museosans-700italic-webfont.ttf') format('truetype');
font-weight: 700;
font-style: italic;
}
/*Museo Sans 900*/
#font-face {
font-family: 'museo_sans';
src: url('http://xxx.domain.com/fonts/museosans_900-webfont.eot');
src: url('http://xxx.domain.com/fonts/museosans_900-webfont.svg#museo_sans900') format('svg'),
url('http://xxx.domain.com/fonts/museosans_900-webfont.eot?#iefix') format('embedded-opentype'),
url('http://xxx.domain.com/fonts/museosans_900-webfont.woff') format('woff'),
url('http://xxx.domain.com/fonts/museosans_900-webfont.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}
/*Avro*/
#font-face {
font-family: 'arvo';
src: url('http://xxx.domain.com/fonts/arvo-regular-webfont.eot');
src: url('http://xxx.domain.com/fonts/arvo-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('http://xxx.domain.com/fonts/arvo-regular-webfont.woff') format('woff'),
url('http://xxx.domain.com/fonts/arvo-regular-webfont.ttf') format('truetype'),
url('http://xxx.domain.com/fonts/arvo-regular-webfont.svg#arvoregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'arvo';
src: url('http://xxx.domain.com/fonts/arvo-bold-webfont.eot');
src: url('http://xxx.domain.com/fonts/arvo-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('http://xxx.domain.com/fonts/arvo-bold-webfont.woff') format('woff'),
url('http://xxx.domain.com/fonts/arvo-bold-webfont.ttf') format('truetype'),
url('http://xxx.domain.com/fonts/arvo-bold-webfont.svg#arvobold') format('svg');
font-weight: bold;
}
#font-face {
font-family: 'arvo';
src: url('http://xxx.domain.com/fonts/arvo-italic-webfont.eot');
src: url('http://xxx.domain.com/fonts/arvo-italic-webfont.eot?#iefix') format('embedded-opentype'),
url('http://xxx.domain.com/fonts/arvo-italic-webfont.woff') format('woff'),
url('http://xxx.domain.com/fonts/arvo-italic-webfont.ttf') format('truetype'),
url('http://xxx.domain.com/fonts/arvo-italic-webfont.svg#arvoitalic') format('svg');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: "museosans-300";
src: url( 'http://xxx.domain.com/fonts/museosans-300.eot' ); /* IE */
src: local("museosans-300"), url( 'http://xxx.domain.com/fonts/museosans-300.ttf' ) format("truetype"); /* non-IE */
}
make sure that the .woff file exists and then reload the website with ctrl+F5.
font-faces are funny and I've heard the order can make a difference. I use this and have never had an issue:
#font-face {
font-family:'Name';
src: url('fontName.eot');
src: url('fontName.eot?#iefix') format('embedded-opentype'),
url('fontName.woff') format('woff'),
url('fontName.ttf') format('truetype'),
url('fontName.svg#fontName') format('svg');
font-weight: normal;
font-style: normal;
}
If that doesn't work I would say your eot and woff files are probably corrupt. If you used a font-face generator that can happen. try it again or try a different one.