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.
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 am trying to create my first website and I am experimenting with fonts from fontsquirrel.
The only problem is that I can use only some of the fonts I have downloaded through the site.
I am having a great deal of a problem in particular in writing the CSS code correctly, when the font family includes more than one style.
Lets take for example the LM Mono 10 Regular and Special Elite for example:
My code for special elite is the following and it works great:
#font-face {
font-family: 'specialelite';
src: url('specialelite.eot');
src: url('specialelite.eot?#iefix') format('embedded-opentype'),
url('specialelite.woff2') format('woff2'),
url('specialelite.woff') format('woff'),
url(' specialelite.ttf') format('truetype'),
url(' specialelite.svg# specialelite') format('svg');
font-weight: normal;
font-style: normal;
}
and
.fifth {font-family: 'specialelite'; font-weight: normal; font-size: 16px; color:black;}
This format is easy to work with because the special elite font-family has only one style.
BUT.. When I am trying to adapt this format on a font-family that has more than one styles like for example the LM Mono 10 family, it simply does not work....
http://www.fontsquirrel.com/fonts/Latin-Modern-Mono
I do not know if the mistake is on the way I am referring to the font family, or if I write the urls wrong... Could you please provide an example of the code in a reply?
Let's say for "Latin Modern Mono Light 10 Regular". How will the font-weight and font-style properties change? I just don't get it...
When I download the resources at the link you provided, it shows each font style as a completely different font family.
This is the Italic version:
#font-face {
font-family: 'latin_modern_mono10_italic';
src: url('lmmono10-italic-webfont.eot');
src: url('lmmono10-italic-webfont.eot?#iefix') format('embedded-opentype'),
url('lmmono10-italic-webfont.woff') format('woff'),
url('lmmono10-italic-webfont.ttf') format('truetype'),
url('lmmono10-italic-webfont.svg#latin_modern_mono10_italic') format('svg');
font-weight: normal;
font-style: normal;
}
This is the Regular version:
#font-face {
font-family: 'latin_modern_mono10_regular';
src: url('lmmono10-regular-webfont.eot');
src: url('lmmono10-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('lmmono10-regular-webfont.woff') format('woff'),
url('lmmono10-regular-webfont.ttf') format('truetype'),
url('lmmono10-regular-webfont.svg#latin_modern_mono10_regular') format('svg');
font-weight: normal;
font-style: normal;
}
In order to use these fonts as-is, you will need to specify the appropriate font-family whenever you use them.
For example:
.fifth {
font-family: 'latin_modern_mono10_regular';
font-weight: normal;
...
}
or
.fifth {
font-family: 'latin_modern_mono10_italic';
font-weight: normal;
...
}
For Regular and Italic version:
#font-face {
font-family: 'specialelite';
src: url('specialelite.eot');
src: url('specialelite.eot?#iefix') format('embedded-opentype'), url('specialelite.woff2') format('woff2'), url('specialelite.woff') format('woff'), url(' specialelite.ttf') format('truetype'), url(' specialelite.svg# specialelite') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'specialelite';
src: url('specialelite_italic.eot');
src: url('specialelite_italic.eot?#iefix') format('embedded-opentype'), url('specialelite_italic.woff2') format('woff2'), url('specialelite_italic.woff') format('woff'), url(' specialelite_italic.ttf') format('truetype'), url(' specialelite_italic.svg# specialelite') format('svg');
font-weight: normal;
font-style: italic;
}
Now, you can use this for Regular: font-style: normal
.fifth {font-family: 'specialelite'; font-style: normal; font-size: 16px; color:black;}
OR this for Italic: font-style: italic
.fifth {font-family: 'specialelite'; font-style: italic; font-size: 16px; color:black;}
After much review, I can't get the correct display of a custom font I created through fontsquirrel. Chrome's Inspector shows the icon is in place but all I get is this default icon box ;o(
Rails 4 app, Bootstrap
Any ideas?
application.rb:
config.assets.paths << Rails.root.join("app", "assets", "fonts")
html:
<div class="hatfont icon-balloon01"></div>
here's my CSS:
hatfont {
font-family: 'haticon';
text-transform: uppercase;
div {
font-family: haticon;
}
}
#font-face {
font-family: 'haticon';
src:assets-url('fonts/haticon.eot');
src:assets-url('fonts/haticon.eot?#iefix') format('embedded-opentype'),
assets-url('fonts/haticon.woff') format('woff'),
assets-url('fonts/haticon.ttf') format('truetype'),
assets-url('fonts/haticon.svg#haticon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'haticon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-graphs:before {
content: "\e600";
}
I've had this issue before myself. I can't identify the problem specifically from what you've provided, but a few things come to mind. Check your link references in your CSS. Make sure no files were moved and that your stylesheet is in the same directory as your fonts folder. Also, the %> under your font-face looks out of place... I don't know if that's a Rails thing or not. Here's an example of something that I've used before that's worked. Obviously, you'd need to substitute your font files. :
#font-face {
font-family: 'FontAwesome';
src: url('fonts/fontawesome-webfont.eot?v=4.0.3');
src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'),url('fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'),url('fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'),url('fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
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');
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