I am using a Wordpress Theme (Avada) which has fontawesome icons pre-installed. My customer wants to use lineicons from http://fontello.com/! He downloaded the .zip file and sent it to me. Here is what I did:
1) Unpacked -zip file and got the following files:
- css folder
- font folder
- config.json
- demo.html
- README.txt
2) I uploaded everything inside the CSS folder to: /wp-content/themes/Avada/css
3) I uploaded everything inside the font folder to: /wp-content/themes/Avada/fonts/fontello/
4) Now I opened up /wp-content/themes/Avada/css/fpslineicons.css and set the #font-face to the following paths:
#font-face {
font-family: 'fpslineicons';
src: url('../fonts/fontello/fpslineicons.eot?98281823');
src: url('../fonts/fontello/fpslineicons.eot?98281823#iefix') format('embedded-opentype'),
url('../fonts/fontello/fpslineicons.woff?98281823') format('woff'),
url('../fonts/fontello/fpslineicons.ttf?98281823') format('truetype'),
url('../fonts/fontello/fpslineicons.svg?98281823#fpslineicons') format('svg');
After that I went to my admin panel and enterd in text modus on my frontpage the following code:
<i class="icon-heart">Test</i>
I also tried:
<div class="icon-heart">Test</div>
Guess what? Nothing is displayed. Can someone tell me what I am doing wrong? I cannot find what is wrong.
Thanks,
Chris
have you tried setting explicitly the font-family for your <i> and <div> to fontello
div {font-family:'fontello'}
since you are already using another icon fonts library this can be the issue
Make sure the #font-face{font-family: "fontello";} and [class^="icon-"]:before, [class*=" icon-"]:before {font-family: "fontello";} are the same.
#font-face {
font-family: 'fontello';
src: url('../fonts/fontello/fpslineicons.eot?98281823');
src: url('../fonts/fontello/fpslineicons.eot?98281823#iefix') format('embedded-opentype'),
url('../fonts/fontello/fpslineicons.woff?98281823') format('woff'),
url('../fonts/fontello/fpslineicons.ttf?98281823') format('truetype'),
url('../fonts/fontello/fpslineicons.svg?98281823#fpslineicons') format('svg');
}
Related
Is there any way to add downloaded fonts in my child theme? .
Because I'm using google fonts and render-blocking JavaScript and CSS in above-the-fold content is my problem every time I test my site pagespeed insights
You have to unzip font downloaded by GoogleFonts
Place them in theme folder (eg: wp-content/themes/_MY_THEME_/fonts/)
Open your style.css file and add following code:
#font-face{
font-family: 'Font-Name';
src: url('fonts/Font-Name.eot');
src: local('☺'),
url('fonts/Font-Name.woff') format('woff'),
url('fonts/Font-Name.ttf') format('truetype'),
url('fonts/Font-Name.svg') format('svg');
font-weight: normal;
font-style: normal;
}
where "Font-Name" will be replaced by name of the font downloaded
In my site, the icons of font awesome sometimes become squares, and most of the time, they load correctly, i've been looking for that issue in forums, and it seems that this case is not the same as theirs:
the icons are of font awesome and class fa fa-ANYEXAMPLE exists
the fonts are in a folder (/css/fonts) as it should be
the content of the file fontawesome.css are copied in the file bootstrap.css and called in the head of the site
I consider that my links are correct, since the icons load correctly most of the time
What could the problem be?
Open your style.css and link to FontAwesome using font-face:
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.6.3');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
Just make sure to edit the paths if they are any different.
I have been trying a lot lately to get Glyphicons to work but with no luck. I'm using JSF framework with the following file structure.
Also I modified the CSS in bootstrap.css by removing (..) from every path in the following CSS code to become like this:
#font-face {
font-family: 'Glyphicons Halflings';
src: url('/fonts/glyphicons-halflings-regular.eot');
src: url('/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('/fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('/fonts/glyphicons-halflings-regular.woff') format('woff'), url('/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
When not removing (..), JSF will show the following 2 warnings:
Warning: JSF1091: No mime type could be found for file css/lib/fonts/glyphicons-halflings-regular.woff2. To resolve this, add a mime-type mapping to the applications web.xml.
Warning: JSF1064: Unable to find or serve resource, css/lib/fonts/glyphicons-halflings-regular.woff2.
But still always showing me a strange box instead of the Glyphicon that is supposed to show up?
Help please..
I found the solution by using the following expression to refer to the resources properly:
#font-face {
font-family: 'Glyphicons Halflings';
src: url("#{resource['default/1_0/fonts/glyphicons-halflings-regular.eot']}");
src: url("#{resource['default/1_0/fonts/glyphicons-halflings-regular.eot']}") format('embedded-opentype'), url("#{resource['default/1_0/fonts/glyphicons-halflings-regular.woff2']}") format('woff2'), url("#{resource['default/1_0/fonts/glyphicons-halflings-regular.woff']}") format('woff'), url("#{resource['default/1_0/fonts/glyphicons-halflings-regular.ttf']}") format('truetype'), url("#{resource['default/1_0/fonts/glyphicons-halflings-regular.svg']}") format('svg');
}
The problem is with the fonts folder.
Replace your fonts folder with the one at: https://github.com/twbs/bootstrap and it will work fine.
I can't seem to find the answer I'm looking for. I have an entirely static page, mostly made up of images. The font used to create the images is 'Handwriting-Dakota.ttf' found on any Mac OS X install. I have one dynamic element containing text which i want to give this font to.
I have the ttf font in the same directory as my css file.
#font-face{
font-family: dakota;
src: url('dakota.ttf') format('truetype');
}
In an html file with the css file included. <p style="font-family: dakota;">sometext</p>
I can see the rule applied in chrome's inspector but it does not change the appearance. Is what I'm trying to do impossible or am I doing it wrong?
Use this format
#font-face {
font-family: 'myfont';
src: url('fonts/myfont.eot');
src: url('fonts/myfont.eot?#iefix') format('embedded-opentype'),
url('fonts/myfont.woff') format('woff'),
url('fonts/myfont.ttf') format('truetype'),
url('fonts/myfont.svg#rsuregular') format('svg');
}
To further gain more knowledge about font-face syntax, read Bulletproof #font-face Syntax.
To get all versions of the font. google the "font converter", there will be plenty of font converter services in first page.
Make sure the url is relative to the css file and not to the webroot.
#font-face{
font-family: 'dakota';
src: url('../fonts/dakota.ttf') format('truetype');
}
And you probably should add other types to make sure other browsers can use the font without problems.
#font-face {
font-family: 'dakota';
src: url('../fonts/dakota.eot');
src: url('../fonts/dakota.eot?#iefix') format('embedded-opentype'),
url('../fonts/dakota.woff') format('woff'),
url('../fonts/dakota.ttf') format('truetype'),
url('../fonts/dakota.svg#rsuregular') format('svg');
}
#Cobolt, you can try FontSquirrel. http://www.fontsquirrel.com/fontface/generator.
All you need is .otf or .ttf file. Then, FontSquirrel will make the .svg, .eot, .woff for you and create a css file.
I am using YanoneKaffeesatz Font in my wordpress website. So to use this font first I generated code from FontSquirrel. Then I got this piece of code
#font-face {
font-family: 'yanone_kaffeesatz_lightRg';
src: url('yanonekaffeesatz-light-webfont.eot');
src: url('yanonekaffeesatz-light-webfont.eot?#iefix') format('embedded-opentype'),
url('yanonekaffeesatz-light-webfont.woff') format('woff'),
url('yanonekaffeesatz-light-webfont.ttf') format('truetype'),
url('yanonekaffeesatz-light-webfont.svg#yanone_kaffeesatz_lightRg') format('svg');
font-weight: normal;
font-style: normal;
}
Then I paste the code in my css file and paste all the converted fonts(.otf,.svg, .ttf) in my website folder but still my font has not been changed. So can some one tell me why this is happening?
Any help and suggestions will be highly appreciable.
Are the font files in the same dir as your stylesheet? You're currently pointing to that dir. Paths in CSS are relative to the stylesheet, not the root.
root
-css/styles.css
-images/
-fonts/
index.html
With the above structure you would use this as your URL.
url('../fonts/your_font.font;);