I am attempting to use the following webfont kit from Font Squirrel on a webpage - http://www.fontsquirrel.com/fonts/DJ-Gross
On the 'Webfont kit' tab on the above page, I selected 'No subsetting' form the dropdown and then clicked 'DOWNLOAD #FONT_FACE KIT'
I think font squirrel does a great job of setting out the #font-face declaration for you so I have just used this in my css and moved the font files (.eot, .svg, .ttf, and .woff) to an appropriate directory to use on my site where fairly sure filepaths are referenced correctly.
This font is rendering in Safari but not Chrome
Disregarding my webpage, this can be reproduced by opening the DJGROSS.html file that comes with the Font Squirrel download. Again, this demo works in Safari but not Chrome and I have not touched this code at all :)
EDIT:
#font-face {
font-family: 'dj_grossnormal';
src: url('DJGROSS-webfont.eot');
src: url('DJGROSS-webfont.eot?#iefix') format('embedded-opentype'),
url('DJGROSS-webfont.woff') format('woff'),
url('DJGROSS-webfont.ttf') format('truetype'),
url('DJGROSS-webfont.svg#dj_grossnormal') format('svg');
font-weight: normal;
font-style: normal;
}
All the font files are in the same directory as my style.css file where this #font-face declaration is
is working... look this image try to clean you Google Chrome!
If you open the dev console and see what files the browser is pulling from your site, you'll be able to see if it's downloading the font file in safari. Some more information like this will help us to answer your question.
Related
Hi guys I've done a fair amount of digging and this persistent problem is driving me insane.
I can't get my font-type to load for mobile and IE.
My site is http://kays.vurb.us/
I am talking about the hamburger icon when in responsive mode. It uses the letter 'a' with a special font 'etmodules'.
This is how my css looks like:
#font-face {
font-family: 'etmodules';
src: url('etmodules_v2_4.eot');
src: url('etmodules_v2_4.eot?#iefix') format('embedded-opentype'),
url('etmodules_v2_4.woff2') format('woff2'),
url('etmodules_v2_4.woff') format('woff'),
url('etmodules_v2_4.ttf') format('truetype'),
url('etmodules_v2_4.svg#etmodules_v2_4regular') format('svg');
font-weight: normal;
font-style: normal;
}
I put the files in my main wordpress directory. I don't know what I am doing wrong. Since it doesn't work on IE and mobile I tried looking at the IE developer tools but I can't figure out why the font won'
t download or load on the site. Please help me :(
Create a new folder called fonts or any name you want inside your theme folder, then upload your font files inside that folder
Then use absolute path e.g
src: url(http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf);
Web font is not rendered properly in firefox. It working fine for Chrome browser.
Below is my CSS code,
#font-face {
font-family: 'DINm';
src: url('http://www.themediaverse.com.au/wp-content/themes/themediaverse/assets/fonts/DINWeb-Medium.eot');
src: url('http://www.themediaverse.com.au/wp-content/themes/themediaverse/assets/fonts/DINWeb-Medium.eot?#iefix') format('embedded-opentype');
src: url('http://www.themediaverse.com.au/wp-content/themes/themediaverse/assets/fonts/DINWeb-Medium.woff') format('woff');
src: url('http://www.themediaverse.com.au/wp-content/themes/themediaverse/assets/fonts/DINComp-Medium.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
I have referred below url,
CSS Font-Face url not working?
How can i resolve this problem?
Thanks.
Those links are to font files that don't allow cross-site linking. Chrome doesn't follow that part of the specification, but Firefox does.
See the "published site" part https://stackoverflow.com/a/3704578/720912 for how to configure the server to allow linking to the fonts.
change the code from
format ('truetype');
to
format ('opentype');
and this should work for you.
That was listed in the article referenced from the other page near the bottom and it worked for me. This fiddle shows the working example: http://jsfiddle.net/Phlume/CMv8G/1/
You should see this:
The article also mentioned that for otf or ttf fonts you can leave the format section off entirely -- it is optional as the format is open type.
I'm having problems getting my web font in small caps using "font-variant: small-caps". Here's my findings and what I went through, ruling out possible problems :
My initial thought was that the .woff file was not rendering small-caps for some reason. I've ruled this out because the font renders fine in Safari and Firefox, which as far as I know use the .woff format.
My second thought was that it was a webkit issue, but as Safari displays it fine, I don't think it is.
I'm not using twitter bootstrap, so no text-rendering: optimizelegibility, I've also tried resetting it to auto.
I tried the font-feature-settings: 'smcp' including browser prefixes, which doesn't render small caps (only the first letter is capitalized, across all browsers)
Am I missing something out?
edit
After further research, I found a fix, which is to add font-variant:small-caps to the #font-face, like so :
#font-face {
font-family:'MYFONT';
src:url('../fonts/MYFONT.eot');
src:url('../fonts/MYFONT.eot?#iefix') format('embedded-opentype'),
url('../fonts/MYFONT.ttf') format('truetype'),
url('../fonts/MYFONT.woff') format('woff'),
url('../fonts/MYFONT.svg#myfont') format('svg');
font-variant:small-caps
}
It turns out that only the stack was affected by this. Assigning a #font-face like so works as expected, in every font format supported by Chrome:
<style>
#font-face {
font-family:'MYFONTttf';
src:url('../fonts/MYFONT.ttf') format('truetype');
}
</style>
<div style="font-family:MYFONTttf; font-variant:small-caps">
works as expected, in small-caps
</div>
I think the key is, oddly enough, not to include the SVG-formatted font. Including just the WOFF and TTF seems to make it display alright.
I generated my various font files using Font Squirrel, so I ended up with .woff, .ttf, .svg, and .eot files. My font-related CSS was:
#font-face {
font-family: "foo";
src: url(/fonts/foo.eot);
src: url(/fonts/foo?#iefix) format('eot'), url(/fonts/foo.woff) format('woff'), url(/fonts/foo.ttf) format('truetype'), url(/fonts/foo.svg) format('svg');
font-weight: normal;
font-style: normal;
}
generated by Compass from:
+font-face("foo", font-files("/fonts/foo.woff", "/fonts/foo.ttf", "/fonts/foo.svg"), "/fonts/foo.eot", normal, normal)
which is in keeping with Compass's SASS font-face guidelines.
Removing the reference to the SVG seemed to fix it. I also tried switching the order of the TTF and the SVG (breaking Compass's 'recommended order' for font files) but that didn't help.
Taking a quick look around, it seems like Chrome has other miscellaneous problems with rendering SVG fonts. This isn't a really elegant solution but it might be necessary until Chrome sorts out its SVG issues.
Please excuse my ignorance but my head is starting to spin trying to figure this out.
My wordress website was fine with the google webfont I was using. But then I noticed it looks terribly faded in Internet Explorer. After some googling I discovered one solution could be to use the "kit" instead eg from fontsquirrel (although I don't know if this is true or not). So I got the "webkit" for my font. I uploaded the .eot, .woff, .ttf, and .svg files to a folder titled "fonts" in my child theme folder. I then took the code from the webkit's stylesheet and added "/fonts" to each url line (see below code), and pasted the code into the custom CSS section (my child theme has a custom CSS box beside the universal font section). This does not show my Gruppo font in anywhere, let alone Internet Explorer. Am I following the right steps to make my font look unfaded in Internet Explorer? If so, what am I doing wrong?
#font-face {
font-family: 'grupporegular';
src: url('/fonts/gruppo-regular-webfont.eot');
src: url('/fonts/gruppo-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/gruppo-regular-webfont.woff') format('woff'),
url('/fonts/gruppo-regular-webfont.ttf') format('truetype'),
url('/fonts/gruppo-regular-webfont.svg#grupporegular') format('svg');
font-weight: normal;
font-style: normal;
}
I'm using #font-face rule in my project. Here's what I'm using in my css:
#font-face
{
font-family: 'BHoma';
src: url('fonts/BHoma.eot?#') format('eot'),
url('fonts/BHoma.woff') format('woff'),
url('fonts/BHoma.ttf') format('truetype');
}
For all browsers is loading fine except for Safari. Fonts are in a folder called fonts that is located in the same folder as the css file and the language of the web site is Persian. I don't know how to debug this problem. Could anyone point out what needs to be done in order to make them work for Safari?
Add #charset "UTF-8" to the top of cssfile.