I set url of fonts in css file such as this.
#font-face {
font-family: 'soap-icons';
src: url("../fonts/soap-icons.eot?26664784");
src: url("../fonts/soap-icons.eot?26664784#iefix") format("embedded-opentype"), url("../fonts/soap-icons.woff?26664784") format("woff"), url("../fonts/soap-icons.ttf?26664784") format("truetype"), url("../fonts/soap-icons.svg?26664784#soap-icons") format("svg");
font-weight: normal;
font-style: normal; }
This run currently in html file.But after that I use this html file as a layout into mvc project It don't work currently .I test all css files path and found its are true.I change this urls to complete path of root site but don't work.
my project folders image :
Please advice
try like this src: url("/Content/Travelo/fonts/oap-icons.eot?26664784")
or
try moving your fonts to default fonts folder of MVC application
In your browser debug mode (F12), check in the network tag to see what the exact URL is that it is trying to retrieve your fonts from. It might be using a ../ too many.
Related
I am creating some text in html and I've tried using #fontface, which of course work.
The problem is how could I import fonts from my ftp server. I don't really get what path or something like this should be in url in #fontface
The simplest way is to add your fonts somewhere in the path of your web server (where html pages are located) so your font-face will be something like:
#font-face {
font-family: "Open Sans";
src: url("/path/to/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
url("/path/to/fonts/OpenSans-Regular-webfont.woff") format("woff");
}
Using Grails version 2.4.4. and trying to load CSS resource from URL
http://myAppName.com:7777/myApp/assets/style.css
/myApp/assets/style.css
I've set in style.css:
#font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?t0751g');
src: url('../fonts/icomoon.eot?t0751g#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?t0751g') format('truetype'),
url('../fonts/icomoon.woff?t0751g') format('woff'),
url('../fonts/icomoon.svg?t0751g#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
Beside this, I added few other options for proper icon load.
Assets structure:
/assets/fonts/icomoon.ttf (and all other icomoon files are here)
/assets/stylesheets/style.css
when I use 2. url it loads my custom icons normally but when I set the 1. url in <style> as shown above, icon loading fails.
Both url-s should point to the same file and I don't understand why this is not working. Anyone knows what I am doing wrong ?
Any help will be appreciated!
So I found out that fonts does not support cross-origin domain, and I used icomoon icons as font to import it from another domain. On the other hand, i found out you can use Fontello which generates embedded JS and automatically fixes this issues, so it is generally better to use.
I have downloaded on my computer a .ttf file containing the font I want to use. What I would like to do is to apply it to my html page. I am using a separate .css stylesheet to which there's a link inside the head section of my html file.
How exactly do I apply this custom font? I tried using
#font-face and I have the following code in my .css file, but it won't work:
#font-face {
font-family: "chosenNameForCustomFont";
src: url("fonts/customFontName");
}
p {
font-family: chosenNameForCustomFont;
}
The paragraphs in the html file will still be normal, without the font.
If I put the above code inside the actual html file, within "style" tags, it works. What am I doing wrong then?
Generally when I need to do this I use the fontsquirrell generator. You need to upload the font you need to use and it will generate an example to use it.
After you generate the font kit you'll get a bundle with several files:
font_name.eot
font_name.svg
font_name.ttf
font_name.woff
font_name.woff2
font_name-demo.html <-- Open it
stylesheet.css
After you open the .html you'll see your font perfectly working in the sample page. You need to copy all those files (.eot, .svg, .ttf, .woff, .woff2) into your source folder and reference those in your .css (may be you'll need to edit the directory depending on where you put the font files) as the stylesheet.css does:
#font-face {
font-family: 'font_name';
src: url('/relative/path/font_name-webfont.eot');
src: url('/relative/path/font_name-webfont.eot?#iefix') format('embedded-opentype'),
url('/relative/path/font_name-webfont.woff2') format('woff2'),
url('/relative/path/font_name-webfont.woff') format('woff'),
url('/relative/path/font_name-webfont.ttf') format('truetype'),
url('/relative/path/font_name-webfont.svg#fontnameregular') format('svg');
font-weight: normal;
font-style: normal;
}
Remember the fonts you are using need to be legally eligible for web embedding.
Hope it helps
I'm currently making a webpage that imports the needed fonts from Google Fonts this way:
#import url(http://fonts.googleapis.com/css?family=Italianno);
The problem is that every time I load the page I need to be connected to the Internet and it also takes time to load the font. Is there any way I can load the font offline because while testing the page I'll be refreshing it countless number of times and I might not be connected to the internet all the time and I don't want to wait for 3-5 seconds every time for the font to be loaded.
I tried installing the font in the system and then using it in the CSS. It didn't work.
Hey make a fonts folder with css folder and put the desired font there. Then in CSS call this code as example for MeriyoUI font as mentioned below. This would load the font onto your app.
For this you just need to download the font and put that in fonts folder. (pre-requisite).Try using web safe fonts.
Hope it helps.
CSS
#font-face
{
font-family: 'Meiryo UI';
font-weight: normal;
font-style: normal;
src: url('../fonts/MeiryoUI.ttf');
}
1. create a folder in website directory and move your fonts
to it! ( .ttf , .eot , .woff )
example: directory --> webfonts
2. create a css document for that!
example: directory --> css --> webfont.css
3. use this code into webfonts.css
#font-face {
font-family: 'name';
font-style: normal;
font-weight: 400;
src: url('../webfonts/fontname.eot');
src: url('../webfonts/fontname.eot?#iefix') format('embedded-opentype'),
url('../webfonts/fontname.woff2') format('woff2'),
url('../webfonts/fontname.woff') format('woff'),
url('../webfonts/fontname.ttf') format('truetype');
}
4. and in the first line of haed element into your webpage, use bellow code:
<link rel="stylesheet" href="css/webfonts.css" type="text/css"/>
Use CSS3 #font-face. Try making font face of your fonts from any fontface generator like this http://www.fontsquirrel.com/tools/webfont-generator. And to learn how to use them take a look in here http://css-tricks.com/snippets/css/using-font-face/
I have set up a website. I was hosting it on webs.com, but they started to place an ad bar on html-only hosting. As it would not look good, I changed it to 000webhost. Since I uploaded everything to 000webhost, I can't make the fonts to load.
webs:
http://bluescreen-ofdeath.webs.com/
000webhost:
http://bsod.comze.com/
I have tried pointing the ttf fonts from my webs account, but it won't load.
As the 000webhost take a day to answer free accounts, I decided to ask you. Is there anything I am missing?
Edit: Here is an example of my #Font-face
#font-face {
font-family: 'fixedsys500c-webfont';
src: url('../font/fixedsys500c-webfont.eot');
src: url('../font/fixedsys500c-webfont.eot?#iefix') format('embedded-opentype'),
url('../font/fixedsys500c-webfont.woff') format('woff'),
url('../font/fixedsys500c-webfont.ttf') format('truetype'),
url('../font/fixedsys500c-webfont.svg#fixedsys500c-webfont') format('svg');
font-weight: normal;
font-style: normal;
}
The font(s) have to be imported before the stylesheet, as Google Web Fonts dictate.
Instructions: To embed your Collection into your web page, copy the
code as the first element in the <head> of your HTML document.
Don't use single quotes. Your fonts will work nicely. It's so easy, look below:
#font-face {
font-family:Arial;
src:url(Arial.ttf)format(.ttf);
}
remind it, internet explorer only works with EOT font files.
As far as I can tell, 000webhost only accepts .woff files.
.ttf and .eot do not work for me