Can't seem to get this to work in any browser, anyone know what I am doing wrong?
Running live here: http://daveywhitney.com/ford/one/
#font-face {
font-family: 'SackersItalianScriptStdRegula';
src: url('font/sackersitalianscriptstd-webfont.eot');
src: url('font/sackersitalianscriptstd-webfont.woff') format('woff'), url('font/sackersitalianscriptstd-webfont.ttf') format('truetype'), url('font/sackersitalianscriptstd-webfont.svg#webfontkWmYBTH2') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'EngraversMTRegular';
src: url('font/engr-webfont.eot');
src: url('font/engr-webfont.woff') format('woff'), url('font/engr-webfont.ttf') format('truetype'), url('font/engr-webfont.svg#webfontQUS0Zswo') format('svg');
font-weight: normal;
font-style: normal;
}
#sidetop {
width:90px;
height:50px;
font-size: 12px;
font-family:EngraversMTRegular;
}
#sidetop ul li {
float:right;
margin:0 0 10px 0;
font-family:EngraversMTRegular;
}
#names {
width:150px;
height:250px;
float:right;
overflow-y: scroll;
font-size:30px;
font-family:SackersItalianScriptStdRegula;
color:#858484;
margin:0 0 0 50px;
font-weight:normal;
}
Your paths to the font files are not what you have posted here. In the CSS files, your URLs look like this: url('/font/engr-webfont.eot'). That means that your font is expected to live at http://daveywhitney.com/font/engr-webfont.eot. The leading slash makes the url relative to the server root, not to the style sheet. Rather than having us guess at things, perhaps you could tell us what your directory structure looks like -- where the fonts live in relation to the css file.
The URLs are wrong. For example, I don't get a font file here:
http://daveywhitney.com/ford/one/css/font/engr-webfont.woff
Related
I'm trying to add an external font to a website, the site does not respond at all. I'm a beginner and just learning, I work on it all day, thank you for your help.
#font-face {
font-family: "Alex";
src: url(fonts/AlexBrush-Regular.ttf) format('truetype'),
url(fonts/AlexBrush-Regular.woff) format('woff'),
url(fonts/AlexBrush-Regular.woff2) format('woff2');
}
body {
text-align: center;
}
h1 {
color: black;
font-family: "Alex";
}
.space p {
font-size: 40px;
font-family: "Alex";
}
Put the archive path inside a string
Ex:
url("fonts/AlexBrush-Regular.ttf") format("truetype"),
url("fonts/AlexBrush-Regular.woff") format("woff"),
url("fonts/AlexBrush-Regular.woff2") format("woff2");
I'm linking a CSS file in HTML. The CSS file is uploaded on another server and the CSS file import fonts from the same place and the path is correct, but gives an error and doesn't work.
Here are the screenshots: https://pasteboard.co/Ig0ORen.jpg
This the font error: https://pasteboard.co/Ig0KwNlP.jpg
It is was working when the CSS was on my localhost but I want to upload the CSS and JS and fonts in this server.
This is the HTML code:
<link rel="stylesheet" href="http://www.example.com/lib/styles/process.css">
This is the CSS codeL
#font-face {
font-family: pp-sans-small-light;
src: url(../fonts/p_small_light.eot);
src: url(../fonts/p_small_light.eot) format("embedded-opentype"), url(../fonts/p_small_light.woff) format("woff"), url(../fonts/p_small_light.svg) format("svg")
}
#font-face {
font-family: pp-sans-small-regular;
src: url(../fonts/p_small_regular.eot);
src: url(../fonts/p_small_regular.eot) format("embedded-opentype"), url(../fonts/p_small_regular.woff) format("woff"), url(../fonts/p_small_regular.svg) format("svg")
}
#font-face {
font-family: 'consumer-icons';
src: url(../fonts/icons_sans.eot);
src: url(../fonts/icons_sans.eot) format('embedded-opentype'), url(../fonts/icons_sans.woff) format('woff'), url(../fonts/icons_sans.ttf) format('truetype'), url(../fonts/icons_sans.svg) format('svg');
font-style: normal;
font-weight: 400
}
#font-face {
font-family: p_big_sans;
font-style: normal;
font-weight: 200;
src: url(../fonts/p_big_sans.eot);
src: url(../fonts/p_big_sans.woff2) format('woff2'), url(../fonts/p_big_sans.woff) format('woff'), url(../fonts/p_big_sans.svg) format('svg')
}
*,
*:before,
*:after {
box-sizing: inherit
}
html,
body {
height: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: pp-sans-small-regular, Helvetica Neue, Arial, sans-serif;
}
Check permission in your server for those font files which are not getting loaded. I have attached screenshot for you reference. Right click on files & folder and change permission to 755.
You have only referenced the #font-face fonts here -
#font-face {
font-family: pp-sans-small-light;
src: url(../fonts/p_small_light.eot);
src: url(../fonts/p_small_light.eot) format("embedded-opentype"),
url(../fonts/p_small_light.woff) format("woff"), url(../fonts/p_small_light.svg)
format("svg")
}
..but you haven't declared their use anywhere.
You need to assign the fonts where you want to use them, for example;
body { font-family: pp-sans-small-regular; }
p { font-family: pp-sans-small-light; }
I have a little problem while creating icons with font-face and :before pseudo-class. I'm using LESS too. Right now, I have something like
#font-face {
font-family: 'myfontname';
src: url('../myurl.eot');
src: url('../myurl?#iefix') format('embedded-opentype'),
url('../myurl.woff') format('woff'),
url('../myurl.ttf') format('truetype'),
url('../myurl.svg#name') format('svg');
font-weight: normal;
font-style: normal;
}
.icon{
font-family: 'myfontname';
font-size: 1em;
padding:0;
margin:0;
}
.icon-correct:before{
.icon; /*mixin*/
position: relative;
content:"\004C"; /*L in my font*/
display: block;
}
And in my HTML
<span class="icon-correct"></span>
I can't see my icon doing it this way. However, it works if I do something like
<span class="icon">L</span>
What am I doing wrong? Thank you.
I am confused as to why this code is not working for me. I am trying to add icons to my tags, but when I call the font from my files of my website, they don't seem to be working for anything I try to put them in. I am trying to insert an icon into my .showMenu , but for some reason, it isn't working. I have the font files uploaded to my server, and the url's in the #font-face are the correct ones, but it doesn't want to work. Please help!
HTML:
<div class="column">
<span class="showMenu" id="showMenu"></span>
</div>
CSS:
#font-face {
font-weight: normal;
font-style: normal;
font-family: 'icomoon';
src:url('../fonts/icomoon/icomoon.eot');
src:url('../fonts/fonts/icomoon/icomoon.eot?#iefix') format('embedded-opentype'),
url('../fonts/fonts/icomoon/icomoon.ttf') format('truetype'),
url('../fonts/fonts/icomoon/icomoon.woff') format('woff'),
url('../fonts/fonts/icomoon/icomoon.svg#typicons') format('svg');
}
.showMenu {
font-size: 22px;
padding-left: 10px;
padding-right: 10px;
background: #ed8151;
font-family: 'icomoon';
border: 1px solid #e86a32;
border-radius: 3px;
}
.showMenu:before {
content: "\e6b8"
}
I was putting around, and figured out that each font file needs a full file path, instead of a shortened one.
Here is what it should look like:
CSS:
#font-face {
font-weight: normal;
font-style: normal;
font-family: 'icomoon';
src:url('http://yoursite.com/fonts/icomoon/icomoon.eot');
src:url('http://yoursite.com/fonts/icomoon/icomoon.eot?#iefix') format('embedded-opentype'),
url('http://yoursite.com/fonts/icomoon/icomoon.ttf') format('truetype'),
url('http://yoursite.com/fonts/icomoon/icomoon.woff') format('woff'),
url('http://yoursite.com/fonts/icomoon/icomoon.svg#typicons') format('svg');
}
It looks like your paths are incorrect. Try:
src:url('../fonts/icomoon/icomoon.eot');
src:url('../fonts/icomoon/icomoon.eot?#iefix') format('embedded-opentype'),
url('../fonts/icomoon/icomoon.ttf') format('truetype'),
url('../fonts/icomoon/icomoon.woff') format('woff'),
url('../fonts/icomoon/icomoon.svg#typicons') format('svg');
How can I use more than #font-face rule in my CSS?
I've inserted this into my stylesheet:
body {
background: #fff url(../images/body-bg-corporate.gif) repeat-x;
padding-bottom: 10px;
font-family: 'GestaRegular', Arial, Helvetica, sans-serif;
}
#font-face {
font-family: 'GestaReFogular';
src: url('gestareg-webfont.eot');
src: local('☺'),
url('gestareg-webfont.woff') format('woff'),
url('gestareg-webfont.ttf') format('truetype'),
url('gestareg-webfont.svg#webfontg8dbVmxj') format('svg');
}
This currently only applies for the whole body of text on the site. But, I would like to specify h1 to use a different font. How can I do this?
Note, you may also be interested in:
Custom web font not working in IE9
Which includes a more descriptive breakdown of the CSS you see below (and explains the tweaks that make it work better on IE6-9).
#font-face {
font-family: 'Bumble Bee';
src: url('bumblebee-webfont.eot');
src: local('☺'),
url('bumblebee-webfont.woff') format('woff'),
url('bumblebee-webfont.ttf') format('truetype'),
url('bumblebee-webfont.svg#webfontg8dbVmxj') format('svg');
}
#font-face {
font-family: 'GestaReFogular';
src: url('gestareg-webfont.eot');
src: local('☺'),
url('gestareg-webfont.woff') format('woff'),
url('gestareg-webfont.ttf') format('truetype'),
url('gestareg-webfont.svg#webfontg8dbVmxj') format('svg');
}
body {
background: #fff url(../images/body-bg-corporate.gif) repeat-x;
padding-bottom: 10px;
font-family: 'GestaRegular', Arial, Helvetica, sans-serif;
}
h1 {
font-family: "Bumble Bee", "Times New Roman", Georgia, Serif;
}
And your follow-up questions:
Q. I would like to use a font such as "Bumble bee," for example. How can I use #font-face to make that font available on the user's
computer?
Note that I don't know what the name of your Bumble Bee font or file is, so adjust accordingly, and that the font-face declaration should precede (come before) your use of it, as I've shown above.
Q. Can I still use the other #font-face typeface "GestaRegular" as well? Can I use both in the same stylesheet?
Just list them together as I've shown in my example. There is no reason you can't declare both. All that #font-face does is instruct the browser to download and make a font-family available. See: http://iliadraznin.com/2009/07/css3-font-face-multiple-weights
#font-face {
font-family: Kaffeesatz;
src: url(YanoneKaffeesatz-Thin.otf);
font-weight: 200;
}
#font-face {
font-family: Kaffeesatz;
src: url(YanoneKaffeesatz-Light.otf);
font-weight: 300;
}
#font-face {
font-family: Kaffeesatz;
src: url(YanoneKaffeesatz-Regular.otf);
font-weight: normal;
}
#font-face {
font-family: Kaffeesatz;
src: url(YanoneKaffeesatz-Bold.otf);
font-weight: bold;
}
h3, h4, h5, h6 {
font-size:2em;
margin:0;
padding:0;
font-family:Kaffeesatz;
font-weight:normal;
}
h6 { font-weight:200; }
h5 { font-weight:300; }
h4 { font-weight:normal; }
h3 { font-weight:bold; }
Multiple variations of a font family can be declared by changing the font-weight and src property of #font-face rule.
/* Regular Weight */
#font-face {
font-family: Montserrat;
src: url("../fonts/Montserrat-Regular.ttf");
}
/* SemiBold (600) Weight */
#font-face {
font-family: Montserrat;
src: url("../fonts/Montserrat-SemiBold.ttf");
font-weight: 600;
}
/* Bold Weight */
#font-face {
font-family: Montserrat;
src: url("../fonts/Montserrat-Bold.ttf");
font-weight: bold;
}
Declared rules can be used by following
/* Regular */
font-family: Montserrat;
/* Semi Bold */
font-family: Montserrat;
font-weght: 600;
/* Bold */
font-family: Montserrat;
font-weight: bold;