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
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.
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.
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?
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';
}
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.