I'm trying to use the Entyo font face but I'm unable to get it working. I changed the whole of the site to the font and can notice a distinct pause whena page is being loaded, searchign for but not finding the font perhaps?
My CSS:
#font-face {
font-family: 'EntypoRegular';
src: url('fonts/entypo-webfont.eot');
src: url('fonts/entypo-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/entypo-webfont.woff') format('woff'),
url('fonts/entypo-webfont.ttf') format('truetype'),
url('fonts/entypo-webfont.svg#EntypoRegular') format('svg');
font-weight: normal;
font-style: normal;
the fonts folder is in the root directory.
Thanks
EDIT:
Folder structure:
Main
-> fonts
-> -> entypo.eot
-> -> entypo.svg
-> -> entypo.ttf
-> -> entypowoff
-> CSS
-> -> stylesheet with #fontface call
-> includes
-> Etc etc
Updated url to //fonts/entypo.eot and so on. Fonts are being loaded and are visible in web dev inspector but still not displaying on screen. Only tested in safari and chrome, same result for both
EDIT: CSS Details.
#charset "UTF-8";
#font-face {
font-family: 'EntypoRegular';
src: url('//fonts/entypo-webfont.eot');
src: url('//fonts/entypo-webfont.eot?#iefix') format('embedded-opentype'),
url('//fonts/entypo-webfont.woff') format('woff'),
url('//fonts/entypo-webfont.ttf') format('truetype'),
url('//fonts/entypo-webfont.svg#EntypoRegular') format('svg');
font-weight: normal;
font-style: normal;
}
html { -webkit-font-smoothing: antialiased; } /*global improvement on all fonts*/
body {
font-family: "EntypoRegular", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
font-size-adjust:inherit;
}
I removed everything that wasn't necessary
Okay, to summarize:
First issue was due to slightly off relative path, which is all sorted. Now your paths are correct and you've verified the fonts are being loaded but not actually used (out of curiousity, how did you verify that?).
Possiple cuplrits: erroneous css (the bit you posted looks fine), browser compatability (what browser/version are you using?), corrupted font files (try re-downloading).
If you fire up the console/dom inspector tool in whatever browser you are using and check to see what css is being applied, can you tell if the font-family is being overridden by some other rule?
Are the elements of your site actually using the font?
body {
font-family: 'EntypoRegular', your-other-fallback-fonts;
}
Related
Before posting I searched and unsuccessfully tested different solutions.
Chrome is not rendering at all the correct weights for the montserrat family, I have tried different solution as enable/disable the clear type option in win 10, but not of them worked. Anyway I dont wanna solve this issue by changing my s.o. configuration.
Everything is correct in edge and firefox.
Any ideas why this is happening?
I am importing the font as:
#import url('https://fonts.googleapis.com/css?family=Montserrat:100,300,400,700,900'); /** font-family: 'Montserrat', sans-serif; **/
And using it as:
p {
font-family: 'Montserrat', sans-serif;
font-size: 16px;
font-weight: 100; /** 300 didnt work either **/
}
The problems with font-weight and web fonts are known but sadly still not fixed.
Chrome still has some problems with web fonts and its weights.
You probably have the font installed locally and chrome loads it first, instead of using the web font. A possible workaround is deleting the font from your local directory but even if that works, other person with locally installed Montserrat may have the same problems using your website.
More optimal workaround is downloading the font and loading every weight as a different font. Loading a local font in CSS is done with defining it trough #font-face which is used like this
#font-face {
font-family: 'MontserratLight';
font-weight: normal;
src: url('montserrat_light.eot');
src: url('montserrat_light.eot?#iefix') format('embedded-opentype'),
url('montserrat_light.woff2') format('woff2'),
url('montserrat_light.woff') format('woff'),
url('montserrat_light.ttf') format('truetype'),
}
#font-face {
font-family: 'MontserratRegular';
font-weight: normal;
src: url('montserrat_regular.eot');
src: url('montserrat_regular.eot?#iefix') format('embedded-opentype'),
url('montserrat_regular.woff2') format('woff2'),
url('montserrat_regular.woff') format('woff'),
url('montserrat_regular.ttf') format('truetype'),
}
Then you use them as different fonts.
Example
p {
font-family: 'MontserratLight', sans-serif;
font-size: 16px;
}
You can read more about #font-face here https://css-tricks.com/snippets/css/using-font-face/
I figured out a slightly easier method where you don't have to host the fonts locally.
First open the google fonts link in a new window - in this case, its:
https://fonts.googleapis.com/css?family=Montserrat:100,300,400,700,900
Now paste this into a new CSS file.
The problem is on the lines beginning with src: where it is specifically asking the browser to look locally for the font files first.
You need to remove the local references and just keep the url ones - this will prevent it defaulting to your local copy (worked for me anyway)
/* cyrillic-ext */
#font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 100;
src: local('Montserrat Thin'), local('Montserrat-Thin'), url(https://fonts.gstatic.com/s/montserrat/v12/JTUQjIg1_i6t8kCHKm45_QpRxC7mw9c.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
This should save you having to download and host the font files.
I had a similar problem with the Open Sans Google font. For me the solution was adding the following to my css:
html, body {
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
I have a simple one-page layout, all HTML + CSS basically(will add some js soon but it's not there at the moment).
Baiscally i have this:
/* Cambo */
#font-face {
font-family: 'CamboRegular';
src: url('font/cambo/Cambo-Regular-webfont.eot');
src: url('font/cambo/Cambo-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('font/cambo/Cambo-Regular-webfont.woff') format('woff'),
url('font/cambo/Cambo-Regular-webfont.ttf') format('truetype'),
url('font/cambo/Cambo-Regular-webfont.svg#CamboRegular') format('svg');
font-weight: normal;
font-style: normal; }
/* Source Sans Pro */
#font-face {
font-family: 'SourceSansProRegular';
src: url('font/sourcesanspro/SourceSansPro-Regular-webfont.eot');
src: url('font/sourcesanspro/SourceSansPro-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('font/sourcesanspro/SourceSansPro-Regular-webfont.woff') format('woff'),
url('font/sourcesanspro/SourceSansPro-Regular-webfont.ttf') format('truetype'),
url('font/sourcesanspro/SourceSansPro-Regular-webfont.svg#SourceSansProRegular') format('svg');
font-weight: normal;
font-style: normal; }
When i use font-family: 'Cambo Regular'; it works, but when i try to choose a font-family: 'SourceSansProRegular'; the font is not being loaded on any browser i try.
The original path for the fonts in the website folders was url('../assets/fonts/ --> rest copied from FontSquirrel
Since i noticed none of the two worked i moved them inside the folder where the css are so i have
main folder(with index pointing at the css folder)/assets/css(with my css)/font(with the two fonts folders inside)
Why is this not working? Am i missing something while declaring the path? If CamboRegular shouldn't work too but it's displaying just fine both on Windows and Mac on any browser.
QUICK EDIT!
I changed the path to a totally wrong one and it displays the basic page font.
I think the font is being loaded but it looks "bolder" than it should be. If you watch the design in Photoshop and then on the page it looks different(i made the design so i know it wasn't stretched or something) but CamboRegular is still looking and acting as it should.
Here's the image to show the problem
http://img526.imageshack.us/img526/2671/nnqu.jpg
The CSS for the the grey text is included in is pretty simple too
p {
color: #8a8a8a;
font-family: 'SourceSansProRegular';
font-size: 16px; }
And here's the one for the top menu(not shown in this image) with the CamboRegular correctly working
h1 {
color: #494949;
font-family: 'CamboRegular';
font-size: 48px;
text-align: center; }
As you can see it's nothing fancy but still, one's working the other isn't.
I'm pulling in the google font code using their include. Their CSS looks like this:
#font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 300;
src: url(http://themes.googleusercontent.com/static/fonts/oswald/v7/HqHm7BVC_nzzTui2lzQTDfY6323mHUZFJMgTvxaG2iE.eot);
src: local('Oswald Light'), local('Oswald-Light'), url(http://themes.googleusercontent.com/static/fonts/oswald/v7/HqHm7BVC_nzzTui2lzQTDfY6323mHUZFJMgTvxaG2iE.eot) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/oswald/v7/HqHm7BVC_nzzTui2lzQTDT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
Using this I created a css class
.oswald {
font-family: 'Oswald', Verdana, Arial, Helvetica, sans-serif
}
Then I use that like this
<div class="oswald">text</div>
Here's where it gets a little weird. I'm using Visual Studio so when I debug it locally I see the correct font. When I put it up on the server it's showing me the Verdana font. Chrome also shows the wrong front. Safari and Firefox both show the correct font.
I've converted Oswald Regular into the necessary #font-face formats (TTF, OTF, EOT, SVG, WOFF).
#font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 300;
src: url('Archive/Oswald-Regular.eot');
src: local('Oswald'), url('Archive/Oswald-Regular.woff') format('woff'), url('Archive/Oswald-Regular.ttf') format('truetype'), url('Archive/Oswald-Regular.svg#Oswald-Regular') format('svg');
font-weight: normal;
font-style: normal;
}
And here is the link to the ZIP archive that contains the converted fonts: http://www.mediafire.com/?9xdr1w9wyvdoh09
I find using the css #import rule a lot more reliable and avoids having to have the 5x formats of fonts required for browser compatibility. Drop this in to the top of your CSS file:
#import url(http://fonts.googleapis.com/css?family=Oswald:400,700,300);
PS. This will include: light (font-weight: 300), regular (font-weight: 400) and bold (font-weight: 700) for Oswald.
I am trying to use Helvetica Neue as the font for my website everywhere so I applied to the body like so
body {
background-image: url("http://inauguralseason.com/wp-content/themes/twentyeleven/images/background.jpg");
font-family: "Helvetica Neue" !important;
}
but my font does not appear, it was working at one point but now its not working in Firefox, Chrome, Safari or IE
you can see what I am talking about here
http://inauguralseason.com/
any help would be appreciated,
Thanks,
J
Your #font-face seems to have the font family named as 'helvetica_neueregular' and I don't see a font set for your navigation but anywhere else if you add 'helvetica_neueregular' it loads the font. As far as browser consistency In Chrome dev tools it looks like you are missing some font browser types to provide full browser support.
http://inauguralseason.com/wp-content/themes/twentyeleven/style.css
#font-face {
font-family: 'helvetica_neueregular';
src: url('helveticaneue-medium-webfont.eot');
src: url('helveticaneue-medium-webfont.eot?#iefix') format('embedded-opentype'),
url('helveticaneue-medium-webfont.woff') format('woff'),
url('helveticaneue-medium-webfont.ttf') format('truetype'),
url('helveticaneue-medium-webfont.svg#helvetica_neueregular') format('svg');
font-weight: normal;
font-style: normal;
}
EDIT: This is loading the medium font but it called regular just change to 'helvetica_neuemedium'
You need to upload the font to your web-site and declare the font-face
#font-face
{
font-family: 'Helvetica Neue';
src: url('HelveticaNeue.ttf'),
url('HelveticaNeue.eot'); /* IE9 */
}
and only then you can use it on your web-pages.
I’m currently trying to implement webfonts on the site I build, I want to use it as a fallback within the font-family attribute, i.e. If the character is not represented in Arial / Helvetica then it should be within the webfont used.
I realise this will not work in IE6 and 7 but expected it to work in IE8 which it doesn’t seem too.
I was just wondering if anyone had ever had any experience of this problem and if using a webfont as a fallback font was possible in IE8 or if anyone can just see that I'm just doing something wrong within the code.
Thanks in advance, for any help
Here is my css code:
#font-face {
font-family: 'stix';
src: url('/webfonts/webfont.eot');
src: local('☺'), url('/webfonts/webfont.woff') format('woff'), url('/webfonts/webfont.ttf') format('truetype'), url('/webfonts/webfont.svg#webfont3hGwcDt1') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'stix';
src: url('/webfonts/bold-webfont.eot');
src: local('☺'), url('/webfonts/bold-webfont.woff') format('woff'), url('/webfonts/bold-webfont.ttf') format('truetype'), url('/webfonts/bold-webfont.svg#webfontJse4ZhT8') format('svg');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'stix';
src: url('/webfonts/talic-webfont.eot');
src: local('☺'), url('/webfonts/italic-webfont.woff') format('woff'), url('/webfonts/italic-webfont.ttf') format('truetype'), url('/webfonts/italic-webfont.svg#webfonthDLBqRGk') format('svg');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'stix';
src: url('/webfonts/bold_italic-webfont.eot');
src: local('☺'), url('/webfonts/bold_italic-webfont.woff') format('woff'), url('/webfonts/bold_italic-webfont.ttf') format('truetype'), url('/webfonts/bold_italic-webfont.svg#webfontnuMlJc7x') format('svg');
font-weight: bold;
font-style: italic;
}
body { font-family: arial, helvetica, clean, stix, sans-serif}
body.ie6 #content, body.ie6 .popup { font: 15px/1.6em stix; }
Try to use converter on fontsquirrel.com
What's the benefit of using STIX as a fallback?
If it's to prevent the UA downloading the font unless it's needed, you're out of luck, only webkit has that behaviour currently https://gist.github.com/478344 Worse still, IE will download all the fonts defined in #font-face even if they're not referenced anywhere else in the CSS.
If it's because STIX doesn't have regular chars, yeah, IE's going to screw you over here. I'd recommend merging STIX with a free typeface to create one deliverable that has all the chars you need.
I'm using a stripped down version of your code (for the sake of clarity alone - there's nothing wrong with it) and testing in lots of browsers (with the webfont being STIX, like you, not that I'm aware if this plays a role), and I'm seeing some odd behaviour: font fallback in most browsers does work, but only when excluding all italic variants of fonts (be they italic or bolditalic).
I.e. this works (100% of the time), with browsers falling back to STIX for those chars not in arial:
#font-face {
font-family: 'stix';
src: url('stixgeneral-webfont.eot');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'stix';
src: url('stixgeneralbol-webfont.eot');
font-weight: bold;
font-style: normal;
}
body {font-family: arial, stix, sans-serif;}
… but this does not work 100% of the time (although sometimes it does display the chars!):
#font-face {
font-family: 'stix';
src: url('stixgeneral-webfont.eot');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'stix';
src: url('stixgeneralitalic-webfont.eot'); /* note - italic font variant */
font-weight: normal;
font-style: italic;
}
body {font-family: arial, stix, sans-serif;}
The reason for this appears to be that the STIX fonts package has errors.
In order to get around this, open your STIX fonts package in FontForge and save - FontForge will inform you of errors. Fix these, and only then import into FontSquirrel. Font fallback should now work correctly.
The problem might be that "in Internet Explorer 8 and earlier versions, only one URL value is supported".
Also, rather than using #font-face for a fall-back font, choose one you'd prefer and don't declare "arial, helvetica" in which ever order, instead falling straight back on sans-serif. This way, the most suitable sans-serif is used on each platform, such as Arial for Windows and Helvetica for OS X, etc.
Btw... IE will try to load SVG format so you should define EOT src after svg! (IE bug).