I am using opencart 2.0.1.1 and the I want to use the roboto slab light fonr in my website for product name and heading of featured and latest blog. I take the link from google font and add it to my header.tpl that is <link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,300,700,100&subset=latin,cyrillic-ext,latin-ext,cyrillic,greek-ext,greek,vietnamese' rel='stylesheet' type='text/css'> and also the css font family to add in stylesheet that is "robotoslab", serif; after applying it I found that the serif font is apply but robotoslab is not. Please help me in this matter and I am using Opencart 2.0.1.1 default theme.
This is done and the solution is add this css codes to your stylesheet `
#font-face {
font-family: 'robotoslab';
src: url('../fonts/robotoslab-regular.eot');
src: url('../fonts/robotoslab-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/robotoslab-regular.woff') format('woff'), url('../fonts/robotoslab-regular.ttf') format('truetype'), url('../fonts/robotoslab-regular.svg#robotoslab') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'robotoslab-bold';
src: url('../fonts/robotoslab-bold-webfont.eot');
src: url('../fonts/robotoslab-bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/robotoslab-bold-webfont.woff') format('woff'), url('../fonts/robotoslab-bold-webfont.ttf') format('truetype'), url('../fonts/robotoslab-bold-webfont.svg#robotoslab-bold') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'robotoslab-light';
src: url('../fonts/robotoslab-light-webfont.eot');
src: url('../fonts/robotoslab-light-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/robotoslab-light-webfont.woff') format('woff'), url('../fonts/robotoslab-light-webfont.ttf') format('truetype'), url('../fonts/robotoslab-light-webfont.svg#robotoslab-bold') format('svg');
font-weight: normal;
font-style: normal;
}`
and add all the fonts folder inside the theme of your root directory
Related
I am using icomoon to create a custom font but i can not get it to load. I have checked it using font book at it seems to be ok there but I am having trouble loading it.
#font-face {
font-family: 'icomoon';
src: url('icomoon.eot');
src: url('icomoon.eot#iefix') format('embedded-opentype'), url('dilatefonts/icomoon.ttf') format('truetype'), url('icomoon.woff') format('woff'), url('icomoon.svg') format('svg');
font-weight: normal;
font-style: normal;
}
enter image description here
enter image description here
Looks like your style.css and font are in the same folder.
Please try to remove dilatefonts from font path. Example below -
#font-face {
font-family: 'icomoon';
src: url('icomoon.eot');
src: url('icomoon.eot#iefix') format('embedded-opentype'), url('dilatefonts/icomoon.ttf') format('truetype'), url('icomoon.woff') format('woff'), url('icomoon.svg') format('svg');
font-weight: normal;
font-style: normal;
}
http://www.chooseyourtelescope.com/
The big "C" in the middle of the page, and the H1 ('Choose The Right...) should be be written with "Pirulen" font-family.
I first tried the "classic" #font-face method, and then the advenced one by using WEBFONT GENERATOR and adding all the files created in MyFonts folder.
CSS
#font-face {
font-family: 'pirulenregular';
src: url('/www/wp-content/themes/virtue - child/MyFonts/pirulen_rg-webfont.eot');
src: url('/www/wp-content/themes/virtue - child/MyFonts/pirulen_rg-webfont.eot?#iefix') format('embedded-opentype'),
url('/www/wp-content/themes/virtue - child/MyFonts/pirulen_rg-webfont.woff2') format('woff2'),
url('/www/wp-content/themes/virtue - child/MyFonts/pirulen_rg-webfont.woff') format('woff'),
url('/www/wp-content/themes/virtue - child/MyFonts/pirulen_rg-webfont.ttf') format('truetype'),
url('/www/wp-content/themes/virtue - child/MyFonts/pirulen_rg-webfont.svg#pirulenregular') format('svg');
font-weight: normal;
font-style: normal;
}
But it still doesn't work
Your url needs to be a web url, not a file path. You generally set it up relative the the location of the css file, so it would be:
#font-face {
font-family: 'pirulenregular';
src: url('MyFonts/pirulen_rg-webfont.eot');
src: url('MyFonts/pirulen_rg-webfont.eot?#iefix') format('embedded-opentype'),
url('MyFonts/pirulen_rg-webfont.woff2') format('woff2'),
url('MyFonts/pirulen_rg-webfont.woff') format('woff'),
url('MyFonts/pirulen_rg-webfont.ttf') format('truetype'),
url('MyFonts/pirulen_rg-webfont.svg#pirulenregular') format('svg');
font-weight: normal;
font-style: normal;
}
The next issue is that on the page you specify the font family as "pirulen" but in the CSS it is "pirulenregular", these have to match, so pick one.
I'm attempting to use a local font for my Polymer Chrome App. I'm trying to use #font-face in CSS. Here's what I got:
#font-face {
font-family: 'robotolight';
src: url('../../assets/fonts/roboto-light-webfont.eot');
src: url('../../assets/fonts/roboto-light-webfont.eot?#iefix') format('embedded-opentype'),
url('../../assets/fonts/roboto-light-webfont.woff2') format('woff2'),
url('../../assets/fonts/roboto-light-webfont.woff') format('woff'),
url('../../assets/fonts/roboto-light-webfont.ttf') format('truetype'),
url('../../assets/fonts/roboto-light-webfont.svg#robotolight') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'robotolight_italic';
src: url('../../assets/fonts/roboto-lightitalic-webfont.eot');
src: url('../../assets/fonts/roboto-lightitalic-webfont.eot?#iefix') format('embedded-opentype'),
url('../../assets/fonts/roboto-lightitalic-webfont.woff2') format('woff2'),
url('../../assets/fonts/roboto-lightitalic-webfont.woff') format('woff'),
url('../../assets/fonts/roboto-lightitalic-webfont.ttf') format('truetype'),
url('../../assets/fonts/roboto-lightitalic-webfont.svg#robotolight_italic') format('svg');
font-weight: normal;
font-style: normal;
}
Then I use this font-face on an h1 here:
#CaseFiles-h1{
font-family: 'robotolight';
//font-weight: normal; <- no luck
//font-style: normal; <- no luck
}
Unfortunately, the font isn't loaded and I get some default serif font instead.
Any ideas?
I was hoping to keep the font local instead of using Google fonts or something like that.
You have to declate your #font-face outside of your Polymer object. Then you can use it in the polymer template.
<style media="screen">
font-family: 'robotolight';
src: url('../../assets/fonts/roboto-light-webfont.eot');
src: url('../../assets/fonts/roboto-light-webfont.eot?#iefix') format('embedded-opentype'),
url('../../assets/fonts/roboto-light-webfont.woff2') format('woff2'),
url('../../assets/fonts/roboto-light-webfont.woff') format('woff'),
url('../../assets/fonts/roboto-light-webfont.ttf') format('truetype'),
url('../../assets/fonts/roboto-light-webfont.svg#robotolight') format('svg');
font-weight: normal;
font-style: normal;
</style>
<dom-module id="polymer-element>
<template>
<span style="font-familiy: robotolight">Hello</span>
</template>
</dom-module>
A blog post about that is here.
Look on Polymer's font-roboto linked definition. There are font-size defined in absolute measures like 100, 200, etc. Defining font-size: normal; is too rude. Some components may request absolutely or relatively measured font-size. So, try to define all corresponding font-sizes to match all possible requests, even if you won't include all font types (thin, light, medium, etc).
Also, I think you should fix robotolight_italic definition:
#font-face {
font-family: 'robotolight';
/* ... */
font-style: italic;
}
I'm trying to add fontello to my site.
Im calling the font via the instructions with it and have used it before easily. However it just doesn't seem to be working.
Here is my CSS:
#font-face {
font-family: 'fontello';
src: url('fonts/fontello.eot?54081114');
src: url('fonts/fontello.eot?54081114#iefix') format('embedded-opentype'),
url('fonts/fontello.woff?54081114') format('woff'),
url('fonts/fontello.ttf?54081114') format('truetype'),
url('fonts/fontello.svg?54081114#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
I am trying to get a custom font to work in the Bones Wordpress theme. My font family is in "library > fonts" folder just like theme instructions.
#font-face {
font-family: 'ColaborateThinRegular';
src: url('library/fonts/ColabThi-webfont.eot');
src: url('library/fonts/ColabThi-webfont.eot?#iefix') format('embedded-opentype'),
url('library/fonts/ColabThi-webfont.woff') format('woff'),
url('library/fonts/ColabThi-webfont.ttf') format('truetype'),
url('library/fonts/ColabThi-webfont.svg#ColaborateThinRegular') format('svg');
font-weight: normal;
font-style: normal;
}
and I call it in my stylesheet like this:
font-family: 'ColaborateThinRegular';
I have tried a bunch of different fonts and none work. What am I missing here?
I had the same problem on bones and used the relative path to step up one directory to fix it. For you it should be something like this:
#font-face {
font-family: 'ColaborateThinRegular';
src: url('../fonts/ColabThi-webfont.eot');
src: url('../fonts/ColabThi-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/ColabThi-webfont.woff') format('woff'),
url('../fonts/ColabThi-webfont.ttf') format('truetype'),
url('../fonts/ColabThi-webfont.svg#ColaborateThinRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Hope this helps!