Icomoon Font download error - php

Error getting in website
#font-face {
font-family: 'icomoon';
src:url('icon-fonts/icomoon.html');
src:url('icon-fonts/icomoond41d.html?#iefix') format('embedded-opentype'),
url('icon-fonts/icomoon-2.html') format('truetype'),
url('icon-fonts/icomoon-3.html') format('woff'),
url('icon-fonts/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
How to over come this error?
EDIT:
I have used this code and it don't shows any icon display even in local system
#font-face {
font-family: 'icomoon';
src:url('icon-fonts/icomoon.eot');
src:url('icon-fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('icon-fonts/icomoon.woff') format('woff'),
url('icon-fonts/icomoon.ttf') format('truetype'),
url('icon-fonts/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
Suggest me what to do now?

You're using the wrong syntax.
You're supposed to link to the actual font files...not pages
It should look something like this:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Related

Using PHP to automate #font-face path

I am very new to Php and was wondering if i could automate this process. Is there a way to make this a little more compact using php? So that i can easely update custom fonts by just putting it in a directory (called fonts). All idea's are welcome! If you know a better solution or simply advise that i should not do this that is also fine.
/* ======================================================
► FONT-LIBRARY
====================================================== */
/*Brandon Grotesque*/
#font-face {
font-family: 'brandon_thin';
src: url('../fonts/Brandon_Grotesque/Brandon_thin/brandon_thin.woff2') format('woff2'),
url('../fonts/Brandon_Grotesque/Brandon_thin/brandon_thin.woff') format('woff'),
url('../fonts/Brandon_Grotesque/Brandon_thin/brandon_thin.ttf') format('truetype'),
url('../fonts/Brandon_Grotesque/Brandon_thin/brandon_thin.svg#brandon_grotesquethin') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'brandon_thin_it';
src: url('../fonts/Brandon_Grotesque/Brandon_thin_it/brandon_thin_it.woff2') format('woff2'),
url('../fonts/Brandon_Grotesque/Brandon_thin_it/brandon_thin_it.woff') format('woff'),
url('../fonts/Brandon_Grotesque/Brandon_thin_it/brandon_thin_it.ttf') format('truetype'),
url('../fonts/Brandon_Grotesque/Brandon_thin_it/brandon_thin_it.svg#brandon_grotesquethin_italic') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'brandon_light';
src: url('../fonts/Brandon_Grotesque/Brandon_light/brandon_light.woff2') format('woff2'),
url('../fonts/Brandon_Grotesque/Brandon_light/brandon_light.woff') format('woff'),
url('../fonts/Brandon_Grotesque/Brandon_light/brandon_light.ttf') format('truetype'),
url('../fonts/Brandon_Grotesque/Brandon_light/brandon_light.svg#brandon_grotesquelight') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'brandon_light_it';
src: url('../fonts/Brandon_Grotesque/Brandon_light_it/brandon_light_it.woff2') format('woff2'),
url('../fonts/Brandon_Grotesque/Brandon_light_it/brandon_light_it.woff') format('woff'),
url('../fonts/Brandon_Grotesque/Brandon_light_it/brandon_light_it.ttf') format('truetype'),
url('../fonts/Brandon_Grotesque/Brandon_light_it/brandon_light_it.svg#brandon_grotesquelight_italic') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'brandon_reg';
src: url('../fonts/Brandon_Grotesque/Brandon_reg/brandon_reg.woff2') format('woff2'),
url('../fonts/Brandon_Grotesque/Brandon_reg/brandon_reg.woff') format('woff'),
url('../fonts/Brandon_Grotesque/Brandon_reg/brandon_reg.ttf') format('truetype'),
url('../fonts/Brandon_Grotesque/Brandon_reg/brandon_reg.svg#brandon_grotesque_regularRg') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'brandon_reg_it';
src: url('../fonts/Brandon_Grotesque/Brandon_reg_it/brandon_reg_it.woff2') format('woff2'),
url('../fonts/Brandon_Grotesque/Brandon_reg_it/brandon_reg_it.woff') format('woff'),
url('../fonts/Brandon_Grotesque/Brandon_reg_it/brandon_reg_it.ttf') format('truetype'),
url('../fonts/Brandon_Grotesque/Brandon_reg_it/brandon_reg_it.svg#brandon_grotesqueRgIt') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'brandon_med';
src: url('../fonts/Brandon_Grotesque/Brandon_med/brandon_med.woff2') format('woff2'),
url('../fonts/Brandon_Grotesque/Brandon_med/brandon_med.woff') format('woff'),
url('../fonts/Brandon_Grotesque/Brandon_med/brandon_med.ttf') format('truetype'),
url('../fonts/Brandon_Grotesque/Brandon_med/brandon_med.svg#brandon_grotesquemedium') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'brandon_med_it';
src: url('../fonts/Brandon_Grotesque/Brandon_med_it/brandon_med_it.woff2') format('woff2'),
url('../fonts/Brandon_Grotesque/Brandon_med_it/brandon_med_it.woff') format('woff'),
url('../fonts/Brandon_Grotesque/Brandon_med_it/brandon_med_it.ttf') format('truetype'),
url('../fonts/Brandon_Grotesque/Brandon_med_it/brandon_med_it.svg#brandon_grotesqueMdIt') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'brandon_bld';
src: url('../fonts/Brandon_Grotesque/Brandon_bld/brandon_bld.woff2') format('woff2'),
url('../fonts/Brandon_Grotesque/Brandon_bld/brandon_bld.woff') format('woff'),
url('../fonts/Brandon_Grotesque/Brandon_bld/brandon_bld.ttf') format('truetype'),
url('../fonts/Brandon_Grotesque/Brandon_bld/brandon_bld.svg#brandon_grotesquebold') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'brandon_bld_it';
src: url('../fonts/Brandon_Grotesque/Brandon_bld_it/brandon_bld_it.woff2') format('woff2'),
url('../fonts/Brandon_Grotesque/Brandon_bld_it/brandon_bld_it.woff') format('woff'),
url('../fonts/Brandon_Grotesque/Brandon_bld_it/brandon_bld_it.ttf') format('truetype'),
url('../fonts/Brandon_Grotesque/Brandon_bld_it/brandon_bld_it.svg#brandon_grotesquebold_italic') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'brandon_blk';
src: url('../fonts/Brandon_Grotesque/Brandon_blk/brandon_blk.woff2') format('woff2'),
url('../fonts/Brandon_Grotesque/Brandon_blk/brandon_blk.woff') format('woff'),
url('../fonts/Brandon_Grotesque/Brandon_blk/brandon_blk.ttf') format('truetype'),
url('../fonts/Brandon_Grotesque/Brandon_blk/brandon_blk.svg#brandon_grotesqueblack') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'brandon_blk_it';
src: url('../fonts/Brandon_Grotesque/Brandon_blk_it/brandon_blk_it.woff2') format('woff2'),
url('../fonts/Brandon_Grotesque/Brandon_blk_it/brandon_blk_it.woff') format('woff'),
url('../fonts/Brandon_Grotesque/Brandon_blk_it/brandon_blk_it.ttf') format('truetype'),
url('../fonts/Brandon_Grotesque/Brandon_blk_it/brandon_blk_it.svg#brandon_grotesqueblack_italic') format('svg');
font-weight: normal;
font-style: normal;
}
(Sorry for the bad english)
You can use SASS Mixins to do something more readable.
Here is a mixin I often use :
#mixin font-face($font-name, $file-name, $weight: normal, $style: normal) {
#font-face {
font-family: quote($font-name);
src: url($file-name + '.otf') format('opentype');
src: url($file-name + '.eot');
src: url($file-name + '.eot?#iefix') format('embedded-opentype'),
url($file-name + '.woff') format('woff'),
url($file-name + '.ttf') format('truetype'),
url($file-name + '.svg##{$font-name}') format('svg');
font-weight: $weight;
font-style: $style;
}
}
And after I can do that for example :
// BRANDON GROTESQUE
// ================================
$directory-font-brandonGrotesque: './Brandon-Grotesque';
#include font-face('Brandon Grotesque', $directory-font-brandonGrotesque + '/blabla', 300, 'italic');
#include font-face('Brandon Grotesque', $directory-font-brandonGrotesque + '/blabla', 300);
#include font-face('Brandon Grotesque', $directory-font-brandonGrotesque + '/blabla', 400);
#include font-face('Brandon Grotesque', $directory-font-brandonGrotesque + '/blabla', 500);
#include font-face('Brandon Grotesque', $directory-font-brandonGrotesque + '/blabla', 700);
If you really need to do it automatically, I think GULP or any other task manager can help you to achieve it.

dompdf/Laravel not respecting 'Roboto' font-weight

I've been looking for the error or the way to make dompdf work with my Google downloaded font, in this case "Roboto", and I don't know what else can I do to make this work, I've tried creating a link path to the robot-font.css, and tried pasting down all this code, inside a style tag in the PDF blade:
<style>
#font-face {
font-family: 'Roboto';
src: url('../../../public/vendor/poncho/fonts/Roboto-Thin-webfont.eot');
src: url('../../../public/vendor/poncho/fonts/Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'),
url('../../../public/vendor/poncho/fonts/Roboto-Thin-webfont.woff') format('woff'),
url('../../../public/vendor/poncho/fonts/Roboto-Thin-webfont.ttf') format('truetype'),
url('../../../public/vendor/poncho/fonts/Roboto-Thin-webfont.svg#Roboto') format('svg');
font-weight: 100;
font-style: normal;
}
#font-face {
font-family: 'Roboto-Thin';
src: url('../../../public/vendor/poncho/fonts/Roboto-Thin-webfont.eot');
src: url('../../../public/vendor/poncho/fonts/Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'),
url('../../../public/vendor/poncho/fonts/Roboto-Thin-webfont.woff') format('woff'),
url('../../../public/vendor/poncho/fonts/Roboto-Thin-webfont.ttf') format('truetype'),
url('../../../public/vendor/poncho/fonts/Roboto-Thin-webfont.svg#Roboto') format('svg');
}
#font-face {
font-family: 'Roboto';
src: url('../../../public/vendor/poncho/fonts/Roboto-ThinItalic-webfont.eot');
src: url('../../../public/vendor/poncho/fonts/Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('../../../public/vendor/poncho/fonts/Roboto-ThinItalic-webfont.woff') format('woff'),
url('../../../public/vendor/poncho/fonts/Roboto-ThinItalic-webfont.ttf') format('truetype'),
url('../../../public/vendor/poncho/fonts/Roboto-ThinItalic-webfont.svg#Roboto') format('svg');
font-weight: 100;
font-style: italic;
}
#font-face {
font-family: 'Roboto-ThinItalic';
src: url('../../../public/vendor/poncho/fonts/Roboto-ThinItalic-webfont.eot');
src: url('../../../public/vendor/poncho/fonts/Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('../../../public/vendor/poncho/fonts/Roboto-ThinItalic-webfont.woff') format('woff'),
url('../../../public/vendor/poncho/fonts/Roboto-ThinItalic-webfont.ttf') format('truetype'),
url('../../../public/vendor/poncho/fonts/Roboto-ThinItalic-webfont.svg#Roboto') format('svg');
}
#font-face {
font-family: 'Roboto';
src: url('../../../public/vendor/poncho/fonts/Roboto-Light-webfont.eot');
src: url('../../../public/vendor/poncho/fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('../../../public/vendor/poncho/fonts/Roboto-Light-webfont.woff') format('woff'),
url('../../../public/vendor/poncho/fonts/Roboto-Light-webfont.ttf') format('truetype'),
url('../../../public/vendor/poncho/fonts/Roboto-Light-webfont.svg#Roboto') format('svg');
font-weight: 300;
font-style: normal;
}
#font-face {
font-family: 'Roboto-Light';
src: url('../../../public/vendor/poncho/fonts/Roboto-Light-webfont.eot');
src: url('../../../public/vendor/poncho/fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('../../../public/vendor/poncho/fonts/Roboto-Light-webfont.woff') format('woff'),
url('../../../public/vendor/poncho/fonts/Roboto-Light-webfont.ttf') format('truetype'),
url('../../../public/vendor/poncho/fonts/Roboto-Light-webfont.svg#Roboto') format('svg');
}
#font-face {
font-family: 'Roboto';
src: url('../../../public/vendor/poncho/fonts/Roboto-LightItalic-webfont.eot');
src: url('../../../public/vendor/poncho/fonts/Roboto-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('../../../public/vendor/poncho/fonts/Roboto-LightItalic-webfont.woff') format('woff'),
url('../../../public/vendor/poncho/fonts/Roboto-LightItalic-webfont.ttf') format('truetype'),
url('../../../public/vendor/poncho/fonts/Roboto-LightItalic-webfont.svg#Roboto') format('svg');
font-weight: 300;
font-style: italic;
}
#font-face {
font-family: 'Roboto-LightItalic';
src: url('../../../public/vendor/poncho/fonts/Roboto-LightItalic-webfont.eot');
src: url('../../../public/vendor/poncho/fonts/Roboto-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('../../../public/vendor/poncho/fonts/Roboto-LightItalic-webfont.woff') format('woff'),
url('../../../public/vendor/poncho/fonts/Roboto-LightItalic-webfont.ttf') format('truetype'),
url('../../../public/vendor/poncho/fonts/Roboto-LightItalic-webfont.svg#Roboto') format('svg');
}
#font-face {
font-family: 'Roboto';
src: url('../../../public/vendor/poncho/fonts/Roboto-Regular-webfont.eot');
src: url('../../../public/vendor/poncho/fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../../../public/vendor/poncho/fonts/Roboto-Regular-webfont.woff') format('woff'),
url('../../../public/vendor/poncho/fonts/Roboto-Regular-webfont.ttf') format('truetype'),
url('../../../public/vendor/poncho/fonts/Roboto-Regular-webfont.svg#Roboto') format('svg');
font-weight: 400;
font-style: normal;
}
#font-face {
font-family: 'Roboto-Regular';
src: url('../../../public/vendor/poncho/fonts/Roboto-Regular-webfont.eot');
src: url('../../../public/vendor/poncho/fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../../../public/vendor/poncho/fonts/Roboto-Regular-webfont.woff') format('woff'),
url('../../../public/vendor/poncho/fonts/Roboto-Regular-webfont.ttf') format('truetype'),
url('../../../public/vendor/poncho/fonts/Roboto-Regular-webfont.svg#Roboto') format('svg');
}
#font-face {
font-family: 'Roboto';
src: url('../../../public/vendor/poncho/fonts/Roboto-Italic-webfont.eot');
src: url('../../../public/vendor/poncho/fonts/Roboto-Italic-webfont.eot?#iefix') format('embedded-opentype'),
url('../../../public/vendor/poncho/fonts/Roboto-Italic-webfont.woff') format('woff'),
url('../../../public/vendor/poncho/fonts/Roboto-Italic-webfont.ttf') format('truetype'),
url('../../../public/vendor/poncho/fonts/Roboto-Italic-webfont.svg#Roboto') format('svg');
font-weight: 400;
font-style: italic;
}
#font-face {
font-family: 'Roboto-RegularItalic';
src: url('../../../public/vendor/poncho/fonts/Roboto-Italic-webfont.eot');
src: url('../../../public/vendor/poncho/fonts/Roboto-Italic-webfont.eot?#iefix') format('embedded-opentype'),
url('../../../public/vendor/poncho/fonts/Roboto-Italic-webfont.woff') format('woff'),
url('../../../public/vendor/poncho/fonts/Roboto-Italic-webfont.ttf') format('truetype'),
url('../../../public/vendor/poncho/fonts/Roboto-Italic-webfont.svg#Roboto') format('svg');
}
#font-face {
font-family: 'Roboto';
src: url('../../../public/vendor/poncho/fonts/Roboto-Medium-webfont.eot');
src: url('../../../public/vendor/poncho/fonts/Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),
url('../../../public/vendor/poncho/fonts/Roboto-Medium-webfont.woff') format('woff'),
url('../../../public/vendor/poncho/fonts/Roboto-Medium-webfont.ttf') format('truetype'),
url('../../../public/vendor/poncho/fonts/Roboto-Medium-webfont.svg#Roboto') format('svg');
font-weight: 500;
font-style: normal;
}
#font-face {
font-family: 'Roboto-Medium';
src: url('../../../public/vendor/poncho/fonts/Roboto-Medium-webfont.eot');
src: url('../../../public/vendor/poncho/fonts/Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),
url('../../../public/vendor/poncho/fonts/Roboto-Medium-webfont.woff') format('woff'),
url('../../../public/vendor/poncho/fonts/Roboto-Medium-webfont.ttf') format('truetype'),
url('../../../public/vendor/poncho/fonts/Roboto-Medium-webfont.svg#Roboto') format('svg');
}
#font-face {
font-family: 'Roboto';
src: url('../../../public/vendor/poncho/fonts/Roboto-MediumItalic-webfont.eot');
src: url('../../../public/vendor/poncho/fonts/Roboto-MediumItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('../../../public/vendor/poncho/fonts/Roboto-MediumItalic-webfont.woff') format('woff'),
url('../../../public/vendor/poncho/fonts/Roboto-MediumItalic-webfont.ttf') format('truetype'),
url('../../../public/vendor/poncho/fonts/Roboto-MediumItalic-webfont.svg#Roboto') format('svg');
font-weight: 500;
font-style: italic;
}
#font-face {
font-family: 'Roboto-MediumItalic';
src: url('../../../public/vendor/poncho/fonts/Roboto-MediumItalic-webfont.eot');
src: url('../../../public/vendor/poncho/fonts/Roboto-MediumItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('../../../public/vendor/poncho/fonts/Roboto-MediumItalic-webfont.woff') format('woff'),
url('../../../public/vendor/poncho/fonts/Roboto-MediumItalic-webfont.ttf') format('truetype'),
url('../../../public/vendor/poncho/fonts/Roboto-MediumItalic-webfont.svg#Roboto') format('svg');
}
#font-face {
font-family: 'Roboto';
src: url('../../../public/vendor/poncho/fonts/Roboto-Bold-webfont.eot');
src: url('../../../public/vendor/poncho/fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../../../public/vendor/poncho/fonts/Roboto-Bold-webfont.woff') format('woff'),
url('../../../public/vendor/poncho/fonts/Roboto-Bold-webfont.ttf') format('truetype'),
url('../../../public/vendor/poncho/fonts/Roboto-Bold-webfont.svg#Roboto') format('svg');
font-weight: 700;
font-style: normal;
}
#font-face {
font-family: 'Roboto-Bold';
src: url('../../../public/vendor/poncho/fonts/Roboto-Bold-webfont.eot');
src: url('../../../public/vendor/poncho/fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../../../public/vendor/poncho/fonts/Roboto-Bold-webfont.woff') format('woff'),
url('../../../public/vendor/poncho/fonts/Roboto-Bold-webfont.ttf') format('truetype'),
url('../../../public/vendor/poncho/fonts/Roboto-Bold-webfont.svg#Roboto') format('svg');
}
#font-face {
font-family: 'Roboto';
src: url('../../../public/vendor/poncho/fonts/Roboto-BoldItalic-webfont.eot');
src: url('../../../public/vendor/poncho/fonts/Roboto-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('../../../public/vendor/poncho/fonts/Roboto-BoldItalic-webfont.woff') format('woff'),
url('../../../public/vendor/poncho/fonts/Roboto-BoldItalic-webfont.ttf') format('truetype'),
url('../../../public/vendor/poncho/fonts/Roboto-BoldItalic-webfont.svg#Roboto') format('svg');
font-weight: 700;
font-style: italic;
}
#font-face {
font-family: 'Roboto-BoldItalic';
src: url('../../../public/vendor/poncho/fonts/Roboto-BoldItalic-webfont.eot');
src: url('../../../public/vendor/poncho/fonts/Roboto-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('../../../public/vendor/poncho/fonts/Roboto-BoldItalic-webfont.woff') format('woff'),
url('../../../public/vendor/poncho/fonts/Roboto-BoldItalic-webfont.ttf') format('truetype'),
url('../../../public/vendor/poncho/fonts/Roboto-BoldItalic-webfont.svg#Roboto') format('svg');
}
#font-face {
font-family: 'Roboto';
src: url('../../../public/vendor/poncho/fonts/Roboto-Black-webfont.eot');
src: url('../../../public/vendor/poncho/fonts/Roboto-Black-webfont.eot?#iefix') format('embedded-opentype'),
url('../../../public/vendor/poncho/fonts/Roboto-Black-webfont.woff') format('woff'),
url('../../../public/vendor/poncho/fonts/Roboto-Black-webfont.ttf') format('truetype'),
url('../../../public/vendor/poncho/fonts/Roboto-Black-webfont.svg#Roboto') format('svg');
font-weight: 900;
font-style: normal;
}
#font-face {
font-family: 'Roboto-Black';
src: url('../../../public/vendor/poncho/fonts/Roboto-Black-webfont.eot');
src: url('../../../public/vendor/poncho/fonts/Roboto-Black-webfont.eot?#iefix') format('embedded-opentype'),
url('../../../public/vendor/poncho/fonts/Roboto-Black-webfont.woff') format('woff'),
url('../../../public/vendor/poncho/fonts/Roboto-Black-webfont.ttf') format('truetype'),
url('../../../public/vendor/poncho/fonts/Roboto-Black-webfont.svg#Roboto') format('svg');
}
#font-face {
font-family: 'Roboto';
src: url('../../../public/vendor/poncho/fonts/Roboto-BlackItalic-webfont.eot');
src: url('../../../public/vendor/poncho/fonts/Roboto-BlackItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('../../../public/vendor/poncho/fonts/Roboto-BlackItalic-webfont.woff') format('woff'),
url('../../../public/vendor/poncho/fonts/Roboto-BlackItalic-webfont.ttf') format('truetype'),
url('../../../public/vendor/poncho/fonts/Roboto-BlackItalic-webfont.svg#Roboto') format('svg');
font-weight: 900;
font-style: italic;
}
#font-face {
font-family: 'Roboto-BlackItalic';
src: url('../../../public/vendor/poncho/fonts/Roboto-BlackItalic-webfont.eot');
src: url('../../../public/vendor/poncho/fonts/Roboto-BlackItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('../../../public/vendor/poncho/fonts/Roboto-BlackItalic-webfont.woff') format('woff'),
url('../../../public/vendor/poncho/fonts/Roboto-BlackItalic-webfont.ttf') format('truetype'),
url('../../../public/vendor/poncho/fonts/Roboto-BlackItalic-webfont.svg#Roboto') format('svg');
}
</style>
And if I call a random <p> tag from the PDF as any of the font-family names and apply some weight or strong or bold tag it shows sans-serif with the proper weight, but not the Roboto.
Unfortunately the PDF font is very important for this project. Can't leave it as sans-serif.

about Google fonts after Facebook redirects

I am using uploaded google fonts on my website. When I open url on browsers it works but when I share it on facebook . It works on desktops but it doesnt work on mobilephones
redirect: https://l.facebook.com/l.php?u=http://website
/* latin-ext */
#font-face {
font-family: 'Grand Hotel';
font-style: normal;
font-weight: 400;
src: local('Grand Hotel'), local('GrandHotel-Regular'), url(../fonts/grandhotel-regular.woff2) format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
#font-face {
font-family: 'Grand Hotel';
font-style: normal;
font-weight: 400;
src: local('Grand Hotel'), local('GrandHotel-Regular'), url(../fonts/grandhotel-regular-II.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
I couldnt find the issue. What should I do?

How to set external custom font using css in Codeigniter?

I want to set custom font to my application using Codeigniter.
I have set it but i think my url path is wrong.
font Path :
localhost/example/user_assets/myfont.ttf
I am doing this :
#font-face {
font-family: myFont;
url('/user_assets/user_assets/myfont.woff2') format('woff2'),
url('/user_assets/user_assets/myfont.woff') format('woff'),
url('/user_assets/user_assets/myfont.ttf') format('truetype'),
}
body {
background: #FFFFFF;
color: #2d2d2d;
font-family: 'myFont';
}

How to set font face for internet explorer in WordPress?

I am setting up a font face for internet explorer only in WordPress
All of the fonts are located inside the root directory of child theme.
This is the code in ie-only.css
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
#font-face {
font-family: 'open_sansregular';
src: url('opensans-regular-webfont.eot');
src: url('opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('opensans-regular-webfont.woff2') format('woff2'),
url('opensans-regular-webfont.woff') format('woff'),
url('opensans-regular-webfont.ttf') format('truetype'),
url('opensans-regular-webfont.svg#open_sansregular') format('svg');
font-weight: normal;
font-style: normal;
}
.text-highlight { border: 1px solid red; font-family:open_sansregular; }
}
Do you know what is the proper address to locate the font family in the root directory of the child theme?
Any help is appreciated. Thanks
I think you have not set font path correnctly try this code.
#font-face {
font-family: 'open_sansregular';
src: url('<?php echo get_stylesheet_directory_uri(); ?>/fonts/opensans-regular-webfont.eot');
src: url('<?php echo get_stylesheet_directory_uri(); ?>/fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('<?php echo get_stylesheet_directory_uri(); ?>/fonts/opensans-regular-webfont.woff2') format('woff2'),
url('<?php echo get_stylesheet_directory_uri(); ?>/fonts/opensans-regular-webfont.woff') format('woff'),
url('<?php echo get_stylesheet_directory_uri(); ?>/fonts/opensans-regular-webfont.ttf') format('truetype'),
url('<?php echo get_stylesheet_directory_uri(); ?>/fonts/opensans-regular-webfont.svg#open_sansregular') format('svg');
font-weight: normal;
font-style: normal;
}
I was able to solve my issue.
To enable font face in Internet explorer, create a separate css for IE.
Example:
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/ie-only.css" />
get_stylesheet_directory_uri() will get the directory of the child theme
Now in the ie-only.css
#font-face {
font-family: 'open_sansregular';
src: url('fonts/opensans-regular-webfont.eot');
src: url('fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/opensans-regular-webfont.woff2') format('woff2'),
url('fonts/opensans-regular-webfont.woff') format('woff'),
url('fonts/opensans-regular-webfont.ttf') format('truetype'),
url('fonts/opensans-regular-webfont.svg#open_sansregular') format('svg');
font-weight: normal;
font-style: normal;
}
All of the font files declared above should be available within the directory your are working with.
Thanks.

Categories