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
Related
My question should be strange but it has it's own sense.
My web browser is not compatible with woff format, and is not Internet explorer but a modified version of IE for sure.
This web browser is running by an hmi application based on TIA Portal (siemens), with this browser I need to look, using siemens web browser, an html page generated by one vision system.
This video system is using an icon font in woff format, and is not compatible with my web browser.
My idea was that to convert the font in ttf and install it locally on pc, but this don't work on my pc and olso in the hmi (hmi is running a windows 7 embedded version) and I don't understand why it doesn't work in each pc!
the css generated by the sensor is this:
#font-face {
font-family: 'fontello';
src: url('fontello.eot?60611638');
src: url('fontello.eot?60611638#iefix') format('embedded-opentype'),
url('fontello.wof?60611638') format('woff'),
url('fontello.svg?60611638#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
Obviously i cannot change the generated html.
Why the browser don't use the font converted and installed locally??
Your #font-face rule is missing a .ttf url, as well as a local reference
Try this:
#font-face {
font-family: 'fontello';
src: local('fontello'),
url('fontello.ttf') format('truetype'),
url('fontello.eot#iefix') format('embedded-opentype'),
url('fontello.woff') format('woff'),
font-weight: normal;
font-style: normal;
}
See also: MDN Docs: #font-face
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.
I am working on a webfonts server and I got the api to spit out the css with the correct mime types.They are also getting linked to the page.
#font-face {
font-family: 'Pagul';
src: url('http://localhost:5000/api/webfonts/static/Pagul.eot');
src: local('☺'), url('http://localhost:5000/api/webfonts/static/Pagul.woff') format('woff'),
url('http://localhost:5000/api/webfonts/static/Pagul.ttf') format('truetype'),
font-weight: normal;
font-style: normal;
}
The ttf,eot files can be downloaded manualy using the links, for some reason these fonts are
not loaded by the browser what am I doing wrong here ? The font files dont have proper mimetypes is that the issue ?
I tried font-squirells syntax also,it's not working.
PS: The Css is dynamically generated and added to the head ?
Use relative paths instead of absolutes. For example, if your CSS is in site/css/style.css and your fonts are in the site/api/webfonts/static/ directory:
#font-face {
font-family: Pagul;
src: url('../api/webfonts/static/Pagul.eot');
src: url('../api/webfonts/static/Pagul.woff') format('woff'),
url('../api/webfonts/static/Pagul.ttf') format('truetype'),
font-weight: normal;
font-style: normal;
}
Alternatively, use a service like Google Fonts and either link their CSS on your HTML or import it directly into your CSS
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 .