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:
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 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.
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');
}
I have downloaded a font face kit from font squirrel, and created a css file with the given code. I copied all of the woff, ttf, eot, and svg files to my public folder, and have created a h1 code that references the font that I want to use. However when I go to check to see if the font is working, I just get the standard times new roman. If I put a backup font next to the one I want to use, I get that font. Does anyone know why this may be happening? Here is the code I am using.
#font-face {
font-family: 'CartoGothicStdBook';
src: url('CartoGothicStd-Book-webfont.eot');
src: url('CartoGothicStd-Book-webfont.eot?iefix') format('eot'),
url('CartoGothicStd-Book-webfont.woff') format('woff'),
url('CartoGothicStd-Book-webfont.ttf') format('truetype'),
url('CartoGothicStd-Book-webfont.svg#webfont1l1oLWSU') format('svg');
font-weight: normal;
font-style: normal;
}
.carto {
font-family: CartoGothicStdBook, Arial;
color: #333333;
font-size: 44px;
letter-spacing: -3px;
}
<h1 class= "carto"><b>Share Your Knowledge & Explore Your Passions<b></h1>
are you importing these fonts from an external style sheet?
When I placed my fonts in the same directory and embedded the #font-face declarations directly in my pages as applicable, I had no problems, but it didn't seem like I was able to link to a relative source. I'm wondering if this has something to do with all the fuss over licensing issues. Another thing...I seemed to have better luck referencing fonts with '' e.g.:
ul li:nth-child(6n),#filler {
color:#3F9;
font-family:'WCRhesusABtaRegular';
}
where the corresponding font would be:
#font-face {
font-family: 'WCRhesusABtaRegular';
src: url('WC_Rhesus_A_Bta-webfont.eot');
src: url('WC_Rhesus_A_Bta-webfont.eot?iefix') format('eot'),
url('WC_Rhesus_A_Bta-webfont.woff') format('woff'),
url('WC_Rhesus_A_Bta-webfont.ttf') format('truetype'),
url('WC_Rhesus_A_Bta-webfont.svg#webfonte627I3xy') format('svg');
font-weight: normal;
font-style: normal;
}
btw, this is an awesome font for decorative purposes (if you want to go Jackson Pollack all over your website), not so much for reading :)
hope this helps if you run into any more issues...if you did figure out a way to import font style sheets or place fonts in a separate directory, I would certainly like to hear about it...I haven't been able to find examples on the web where anyone is importing fonts...but I have seen people use a /Fonts directory. This may also be a licensing related item?
Oh and a quick note for those of you who are just getting started with #font-face (I'm just getting started myself) ... there are a couple of "gotchas" that Paul Irish mentions, but you should make sure that fonts are not locally installed as your browser will use your local fonts if available - this makes your testing unreliable...of course it's not too difficult to uninstall the fonts (at least in Windows 7).
Here's some more info from Paul Irish:
http://paulirish.com/2010/font-face-gotchas/#comment-48744
The answer is listed above and it was a simple directory issue. Rails requires the leading / for an added directory.