I have a font file in font directory of my project and use it to css file,in my system working true but not working in the client system.how to use it that correct result ?
my font-face in css is :
#font-face {
font-family: 'Yekan';
src: url('font/Yekan.eot');
src: url('Font/Yekan.woff');
src: url('Font/Yekan.eot?#iefix') format('embedded-opentype'), url('font/Yekan.ttf'), url('font/Yekan.svg');
font-weight: bold;
}
My font path is :
You can also try creating a web font
https://www.web-font-generator.com/
Try to remove all the ' ' from the css.
This should work for you.
Related
I used this font face and it works fine:
#font-face {
font-family: IRANSansWebLight;
src: url(fonts/IRANSansWeb_Light.ttf) format("truetype")
}
But when I try to use the same font which is converted to woff it doesn't work:
#font-face {
font-family: IRANSansWebLight;
src: url(fonts/iransansweb_light-webfont.woff) format("woff");
}
What I'm missing?
As I don't know about your folder structure, I would suggest you to change the URL of the font to:
url(../fonts/iransansweb_light-webfont.woff)
If that doesn't fix your problem, you should try to use Google Font Helper. Search for your desired font and follow the instructions. Here's a link to it.
I have recently been trying to embed font to my website. I don't get it to work, i have watched and read tutorials. I wan't to embed a font called "Ubuntu Light" in ttf format. This is what i have been trying:
#logBtn{
font-family: 'UbuntuLight';
}
#font-face{
font-family: "UbuntuLight";
src: url("CSS/Ubuntu-L.ttf");
}
And the file in the folder: Treeview of project
I'm almost new to this, i've been coding HTML and CSS in maybe 4 months now.
I have been stuck at this before, and that made me cancel my project, because i gave up. But i don't want to give up again. So i would really appreciate some help! :)
You can embed a font quick and easy by using this code:
#font-face {
font-family: 'Name';
src: url('Font.ext');
font-weight: 400;
font-style: normal;
}
Where Font.ext should be replaced with your font file and its extention (file type) e.g.
src: url('Ubuntu-L.ttf');
And the following font-weight and font-style should be referencing the specific font choice.
The url(...) path is relative to the stylesheet.
Therefore, because your stylesheet is in the CSS folder you don't need to include that in the url:
#font-face{
font-family: "UbuntuLight";
src: url("Ubuntu-L.ttf");
}
I am trying to add a local font to a site I am testing. It is called "AcrosstheRoad.ttf" and can be found in my assets/fonts/ folder. I am doing the following to try to read it into the CSS file:
#font-face {
font-family: 'AcrosstheRoad';
src: url('assets/fonts/AcrosstheRoad.ttf') format('truetype');
}
And I want to use it as a certain header type so I am using
h3{
font-family: 'AcrosstheRoad';
color: #333;
}
But unfortunately the font is not loading in. Does anyone know what I'm doing wrong?
Thanks!
Christina
First add a slash before assets:
(('/assets/fonts/AcrosstheRoad.ttf'))
That may or may not be the problem, depending on where your CSS file is, and how your website is structured.
If the above doesn't work, convert the font to .woff2 and .woff (try using this: http://www.fontsquirrel.com/tools/webfont-generator). The reasoning behind this is that some browsers are really picky. Change your CSS to:
#font-face {
font-family: 'AcrosstheRoad';
src: url('/assets/fonts/AcrosstheRoad.woff2') format('woff2'),
url('/assets/fonts/AcrosstheRoad.woff') format('woff');,
url('/assets/fonts/AcrosstheRoad.ttf') format('truetype');
}
I have been attempting to install a font and use it in my CSS and have been unsuccessful at this. I would like to figure out where am I going wrong. I uploaded the .tff file in the same folder as the CSS file and added to the updated my css file in the appropriate manner.
here is a copy of what I have in my css:
#font-face
{
font-family: ImpactLabel;
src: url('ImpactLabel.tff');
}
p.change
{
font-family:ImpactLabel;
color: #A70C1E;
font-size:3em;
}
Here is my html file:
<p class="change">Text</p>
Check this ->
#font-face {
font-family: ImpactLabel;
src: url('ImpactLabel.ttf'), <-- Check if the path is correct (ttf not tff)
url('ImpactLabel.eot'); /* IE9 */
}
Then just call on your class:
.change {
font-family: 'ImpactLabel';
}
try this http://www.fontsquirrel.com/tools/webfont-generator
#font-face {
font-family: 'primelight';
src: url('prime_light-webfont.eot');
src: url('prime_light-webfont.eot?#iefix') format('embedded-opentype'),
url('prime_light-webfont.woff') format('woff'),
url('prime_light-webfont.ttf') format('truetype'),
url('prime_light-webfont.svg#primelight') format('svg');
font-weight: normal;
font-style: normal;
}
p.change{
font-family: "primelight", Verdana, Tahoma;
}
creat a repository in your website : fonts/prime/
put the prime files inside make sure you have something like this :PrimeLight.otf
read more here I need Prime font for my web site
Upload it to the FontSquirrel Webfont Generator and use the code and files it gives you. Problem solved!
FontSquirrel will generate several different formats of the font which are loaded selectively by different browsers and devices (and thus will give you the broadest compatibility).
Edit: Apparently this font is actually on FontSquirrel already, so all you need to do is click here and download the webfont kit from them.
Here's what's frustrating here. I got a font pack for Sansation, and then tried to use it with #font-face. The regular version works and the "bold" version doesn't. I checked the filename and it's definitely correct. My understanding was that any font should work. Am I missing something?
#font-face
{
font-family: sansation_regular;
src: url('/fonts/sansation_regular-webfont.ttf'),
url('/fonts/sansation_regular-webfont.eot');
}
I then, without changing the font-family in the CSS corresponding to the text element, change it to:
#font-face
{
font-family: sansation_regular;
src: url('/fonts/sansation_bold-webfont.ttf'),
url('/fonts/sansation_bold-webfont.eot');
}
Thanks for any assistance.
You should probably also run the font through FontSquirel to get the full set
http://www.fontsquirrel.com/tools/webfont-generator
the css it'll generate will be something like:
/* fonts */
#font-face {
font-family: 'sansation_regular-webfont';
src: url('../fonts/sansation_regular-webfont.eot');
src: url('../fonts/sansation_regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/sansation_regular-webfont.woff') format('woff'),
url('../fonts/sansation_regular-webfont.ttf') format('truetype'),
url('../fonts/sansation_regular-webfont.svg#sansation_regular-webfont') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'sansation_bold-webfont';
src: url('../fonts/sansation_bold-webfont.eot');
src: url('../fonts/sansation_bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/sansation_bold-webfont.woff') format('woff'),
url('../fonts/sansation_bold-webfont.ttf') format('truetype'),
url('../fonts/sansation_bold-webfont.svg#sansation_bold-webfont') format('svg');
font-weight: normal;
font-style: normal;
}
Also I'd avoid using full ULR refs - just check the path to your fonts folder is correct from the css file
I've tested the Sansation with #font-face, and both the regular and bold versions seem to work when installed as system fonts. Maybe double check the paths?
If using a local file directory isn't working, try an absolute path. The following solution worked:
#font-face
{
font-family: sansation_regular;
src: url('http://www.siteAddress.com/fonts/sansation_bold-webfont.ttf'),
url('http://www.siteAddress.com/fonts/sansation_bold-webfont.eot');
}
As #DOLOisSOLO and #Mr. Lavalamp suggested, absolute paths should work.
For future reference, is your CSS file in a folder? If so then a relative path URL can be used, for example:
#font-face
{
font-family: sansation_regular;
src: url('../fonts/sansation_regular-webfont.ttf'),
url('../fonts/sansation_regular-webfont.eot');
}
The dots representing one level up each time.