I'm at my wits end with this problem. I'm trying to include a font. The CSS file is located at project/css/.
My font is located at project/fonts/iconfont/.
I have the following font files in that folder (even though I'd probably only need woff):
icons.eot
icons.svg
icons.ttf
icons.woff
This is how I try to include my font:
#font-face {
font-family: icons;
src: url(../fonts/iconfont/icons.woff) format('woff');
font-weight: normal;
font-style: normal;
}
However I can't use the font. Checking with Chrome developer tools it doesn't even load. What am I doing wrong here?
Try to link all fonts format in #font-face selector and call font-family with custom name in quotation marks.
/*--- Define a custom web font ---*/
#font-face {
font-family: 'YourWebFont';
src:
url('../fonts/iconfont/icons.woff') format('woff'),
url('../fonts/iconfont/icons.ttf') format('ttf'),
url('../fonts/iconfont/icons.eof') format('eof'),
url('../fonts/iconfont/icons.svg') format('svg');
}
/*--- Use that font on the page ---*/
body {
font-family: 'YourWebFont', sans-serif;
}
Good luck!
Related
I'm having a hard time trying to understand what's wrong... I am declaring a simple font face rule:
#font-face {
font-family: 'my-font';
url: ('/assets/font.woff2') format('woff2');
font-style: normal;
font-weight: normal;
}
I'm declaring it like this:
body {
font-family: 'my-font', monospace;
}
body h1 {
font-family: inherit;
}
File structure:
index.html
styles.css
assets/
font.woff2
h1 always renders monospace, no matter what the url is.
If I visit localhost:port/assets/font.woff2 the font gets downloaded correctly by the browser.
If I add a <link ... rel="preload"> the request is made but still doesn't seems to be applied to the document.
I have tested in multiple browsers.
There's nothing wrong with the declaration.
Try this way :
#font-face {
font-family: 'MyFont';
src: url('./assets/font.woff2') format('woff2'),
}
it should be
src: url('./assets/font.woff2')
Can you confirm this?
The #font-face rule should be added to the stylesheet before any styles, is it?
The font file is in the root directory of your web page?
Try 'myFont' not 'my-font'.
#font-face {
font-family: Chunkfive;
src: url('Chunkfive.otf');
}
Try this for URL of font file.
url: ('./assets/font.woff2') format('woff2');
I am currently trying to import a font with the #font-face CSS element, but it is not working/ showing up. It is the font Francaise from Dafont.com, it is in the css folder with the stylesheet, but will not change my header font to desired font.
I have already tried searching Stack for similar queries, but each attempt is in vain.
#font-face {
font-family: 'Francaise';
src: local('Francaise Regular Demo.ttf') format('truetype');
}
I have anticipated my header text to be the aforementioned font, but it only shows up as the fallback font, cursive Comic Sans.
You have to use #font-face url without adding white space. Just rename your font and try the following structure.
#font-face {
font-family: 'Francaise';
font-style: normal;
font-weight: 400;
src: url('francaise-regular-demo.ttf'); /* IE9 Compat Modes */
src: local('Francaise Regular Demo'), local('Francaise Regular Demo'),
url('francaise-regular-demo.ttf') format('truetype');
}
Use the font-family: 'Francaise'; in your css.
first check the
Browser Support for Font Formats
use src for font
#font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
* {
font-family: myFirstFont;
}
you can refer the site
http://fontsforweb.com/index.php
I'm trying to import a CSS font but unfortunately it's not working and I'm really unsure why.
The font in the filesystem called 'deadjim.ttf' It is placed inside my main public_html and yes it is the correct path, visiting the path downloads the file.
#font-face {
font-family: 'deadjim';
src: url('http://url.com/deadjim.ttf'); /*URL to font*/
}
I've tried clearing my cache but this hasn't worked either. Apparently it's working on Safari but I have no means of checking having a windows PC
Make sure that you're calling the font like normal; #font-face doesn't apply any styles to the html, it just defines the font.
#Define your font
#font-face {
font-family: 'deadjim';
src: url('http://url.com/deadjim.ttf'); /*URL to font*/
}
#Will apply the font as default on the entire page
html, body{
font-family: 'deadjim';
}
To be sure your font works in all browser / most platforms, you will need to do something similar to this (with all formats provided) - it's not enough to just have the .ttf-file.
Here's an example of including FontAwesome:
#font-face {
font-family: 'fontawesome';
src: url('fontawesome-webfont.eot?v=4.7.0');
src: url('fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
url('fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
url('fontawesome-webfont.woff?v=4.7.0') format('woff'),
url('fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
url('fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
To my knowledge to use a custom font, stored locally in this case, you would use something similar to this.
#font-face {
font-family: 'theFontFamily';
src local('the font'),
local('the-font'),
url(path/to/the-font);
}
.fontClass {
font-family: 'theFontFamily', extra_settings;
}
So using this font, locally, would you expect this to work?
#font-face {
font-family: 'Pacifico';
src: local('Pacifico Regular'),
local('Pacifico-Regular'),
url(resources/fonts/Pacifico.ttf);
}
.logo-container {
font-family: 'Pacifico', cursive;
}
As when I try it, the code changes the font, just not to the desired font. It looks like this.
Whereas if I use the import link, <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">, just using the following code works.
.logo-container {
font-family: 'Pacifico', cursive;
}
This looks like this.
I have probably made a simple mistake and I would appreciate if someone would be able to aid me in fixing this.
Make sure you link the source url properly. Try
#font-face {
font-family: 'myPacifico' ;
src: url('/resources/fonts/Placifico.ttf') format('truetype');
}
That's basic enough, then to use...
.logo-container {
font-family: 'myPacifico', san-serif; }
San-serif in this case is a fallback. In this case, ive linked to the regular ttf file. For bold and other styles, u'ld have to link to that in another #font-face with a different name.
Perhaps this will work (tricky to say for sure without being able to test 100%):
#font-face {
font-family: 'Pacifico';
src: url('Pacifico-Regular.eot');
src: url('Pacifico-Regular.eot?#iefix')
url('Pacifico-Regular.woff2') format('woff2'),
url('Pacifico-Regular.woff') format('woff'),
url('Pacifico-Regular.ttf') format('truetype'),
url('Pacifico-Regular.svg#svgFontName') format('svg');
}
To just use the TrueType font locally:
#font-face {
font-family: 'Pacifico';
src: url('Pacifico-Regular.ttf');
}
Bear in mind you should have more than just the TrueType font for the highest level of browser compatibility, but for testing with just TTF you can delete any lines not referring to the TTF version.
I'm working on a style to change font to a custom one for a project. the code seems to work in the editing window but real sites doesn't seem to work. I think its falling back on a system default. How do I get around this? I'm using chrome if that matters.
#font-face {
font-family: 'wantedfont';
font-style: normal;
font-weight: 400;
src: local('wantedfont'),url(http://hazel-is.me/times_new_ancient.ttf);
}
*{
cursor: url(http://puu.sh/hoJq2/46859bf607.gif), progress;
font-family: wantedfont !important;
}
you can use the "bulletproof" syntax and add a ☺︎ as local font name to make sure it does not load a local font. more importantly add format declaration, full rule should be as such:
#font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot');
src: local('☺︎'),
url("GraublauWeb.woff") format("woff"),
url("GraublauWeb.otf") format("opentype"),
url("GraublauWeb.svg#grablau") format("svg");
}