I coded a website on my mac, and i used a custom font. I defined the custom font with this font-face rule:
#font-face
{
font-family: gnuolane;
src: url('../fonts/gnuolane.otf'),
}
The problem is that the font is not loaded on any windows version of any browser. On my mac, on Safari/Chrome/FF is working perfect.
This is the website.
And this is how it is supposed to look like, when font-face is working correctly:
Thanks
LE:
I generated this code and all those files from fontsquirrel.com. Still not working. I tried with both '../fonts/gnuolane....' and '/fonts/gnuolane....'
#font-face {
font-family: 'gnuolane';
src: url('../fonts/gnuolane_rg-webfont.eot');
src: url('../fonts/gnuolane_rg-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/gnuolane_rg-webfont.woff') format('woff'),
url('../fonts/gnuolane_rg-webfont.ttf') format('truetype'),
url('../fonts/gnuolane_rg-webfont.svg#gnuolane_rgregular') format('svg');
font-weight: normal;
font-style: normal;
}
Still not working tho'..
Move all your font files (the actual fonts I mean) to the same folder as your CSS file...
Then use this block of CSS. Tell me if it works. I sense it's a path issue...
#font-face {
font-family: 'gnuolane';
src: url('gnuolane_rg-webfont.eot');
src: url('gnuolane_rg-webfont.eot?#iefix') format('embedded-opentype'),
url('gnuolane_rg-webfont.woff') format('woff'),
url('gnuolane_rg-webfont.ttf') format('truetype'),
url('gnuolane_rg-webfont.svg#gnuolane_rgregular') format('svg');
font-weight: normal;
font-style: normal;
}
try this
#font-face {
src: local('gnuolane'), url('/path_to/gnuolane.otf') format('truetype');
}
Related
I'm getting a "mixed content" error on my website due to one font being loaded over HTTP.
My font is included in a css file like this:
#font-face {
font-family: 'fontXYZ';
src: url('../font/fontXYZ.eot');
src: url('../font/fontXYZ.eot#iefix') format('embedded-opentype'),
url('../font/fontXYZ.woff2') format('woff2'),
url('../font/fontXYZ.woff') format('woff'),
url('../font/fontXYZ.ttf') format('truetype'),
url('../font/fontXYZ.svg#fontXYZ') format('svg');
font-weight: normal;
font-style: normal;
}
With webpack I bundle this css with other various css in one file.
On my website the css looks like this:
#font-face {
font-family: 'fontXYZ';
src: url(fontXYZ.eot);
src: url(fontXYZ.eot#iefix) format('embedded-opentype'),
url(fontXYZ.woff2) format('woff2'),
url(fontXYZ.woff) format('woff'),
url(fontXYZ.ttf) format('truetype'),
url(fontXYZ.svg#fontXYZ) format('svg');
font-weight: normal;
font-style: normal;
}
All solutions that I found suggest that I change the URL to HTTPS or that I use '//' but I don't see how I could do that.
include font like this...
#font-face {src: url(font/Roboto-Bold.ttf);font-family: RobotoBold;}
font/Roboto-Bold.ttf - font file inside fonts folder(path of the file)
use font family like below..
.banner_header{font-family: RobotoBold;}
I have following fonts in my style.css in my wordpress theme.
#font-face {
font-family: 'latoregular';
src: url('./fonts/lato-regular.eot');
src: url('./fonts/lato-regular.eot?#iefix') format('embedded-opentype'),
url('./fonts/lato-regular.woff2') format('woff2'),
url('./fonts/lato-regular.woff') format('woff'),
url('./fonts/lato-regular.ttf') format('truetype'),
url('./fonts/lato-regular.svg#latoregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'bebasregular';
src: url('./fonts/bebas___-webfont.eot');
src: url('./fonts/bebas___-webfont.eot?#iefix') format('embedded-opentype'),
url('./fonts/bebas___-webfont.woff2') format('woff2'),
url('./fonts/bebas___-webfont.woff') format('woff'),
url('./fonts/bebas___-webfont.ttf') format('truetype'),
url('./fonts/bebas___-webfont.svg#bebasregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'coustardregular';
src: url('./fonts/coustard-regular.eot');
src: url('./fonts/coustard-regular.eot?#iefix') format('embedded-opentype'),
url('./fonts/coustard-regular.woff2') format('woff2'),
url('./fonts/coustard-regular.woff') format('woff'),
url('./fonts/coustard-regular.ttf') format('truetype'),
url('./fonts/coustard-regular.svg#coustardregular') format('svg');
font-weight: normal;
font-style: normal;
}
This is the text in h2 element
The h2 element has font-family of coustardregular and font-weight of bold. As you can see in the image the structure of letter T is very strange and so is with letter I. I got this problem only in chrome and nowhere else. I tried this link also but it does not work and I have no idea about it. Can anybody guide me over this.
Where are you getting your font files from? I normally try to stick to using Google fonts rather than using loads of files because you know they'll work as they've been tried and tested whereas a lot of the time when you use the individual files, they've been converted from another file type which is where a lot of problems come from.
Google Fonts has the Coustard font and you can use it simply by adding the following to your css file (at the top):
#import url(https://fonts.googleapis.com/css?family=Coustard);
...or head over to Google to customize - https://www.google.com/fonts/specimen/Coustard
I wanna make a website with a font named SutonnyMJ.TTF (in Bangla). I tried many resources, but i failed to do this.
i use #font-face { font-family: SutonnyMJ; src: url('../fonts/SutonnyMJ.TTF'); }
#font-face {
font-family: 'SutonnyMJ';
src: url('../fonts/SutonnyMJ-webfont.eot');
src: url('../fonts/SutonnyMJ-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/SutonnyMJ-webfont.woff') format('woff'),
url('../fonts/SutonnyMJ-webfont.ttf') format('truetype'),
url('../fonts/SutonnyMJ-webfont.svg#BebasNeueRegular') format('svg');
font-weight: normal;
font-style: normal;
}
but they does not work that i want.
Is there anyone to help me please, How can i solve this?
you can probably remove a couplke lines from there and remove legacy support your site will probably work fine with just this
#font-face {
font-family: 'SutonnyMJ';
src: url('../fonts/SutonnyMJ-webfont.woff') format('woff'),
url('../fonts/SutonnyMJ-webfont.ttf') format('truetype');
}
With #font-face you loaded in a custom font but you aren't using it yet
You still have to apply it to your website
body {
font-family: 'SutonnyMJ', sans-serif;
}
The webpage where I'm trying to get the custom font "Duke-Fill" to display is http://www.hamlinforcongress.com/helpout.php
I'm using:
#font-face {
font-family: 'header_font';
src: url('Duke-Fill.eot?#iefix') format('embedded-opentype'),
url('Duke-Fill.woff') format('woff'),
url('Duke-Fill.ttf') format('truetype'),
url('Duke-Fill.svg#svgFontName') format('svg');
}
.header_font{
font-family: header_font;
}
I've tried every other suggestion I can find on the Internet, but nothing can make the custom font display in Internet Explorer. It works perfectly in every other conceivable browser, but not IE (surprise surprise). Help?
#font-face {
font-family: 'NimbusSanConD-Lig';
src: url('fonts/228BFB_1_0.eot');
src: url('fonts/228BFB_1_0.eot?#iefix') format('embedded-opentype'),
url('fonts/228BFB_0_0.woff') format('woff'),
url('fonts/228BFB_0_0.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
This code works in IE. It was generated using Font Squirrel
I just pulled up a project I'm working on to make some modifications, and noticed that declaration font-weight: lighter which is being served via #font-face and it is no longer working on the site (see image - top chrome, bottom ff). Nothing has changed on my system (Windows) since last night, bar being upgraded to Chrome 19.0.1084.46 today, which I presume is the problem, but I am wondering if anyone else has noticed this or if there is a fix?
Thanks.
Try using a number instead the relative term lighter.
For example: font-weight:100 will be the lightest.
There's a handy article about relative and absolute font-weights here:
http://webdesign.about.com/od/fonts/qt/aa031807.htm
If you are using a font-face font that has multiple styles (as you should) make sure that each variant is specifically tied to a font-weight, that way each variation has its own explicit file. Otherwise it's kinda up to the browser to make up what it wants to do. I have found that the automatically generated code from font-squirrel does not do this (though perhaps they've updated they're packaging)
Notice in the following code how each file has font-weight and font-style set explicitly. This leaves no room for guessing.
#font-face {
font-family: 'CaviarDreams';
src: url('fonts/CaviarDreamsItalic-webfont.eot');
src: url('fonts/CaviarDreamsItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/CaviarDreamsItalic-webfont.woff') format('woff'),
url('fonts/CaviarDreamsItalic-webfont.ttf') format('truetype'),
url('fonts/CaviarDreamsItalic-webfont.svg#CaviarDreamsItalic') format('svg');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'CaviarDreams';
src: url('fonts/CaviarDreams_BoldItalic-webfont.eot');
src: url('fonts/CaviarDreams_BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/CaviarDreams_BoldItalic-webfont.woff') format('woff'),
url('fonts/CaviarDreams_BoldItalic-webfont.ttf') format('truetype'),
url('fonts/CaviarDreams_BoldItalic-webfont.svg#CaviarDreamsBoldItalic') format('svg');
font-weight: bold;
font-style: italic;
}
#font-face {
font-family: 'CaviarDreams';
src: url('fonts/CaviarDreams-webfont.eot');
src: url('fonts/CaviarDreams-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/CaviarDreams-webfont.woff') format('woff'),
url('fonts/CaviarDreams-webfont.ttf') format('truetype'),
url('fonts/CaviarDreams-webfont.svg#CaviarDreamsRegular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'CaviarDreams';
src: url('fonts/CaviarDreams_Bold-webfont.eot');
src: url('fonts/CaviarDreams_Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/CaviarDreams_Bold-webfont.woff') format('woff'),
url('fonts/CaviarDreams_Bold-webfont.ttf') format('truetype'),
url('fonts/CaviarDreams_Bold-webfont.svg#CaviarDreamsBold') format('svg');
font-weight: bold;
font-style: normal;
}