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;
}
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);
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.
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.
I hope I'm asking this question in the right place,
I'm working on a website for a friend, here's the site hosted on my goDaddy acc:
http://www.andkensol.com/rowanWeb/
And here it is on my friends:
http://www.rowanmoore.org/
You can see the clear difference in the title font. If you inspect them you'll see they are both using CODE. I personally uploaded all the files myself and the file structure, layout, file paths are all identical yet the font won't render on my friends site.
I downloaded the font from font squirrel and I'm using #font face to implement it in both sites.
CSS
#font-face {
font-family: CODE;
src: url('font/CODE Light.otf');
}
#nameTitle{
font-size:60px;
font-family:CODE;
color:white;
font-weight:400;
margin-bottom:-3%;
}
The 'font folder' is in the same folder as the stylesheet and CODE Light.otf is in the font folder.
Ive deleted the site from my friends server, downloaded it from mine and then uploaded it to my friends and still no luck.
Could this be a problem on goDaddy's end perhaps?
I recommend you to use some webgenerator to generate css file with different formats of font.
I think your problem is wrong #font-face.
#font-face {
font-family: 'nfs';
src: url('yourFont.eot');
src: url('yourFont.eot?#iefix') format('embedded-opentype'),
url('yourFont.woff') format('woff'),
url('yourFont.ttf') format('truetype'),
url('yourFont.svg#yourFontName') format('svg');
font-weight: normal;
font-style: normal;
}
Diffrenet browser need other format to render and open font.
I'm using mostly those three webfont generators
http://onlinefontconverter.com/
http://www.fontsquirrel.com/tools/webfont-generator
http://convertfonts.com/
But there is more, type to uncle google "font generator"
EDIT: i think blank space in your font/CODE Light.otf is the problem try to use for example something like this font/CODE_Light.otf
I guess it's a matter of access rights of your folders/files.
Something like 644 would be necessary for a file to be able to access the font from the outside web (the last 4 => read access for public). You can either use chmod on the console or change the rights in your ftp-client.
Also, you should support more than otf, or you will most likely lock out a significant amount of Internet Explorer Users.
I am currently using the bulletproof syntax and converted fonts from Font-Squirrel for the fonts on
www.runningwithpurpose.org.nz (fonts inline css in the html - working)
www.runningwithpurpose.org.nz/broken (fonts in css file - not working)
.
The both methods display fontes fine on browsers other than IE which sometimes will display some or all the fonts and other times not at all (but usually not at all).
I have tried playing around with the htaccess file, using the 'smiley' syntax but neither worked.
However I did manage to fix it but putting the font css inline in the html file.
This is ok but I was wondering why I seem to be unable to get it working as many other people have the #font-face declarations in the css file which would be much cleaner and it used to work fine for me but doesn't.
Any suggestions on how to get this working would be great, considering no other existing help has worked.
One of the #font-face declarations used
#font-face {
font-family: 'Aller-Regular';
src: url('assets/fonts/aller-regular.eot');
src: url('assets/fonts/aller-regular.eot?#iefix') format('embedded-opentype'),
url('assets/fonts/aller-regular.woff') format('woff'),
url('assets/fonts/aller-regular.ttf') format('truetype'),
url('assets/fonts/aller-regular.svg#Aller-Regular') format('svg');
font-weight: normal;
font-style: normal;
}
Have you tried using Google webfont instead ?, I used to used fontface but found that Google font are a million times easier to implement, plus the user doesn't have to download the font off your server each time, it just comes straight from Google.
http://www.google.com/webfonts
As stated in my question I was able to fix it at the time by putting the #font-face declarations inline in the html.
But now IE seems to have decided to fix itself and let me declare #font-faces in the CSS.