I am trying to get this font "Albermarle Swash" to appear but after searching the internet for answers I can't find any answers. Does anybody know what I am doing wrong?? I am using Chrome, tried it on FF and IE and still no good.
#font-face {
font-family: 'AlbermarleSwash';
src: url('http://ensabahone.000webhostapp.com/fonts/AlbemarleSwash.ttf') format('truetype');
}
h1 {
font-family: 'AlbermarleSwash';
}
http://jsfiddle.net/6vURk/11/
I've also tried, and no luck:
<link href='http://ensabahone.000webhostapp.com'; rel='stylesheet' type='text/css'>
Yes there is cross origin problem and also you need to convert the font into web font for better support of all devices, you can go through https://transfonter.org/
#font-face {
font-family: 'Albemarle Swash';
src: url('AlbemarleSwash.eot');
src: url('AlbemarleSwash.eot?#iefix') format('embedded-opentype'),
url('AlbemarleSwash.woff2') format('woff2'),
url('AlbemarleSwash.woff') format('woff'),
url('AlbemarleSwash.ttf') format('truetype'),
url('AlbemarleSwash.svg#AlbemarleSwash') format('svg');
font-weight: normal;
font-style: normal;
}
I just looked at your fiddle and noticed cross origin errors... Cross origin doesn't allow you to access other websites from your own to avoid click baiting and other malicious techniques (JSONP, among others being exceptions). I would recommend downloading the file and uploading it to your own server and using it locally.
Sum up: You can't use this file while it's on the other web host because of cross origin policies. Just download it and upload it to your own web server.
Related
Visiting a website i have found out the menu links were abnormally bolder than wile watching the same page from my collegue computer with same browser.
Deleting the corresponding font from my windows font folder corrected the difference.
My question is how preventing this possibility when designing css fonts on a website
Most #font-face at-rules begin with a local(name-of-local-file) and then a reference to your distant url(/on/server/teh-webfont.woff).
Browsers will try, in this typical situation, to use the local file and if they find nothing will continue by downloading from your server the distant asset. If they find a local matching font, then they'll use it immediately and will stop their search of a font thus they won't download and use your distant asset.
Conclusion: don't use local() and only keep those url(). It's the contrary of this SO answer
Example without local() and many url() corresponding to many formats. Browsers will download the first one that please them, not 2+ of them:
#font-face {
font-family: 'Gudea';
src: url('./fonts/gudea/Gudea-Regular-webfont.eot');
src: url('./fonts/gudea/Gudea-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('./fonts/gudea/Gudea-Regular-webfont.woff2') format('woff2'),
url('./fonts/gudea/Gudea-Regular-webfont.woff') format('woff'),
url('./fonts/gudea/Gudea-Regular-webfont.ttf') format('truetype'),
url('./fonts/gudea/Gudea-Regular-webfont.svg#gudearegular') format('svg');
font-weight: normal;
font-style: normal;
}
Download the font .ttf
Saving the font in a folder in your web site
For call font use this code in css:
#font-face {
font-family: "YourFont";
src: url('font/YourFont.ttf');
}
.example{
font-family: YourFont, sans-serif;
}
Yes, I know there is an identical question and many similar ones asked and answered here and many resources online discussing this issue. None have helped in my case so I am taking desperate measures.
I am trying to load web fonts using the #font-face syntax. Here's the code (I am loading more than one but the syntax is identical):
#font-face {
font-family: 'MyFont';
src: url('../typography/MyFont-Book.eot');
src: local('?'),
url('../typography/MyFont-Book.eot?#iefix') format('embedded-opentype'),
url('../typography/MyFont-Book.woff') format('woff'),
url('../typography/MyFont-Book.ttf') format('truetype'),
url('../typography/MyFont-Book.svg') format('svg');
font-weight: normal;
font-style: normal;
}
As stated in the title, it's not working in ie8 (works fine in ie9 and 10 and obviously all other browsers). I have tried several things.
In the beginning, I got the error "CSS3111: #font-face encountered unknown error" and I found this site. I followed the steps, changed the names of the fonts and regenerated them. Apparently, that must have fixed something because I am not getting that error anymore. I also see the fonts being loaded correctly in the network sniffer, all coming back with a clean 200.
I have cleared my cache (several times) but still no dice. The font still doesn't show up on the page. Instead, the fallback "Arial" font is displayed, messing up the layout because it's way bigger than the web font.
Anyone got a clue what the eff might be going on?
I have several projects which load fonts down to IE8. They have an almost identical definition to the one you have but, without the src : local(?).
#font-face {
font-family: 'MyFont';
src: url('../typography/MyFont-Book.eot');
src: url('../typography/MyFont-Book.eot?#iefix') format('embedded-opentype'),
url('../typography/MyFont-Book.woff') format('woff'),
url('../typography/MyFont-Book.ttf') format('truetype'),
url('../typography/MyFont-Book.svg') format('svg');
font-weight: normal;
font-style: normal;
}
It's possible to use downloaded fonts on a local web page (XAMPP) without internet connection ? I need this to see the fonts because some people maybe can't afford internet connections and they use theirs computers only to work.
This is the web font: http://openfontlibrary.org/en/font/didact-gothic
I tried this with no luck: http://css-tricks.com/snippets/css/using-font-face/
Thanks in advance!!!!
EDIT
I think the place where the files are stored is the problem because I have this .css and no work. The place of all my files is /opt/lammp/htdocs
#font-face {
font-family: 'DidactGothicMedium';
src: url('didactgothic.eot');
src: url('didactgothic.eot') format('embedded-opentype'),
url('didactgothic.woff') format('woff'),
url('didactgothic.ttf') format('truetype'),
url('didactgothic.svg#DidactGothicMedium') format('svg');
}
p {
font-family: 'Didact Gothic';
font-weight: normal;
font-style: normal;
padding-left: 25px;
padding-right: 25px;
}
input {
font-family: 'Didact Gothic';
font-weight: normal;
font-style: normal;
}
Yes it's possible, if you just go to your localhost in the browser it should work just like when you would port forward it and go there with your own IP/Domain.
If that #font isn't working for you, make sure 1) You use Chrome/Firefox (Internet explorer only supports certain file exentions (.otf I think).
and 2) You have the right path setup!
Also maybe some of your html/css code could help us awnser your question :)
You have to use a web font kit, which you can download from sites like http://convertfonts.com, include the style and font files and the font will work on local development, but for that you first need a otf or ttf file for the font to download the webkit.
just make a fonts folder, like you have css, js folder and in your css file just include /fonts/, like
#font-face { font-family: 'MuseoSans-100';
src: url('fonts/museosans-100.eot');
src: url('fonts/museosans-100.eot') format('embedded-opentype'),
url('fonts/museosans-100.woff') format('woff'),
url('fonts/museosans-100.ttf') format('truetype'),
url('fonts/museosans-100.otf') format('opentype'),
url('fonts/museosans-100.svg#MuseoSans-100') format('svg');
} just an example
if your css file is in another folder make the changes to url, correspondingly
I have added a font to a site, added the CSS and uploaded the font files and it is working in IE but not in Firefox. Why is that?
CSS:
#font-face {
font-family: 'MyFont';
src: url('MyFont.eot');
src: url('MyFont.eot?#iefix') format('embedded-opentype'),
url('MyFont.woff') format('woff'),
url('MyFont.ttf') format('truetype'),
url('MyFont.svg#MyFontRegular') format('svg');
font-weight: normal;
font-style: normal;
}
label { font-family: 'MyFont'; font-size: 20px; }
The label was just a test, but it's working. The font files are in the same directory as the CSS.
I've tried almost everything, and its still not working....
Does anybody know what's wrong? Any help appreciated.
In order:
Check if the font is on Google Web Fonts. If it is, use that version, don't embed your self (for ease of use, caching, browser update compat. etc.)
If not, then check your MIMEs. To do this, use Firebug's Net panel to look at the headers and check they are correct.
If the MIME is wrong, then fix it using either .htaccess, or by writing a PHP file that uses file_get_contents() and header() to fix it.
I found out there was another CSS file, overwriting the one i made.
Problem solved
i understand its a bit rude to ask a question from scratch however i have done my research and tried a few examples with no sucess.
im trying to display a font from my local servers.
ex. DigitaldreamNarrow.ttf
which is located in :
css/fonts/DigitaldreamNarrow.ttf
i have tried placing it in my css file in the following manner:
#font-face {
font-family: DigitaldreamNarrow;
src: url(‘css/fonts/DigitaldreamNarrow.ttf’);
}
.top {
font-family: DigitaldreamNarrow;
font-size: 0.2%;
}
however at this point im lost and i dont see any results in my display.
help?
Deploying fonts via CSS is generally unsupported. Take a look at Cufon.
#font-face {
font-family: 'ArvoRegular';
src: url('Arvo-Regular-webfont.eot');
src: local('☺'), url('Arvo-Regular-webfont.woff') format('woff'), url('Arvo-Regular-webfont.ttf') format('truetype'), url('Arvo-Regular-webfont.svg#webfontau9vOdrl') format('svg');
font-weight: normal;
font-style: normal;
}
You're going to have different results from different browsers (not all browsers support/use 'eot' for example). Check out font squirrel, and download an #face kit. Very helpful resource. http://www.fontsquirrel.com/fontface
This is more than likely the direction fonts will take, and Cufon will likely become "Gif Builder"...IMO.
#trey, write this
#font-face {
font-family: 'DigitaldreamNarrow';
src: url(‘../css/fonts/DigitaldreamNarrow.ttf’);
}
may there is a problem with your url please it.
May be you have to add inverted comma to the font .