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/
Related
In my webpage, using google web fonts is ok.
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Source+Code+Pro:300,400,600,700,300italic,400italic,600italic">
<div style="font-family: 'Source Code Pro';">My Text</div>
it's ok using like this. But I've server hosted .otf font and I want to use it on my webpage, I've tried using like
#font-face {
font-family: 'MyFontName';
src: url("https://www.mywebsitepage.com/fonts/MyHostedFont.otf") format("opentype");
}
<div style="font-family: 'MyFontName';">My Text</div>
But it doesn't work. The reason why use my font is I can't find my font in free google web fonts.
Regarding to your sample, I hope that not the case you are really using it. I mean you have separate .css file which includes the font-face declaration and you attach this file in the head of your document, or using it like a part of <style>...</style> construction better also in head of document. If yes, so you can try to not use .otf, but using .woff and .woff2 instead.
It's not proper way to use .otf for web fonts now. Currently, if you don't really need support old versions of IE (8 and lower) you can just load fonts in .woff and .woff2 formats and that will cover your needs.
Like this:
#font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}
If you have .otf font you can really easy convert it to need web-font formats using some online generators like https://transfonter.org/ or similar.
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.
Everything in my web works well except #font face in the CSS file.
My web uses 2 fonts which neither of them can be loaded to display. One of them is fontawesome. I both tried to load the font from my server and the fontawesome server, but the result is the same.
I tried to view the page in IE Edge, Firefox and Chrome browser in PC and neither of them worked properly. However, when I tested in iPad Safari, it worked well.
Please be informed that all font files are accessible and my PC can view font in fontawesome.io perfectly. Please kindly advice what is wrong in my code.
Here is the code:
#font-face {
font-family: 'FontAwesome';
src: url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0');
src: url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
Here is the result in PC (Font Face is not load):
Here is the result in iPad (Font Face is load successfully):
From the png it's imposible to understand the problem. I can tell you to Read well this link you could found your solution.
If Using CSS
Copy the entire font-awesome directory into your project.
In the <head> of your html, reference the location to your font-awesome.min.css.
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
Using Sass or Less
Use this method to customize Font Awesome 4.7.0 using LESS or SASS.
Copy the font-awesome/ directory into your project.
Open your project's font-awesome/less/variables.less or font-awesome/scss/_variables.scss and edit the #fa-font-path or $fa-font-path variable to point to your font directory.
#fa-font-path: "../font";
The font path is relative from your compiled CSS directory.
If your website runs via HTTPS protocol and you are trying to load external resources via HTTP - the loading will be blocked by browser.
Second, if the above is not the case - make sure you are loading the fonts with correct file path, for example:
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
or use bootstrap CDN:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
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 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