The src url is correct, but the the text just shows up as a regular serif. Maybe it has to do with Shopify?
#font-face {
font-family: 'TradeGothicLTStdCnNo.18';
src: url('http://cdn.shopify.com/s/files/1/0065/5242/files/tradegothicltstd-cn18-webfont.eot');
src: url('http://cdn.shopify.com/s/files/1/0065/5242/files/tradegothicltstd-cn18-webfont.eot#iefix') format('embedded-opentype'),
url('http://cdn.shopify.com/s/files/1/0065/5242/files/tradegothicltstd-cn18-webfont.woff') format('woff'),
url('http://cdn.shopify.com/s/files/1/0065/5242/files/tradegothicltstd-cn18-webfont.ttf') format('truetype'),
font-weight: normal;
font-style: normal;
}
and
#navbar #navpanel .mainnav ul.tier1 > li {
font-size:13px;
font-family: 'TradeGothicLTStdCnNo.18';
}
It was a simple mistake.
the last src url
url('http://cdn.shopify.com/s/files/1/0065/5242/files/tradegothicltstd-cn18-webfont.ttf') format('truetype'),
should end with ; not ,
I thought of deleting the question, but instead decided to answer it myself just in case somebody else makes the same mistake.
Related
Custom font isn't loading on my website. Can someone help? I can't seem to get the #font-face to work and it looks right.
#font-face {
font-family: 'AppleGaramond';
src: url('fonts/AppleGaramond-BoldItalic.ttf') format('truetype');
src: url('fonts/applegaramond-bolditalic-webfont.woff') format('woff'),
src: url('fonts/applegaramond-bolditalic-webfont.woff2') format('woff2');
}
.h1, h1 {
font-size: 3.1em;
font-weight: 700;
letter-spacing: .03em;
line-height: 1.7em;
font-family: 'AppleGaramond', serif;
color: #161616;
}
I got it. I just had to add (..) before the /font. Double period (..) means you go up one folder and then look for the folder behind the slash.
#font-face {
font-family: 'AppleGaramond';
src: url('../fonts/AppleGaramond-BoldItalic.ttf') format('truetype');
src: url('../fonts/applegaramond-bolditalic-webfont.woff') format('woff'),
src: url('../fonts/applegaramond-bolditalic-webfont.woff2') format('woff2');
}
Thanks guys for helping me out!
I am trying to use a font I have downloaded from http://www.fontsquirrel.com/. The files I have attached are included in the fonts folder and in my HTML file I have an <h1> tag that says "Hello font".
However it does not work. Does anyone know why?
#font-face {
font-family:'vitaminregular';
src: url('fotns/VITAMIN_-webfont.eot');
src: url('fonts/VITAMIN_-webfont.eot?#iefix') format('embedded- opentype'), url('fonts/VITAMIN_-webfont.woff') format('woff'), url('fonts/VITAMIN_-webfont.ttf') format('truetype'), url('fonts/VITAMIN_-webfont.svg#vitaminregular') format('svg');
font-weight: normal;
font-style: normal;
}
h1 {
text-align:center;
font-size:100px;
font-family:'VitaminRegular;
}
h1{
text-align:center;
font-size:100px;
font-family:'VitaminRegular;
}
Your font-family call in H1 is missing a closing '
Change the call to
font-family:'VitaminRegular';
And this should work
#font-face {
font-family:'vitaminregular';
src: url('fotns/VITAMIN_-webfont.eot');
src: url('fonts/VITAMIN_-webfont.eot?#iefix') format('embedded- opentype'), url('fonts/VITAMIN_-webfont.woff') format('woff'), url('fonts/VITAMIN_-webfont.ttf') format('truetype'), url('fonts/VITAMIN_-webfont.svg#vitaminregular') format('svg');
font-weight: normal;
font-style: normal;
}
h1 {
text-align:center;
font-size:100px;
font-family:'vitaminRegular';
}
In the h1, font font-family should match #font-face font family property
I want to use some fonts and I want it to work without having this font on the client computer. I have done this but it doesn't work:
#font-face {
font-family: EntezareZohoor2;
src: url(Entezar2.ttf) format("truetype");
}
.EntezarFont {
font-family: EntezareZohoor2, B Nazanin, Tahoma !important;
}
Following lines are used to define a font in css
#font-face {
font-family: 'EntezareZohoor2';
src: url('fonts/EntezareZohoor2.eot'), url('fonts/EntezareZohoor2.ttf') format('truetype'), url('fonts/EntezareZohoor2.svg') format('svg');
font-weight: normal;
font-style: normal;
}
Following lines to define/use the font in css
#newfont{
font-family:'EntezareZohoor2';
}
One of the best source of information on this topic is Paul Irish's Bulletproof #font-face syntax article.
Read it and you will end with something like:
/* definition */
#font-face {
font-family: EntezareZohoor2;
src: url('fonts/EntezareZohoor2.eot');
src: url('fonts/EntezareZohoor2.eot?') format('☺'),
url('fonts/EntezareZohoor2.woff') format('woff'),
url('fonts/EntezareZohoor2.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/* use */
body {
font-family: EntezareZohoor2, Tahoma, serif;
}
When I went to Google fonts all they gave me were true type font files .ttf and didn't explain at all how to use the #font-face to include them into my document. I tried the web font generator from font squirrel too, which just kept running the loading gif and not working... I then found this site -
https://transfonter.org/
I had great success using the following method:
I selected the Add Fonts button, leaving the default options, added all of my .ttf that Google gave me for Open Sans (which was like 10, I chose a lot of options...).
Then I selected the Convert button.
Heres the best part!
They gave me a zip file with all the font format files I selected, .ttf, .woff and .eot. Inside that zip file they had a demo.html file that I just double clicked on and it opened up a web page in my browser showing me example usages of all the different css font options, how to implement them, and what they looked like etc.
#font-face
I still didn't know at this point how to include the fonts into my stylesheet properly using #font-face but then I noticed that this demo.html came with it's own stylesheet in the zip as well. I opened the stylesheet and it showed how to bring in all of the fonts using #font-face so I was able to quickly, and easily, copy paste this into my project -
#font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-BoldItalic.eot');
src: url('fonts/Open_Sans/OpenSans-BoldItalic.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-BoldItalic.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-BoldItalic.ttf') format('truetype');
font-weight: bold;
font-style: italic;
}
#font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-LightItalic.eot');
src: url('fonts/Open_Sans/OpenSans-LightItalic.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-LightItalic.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-LightItalic.ttf') format('truetype');
font-weight: 300;
font-style: italic;
}
#font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-SemiBold.eot');
src: url('fonts/Open_Sans/OpenSans-SemiBold.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-SemiBold.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
#font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-Regular.eot');
src: url('fonts/Open_Sans/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-Regular.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-Light.eot');
src: url('fonts/Open_Sans/OpenSans-Light.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-Light.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
#font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-Italic.eot');
src: url('fonts/Open_Sans/OpenSans-Italic.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-Italic.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-Italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-SemiBoldItalic.eot');
src: url('fonts/Open_Sans/OpenSans-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-SemiBoldItalic.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-SemiBoldItalic.ttf') format('truetype');
font-weight: 600;
font-style: italic;
}
#font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-ExtraBold.eot');
src: url('fonts/Open_Sans/OpenSans-ExtraBold.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-ExtraBold.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-ExtraBold.ttf') format('truetype');
font-weight: 800;
font-style: normal;
}
#font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-ExtraBoldItalic.eot');
src: url('fonts/Open_Sans/OpenSans-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-ExtraBoldItalic.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-ExtraBoldItalic.ttf') format('truetype');
font-weight: 800;
font-style: italic;
}
#font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-Bold.eot');
src: url('fonts/Open_Sans/OpenSans-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-Bold.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
The demo.html also had it's own inline stylesheet that was interesting to take a look at, though I am familiar with working with font weights and styles once they are included so I didn't need it much. For an example of how to implement a font style onto an html element for reference purposes you could use the following method in a similar case to mine after #font-face has been used properly -
html, body{
margin: 0;
font-family: 'Open Sans';
}
.banner h1{
font-size: 43px;
font-weight: 700;
}
.banner p{
font-size: 24px;
font-weight: 300;
font-style: italic;
}
Go through http://www.w3.org/TR/css3-fonts/
Try this:
#font-face {
font-family: 'EntezareZohoor2';
src: url('EntezareZohoor2.eot');
src: local('EntezareZohoor2'), local('EntezareZohoor2'), url('EntezareZohoor2.ttf') format('svg');
font-weight: normal;
font-style: normal;
}
Try this link1,link2
#font-face {
font-family: 'RieslingRegular';
src: url('fonts/riesling.eot');
src: local('Riesling Regular'), local('Riesling'), url('fonts/riesling.ttf') format('truetype');
}
I used Ataturk's font like this. I didn't use "TTF" version. I translated orginal font version ("otf" version) to "eot" and "woof" version.
Then It works in local but not working when I uploaded the files to server.
So I added "TTF" version too like this. Now, It's working on Chrome and Firefox but Internet Explorer still defence.
When you installed on your computer "Ataturk" font, then working IE too. But I wanted to use this font without installing.
#font-face {
font-family: 'Ataturk';
font-style: normal;
font-weight: normal;
src: url('font/ataturk.eot');
src: local('Ataturk Regular'), url('font/ataturk.ttf') format('truetype'),
url('font/ataturk.woff') format('woff');
}
You can see it on my website here: http://www.canotur.com
I have a CSS file in /css and fonts in /images. My CSS code uses #font-face, and it works in IE8, IE9, and all the decent browsers, but obviously not in IE7.
#font-face {
font-family: 'ChunkFiveRegular';
src: url('../image/chunkfive-webfont.eot');
src: url('../image/chunkfive-webfont.eot?#iefix') format('embedded-opentype'), url(../images/chunkfive.woff) format('woff'), url(../images/chunkfive-webfont.ttf) format('truetype'), url(../images/chunkfive-webfont.svg) format('svg');
font-weight: normal;
font-style: normal;
}
h1, h2, h3 {
font-family: ChunkFiveRegular, Georgia, serif;
font-weight: normal;
text-transform: uppercase;
}
Why does the text still show up set as Georgia?
If your fonts are in /images, you need to use /images, not /image. That said, your fonts belong in /css; fonts are not images.
Also, according to Paul Irish's article, 'eot' should work better than 'embedded-opentype' (untested).
http://www.thecssninja.com/demo/css_fontface/
#font-face {
font-family:InYourFace;
src: url('Ubuntu-B.eot');
// this smile and ? fix your problem
// because IE don't wanl load local font without this hack
src: url('Ubuntu-B.eot?') format('☺'),
url('Ubuntu-B.woff') format('woff'),
url('Ubuntu-B.ttf') format('truetype'),
url('Ubuntu-B.svg#webfontssbCkuz5') format('svg');
}
I am hoping someone can please point out what's not working about this font-face implementation. I've testing this using the body tag so there's no question as to whether the issue is with the HTML (yes, I do have a body tag.)
I have obtained the fonts and the implementation CSS from FontSquirrel. Thanks for looking at this!
CSS:
#font-face {
font-family: 'DymaxionScriptRegular';
src: url('DymaxionScript-webfont.eot');
src: url('DymaxionScript-webfont.eot?#iefix') format('embedded-opentype'),
url('DymaxionScript-webfont.woff') format('woff'),
url('DymaxionScript-webfont.ttf') format('truetype'),
url('DymaxionScript-webfont.svg#DymaxionScriptRegular') format('svg');
font-weight: normal;
font-style: normal;
}
body {
font-family: DymaxionScriptRegular, courier;
}
File tree structure:
Screenshot of Courier fallback font:
Answer: Apparently if one leaves "Regular" off of the font-family declaration, everything works fine. Answered my own question by playing with it.
Real Answer: My first "answer" only worked in Safari. What worked in all of them was changing "'DymaxionScript-webfont..." to '../DymaxionScript-webfont... After I did that, everything worked. It was bad pathing.
Here is a more concise #font-face implementation, that I know works across the board:
#font-face {
font-family: 'DymaxionScriptRegular';
src: url('/path/to/font/webfont.eot?') format('eot'),
url('/path/to/font/webfont.woff') format('woff'),
url('/path/to/font/webfont.ttf') format('truetype'),
url('/path/to/font/webfont.svg#webfont') format('svg');
font-weight:normal;
font-style:normal;
}
For various web fonts you can check out google.com/webfonts which has a bunch of different fonts for use, but you just add a link to google's site and it will return the proper formatting for most browsers as far back as ie6
#font-face {
font-family: 'DymaxionScriptRegular';
src: url('webfont.eot');
src: url('webfont.eot?#iefix') format('embedded-opentype'),
url('webfont.woff') format('woff'),
url('webfont.ttf') format('truetype'),
url('webfont.svg#webfont') format('svg');
font-weight: normal;
font-style: normal;
}
body {
font-family: DymaxionScriptRegular, courier;
}