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);
Related
I am using custom web font in my blogger blog. It is not working since few weeks ago. There is a solution for this error that i show on stackflow website but i can't apply it for blogger blog because there is no .htaccess file in blogger. please some one help me. my font face code here. and my website is http://vishwatestblog.blogspot.com/
#font-face {
font-family: 'fmmalithix';
src: url('https://googledrive.com/host/0ByuGuHHrxa5GY0JSNTR4TUhaZ3c');
src: url('https://googledrive.com/host/0ByuGuHHrxa5GY0JSNTR4TUhaZ3c?#iefix') format('embedded-opentype'),
url('https://googledrive.com/host/0ByuGuHHrxa5GMm45RW5zWkd1Slk') format('woff2'),
url('https://googledrive.com/host/0ByuGuHHrxa5GUUJGS0dxME5XbDQ') format('woff'),
url('https://googledrive.com/host/0ByuGuHHrxa5GN2xhWmQ2bHdDRDA') format('truetype'),
url('https://googledrive.com/host/0ByuGuHHrxa5GRzhxSzRhN1dBTEE#fmmalithix') format('svg');
font-weight: normal;
font-style: normal;
}
It looks like the font files doesn't have the CORS headers and thats the reason, you aren't able to see the font being applied.
Also, as the files are being downloaded from googledrive, you need to be signed in to access the file.
I dont think you can host the font files on a google drive and access without authorization.
you can check it yourself, font urls you mentioned throw a 404 if you open in incognito mode.
Please Check, you have correctly placed the font file and the google drive directory.
#font-face
{
font-family: 'Font Family';
src: url('source.ttf') format('truetype'); ---> Font Type
}
I have 7 websites (different domains on one shared hosting account) all sharing the same CSS file, all of them display 3 fonts correctly except one URL, and it is just one font that doesn't display, I am loading 3 custom fonts, 2 are fine, 1 not, and they are all loaded the same way.
Any idea what's happening?
Here is the problem site ... http://www.theridgesresort.com/
Here is a site that works ... http://www.fontanavillage.com/
Please view the sites at less than 750 pixels wide, it is just the mobile style. Look at the big yellow buttons.
I just copied the same path from the correct site to the other and it works for me:
#font-face {
font-family: 'copperplate_boldcondensed';
src: url('copperplate_boldcondensed/Copperplate-BoldCond-webfont.eot');
src: url('copperplate_boldcondensed/Copperplate-BoldCond-webfont.eot?#iefix') format('embedded-opentype'),
url('copperplate_boldcondensed/Copperplate-BoldCond-webfont.woff') format('woff'),
url('copperplate_boldcondensed/Copperplate-BoldCond-webfont.ttf') format('truetype'),
url('copperplate_boldcondensed/Copperplate-BoldCond-webfont.svg#copperplate_gothic_boldRg') format('svg');
font-weight: normal;
font-style: normal;
}
Make sure that
The paths are all correct. Maybe the one site-structure has submaps
etc. You can use relative paths (../)
Check for spelling mistakes
I see in your stylesheet (fonts.css) a reference to this, yet there is no folder there with the font.
src: url('http://www.anchorsouthmanagement.com/assets/css/copperplate_bold/Copperplate-Bold-webfont.eot');
I guess the problem is with loading the different stylesheet on mobile. This is what the console spits out:
The problem is the whole website doesn't show text until I inspect element with Chrome. It all works fine on other browsers.
I don't have any chrome extensions installed and am using an incognito window, but still nothing.
The website passes validation via W3C - the site is: http://www.toricks.com
I'm using #font-face, which by looking at it seems to be setup fine!
Can anyone shed any light on this?
You can try the Font Squirrel way of adding the #font-face like this:
#font-face {
font-family: 'Comfortaa';
src: url('comfortaa.eot');
src: url('comfortaa.eot?#iefix') format('embedded-opentype'),
url('comfortaa.woff') format('woff'),
url('comfortaa.ttf') format('truetype'),
url('comfortaa.svg#comfortaanormal') format('svg');
font-weight: normal;
font-style: normal;
}
I think this has the best cross-browser support. Make sure you convert your font to all the different types (you can do that with the Font Squirrel generator).
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 am very confused by an issue I am seeing on my production site.
When I access the site via "www", everything looks like expected and matches my local development environment. The css is spot-on.
But if I access the same site with just the domain name the fonts kind of become larger and the site becomes ugly. Has anyone experienced a similar problem?
Maybe I am missing something as 100 things are flying around for me right now.
The urls in question:
http://www.connect4fitness.com
http://connect4fitness.com
And, yes the DNS entries are correct. Both urls should be serving the same pages!
I'm guessing you're just viewing at the wrong zoom level. What browser are you using? In the version where the fonts are large, make sure you're veiwing at 100% zoom level (generally this is done by hitting Ctrl+0 (that's a zero) or zoom in and out with Ctrl+(either plus or minus +/-). Most modern browsers remember your last zoom level for a specific site, and do differentiate between sub-domains, so you you zoomed in at some point it will remember it only on the http://connect4fitness.com.
If you're using #font-face rules in your CSS, the path(s) to the fonts have to match the domain from which they're requested — this is referred so as the same origin policy.
For example, if you're viewing this page:
http://example.com/about
and the fonts are being served via CSS from:
http://www.example.com/css/screen.css
You'll encounter the same origin policy and the browser will not download the font files (since the fonts specified in the CSS are being served from a different domain. Remember, sub-domains such as www are technically considered a separate domain).
To easiest way to fix the problem is to link to your fonts in your CSS using relative (../) or absolute paths (/), and avoid using your site's FQDN if at all possible..
Good (Relative):
#font-face {
font-family: 'MyWebFont';
src: url('../fonts/webfont.eot');
src: url('../fonts/webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/webfont.woff') format('woff'),
url('../fonts/webfont.ttf') format('truetype'),
url('../fonts/webfont.svg#svgFontName') format('svg');
}
Best (Absolute):
#font-face {
font-family: 'MyWebFont';
src: url('/fonts/webfont.eot');
src: url('/fonts/webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/webfont.woff') format('woff'),
url('/fonts/webfont.ttf') format('truetype'),
url('/fonts/webfont.svg#svgFontName') format('svg');
}
Bad (FQDN):
#font-face {
font-family: 'MyWebFont';
src: url('http://example.com/fonts/webfont.eot');
src: url('http://example.com/fonts/webfont.eot?#iefix') format('embedded-opentype'),
url('http://example.com/fonts/webfont.woff') format('woff'),
url('http://example.com/fonts/webfont.ttf') format('truetype'),
url('http://example.com/fonts/webfont.svg#svgFontName') format('svg');
}