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
Related
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 am using a Gulp plugin (gulp-minify-css) to concat then minify my CSS, and for some reason it strips out the entire #font-face rule from the minified CSS. I am also using fonts from Google Fonts, and it doesn't strip this.
The font face rules
#font-face {
font-family: 'icomoon';
src:url('../fonts/icomoon.eot?91yt6w');
src:url('../fonts/icomoon.eot?#iefix91yt6w') format('embedded-opentype'),
url('../fonts/icomoon.woff?91yt6w') format('woff'),
url('../fonts/icomoon.ttf?91yt6w') format('truetype'),
url('../fonts/icomoon.svg?91yt6w#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
By all outward appearance, this code is fine. It comes from IcoMoon themselves. I have tried stripping the string after ? in the file url, but that wasn't it.
Anybody have any insight, as we have only just discovered this whilst trying to deploy.
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');
}
I am working on a webfonts server and I got the api to spit out the css with the correct mime types.They are also getting linked to the page.
#font-face {
font-family: 'Pagul';
src: url('http://localhost:5000/api/webfonts/static/Pagul.eot');
src: local('☺'), url('http://localhost:5000/api/webfonts/static/Pagul.woff') format('woff'),
url('http://localhost:5000/api/webfonts/static/Pagul.ttf') format('truetype'),
font-weight: normal;
font-style: normal;
}
The ttf,eot files can be downloaded manualy using the links, for some reason these fonts are
not loaded by the browser what am I doing wrong here ? The font files dont have proper mimetypes is that the issue ?
I tried font-squirells syntax also,it's not working.
PS: The Css is dynamically generated and added to the head ?
Use relative paths instead of absolutes. For example, if your CSS is in site/css/style.css and your fonts are in the site/api/webfonts/static/ directory:
#font-face {
font-family: Pagul;
src: url('../api/webfonts/static/Pagul.eot');
src: url('../api/webfonts/static/Pagul.woff') format('woff'),
url('../api/webfonts/static/Pagul.ttf') format('truetype'),
font-weight: normal;
font-style: normal;
}
Alternatively, use a service like Google Fonts and either link their CSS on your HTML or import it directly into your CSS
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;);