So, I am confused by this:
#font-face {
font-family:'rift';
src: url('../vendor/fonts/Fort Foundry - Rift-Bold.otf') format('otf');
font-style: 'normal';
font-weight: '700';
}
It lives in public/vendor/fonts/ and whats confusing is that unless I physically install the font - the font doesn't render properly.
I thought the whole aspect of using custom fonts was that the end user did not have to have them installed on their machine, that it should just work. Am I missing something when it comes to using custom fonts in css?
I get no errors in the console with or with out the font installed. Is there a way to verify that it is actually working? Or is that why we have things like fallbacks?
.site-name{
color: #fff;
font-size: 22px;
font-family: rift, sans-serif; // Fallbacks
}
Can some one explain the concept of using custom fonts and if I am setting it up properly in css? From a Laravel perspective.
You can host the font files on your server, to make use of a custom font on your site. Visitors are not required to have the font installed on their machine.
Make sure to choose a file name without spaces and special chars. You'll need to offer different formats of the font (like .eot, .woff2,...) to make it work across the different browsers and operating systems. Otherwise, the fallback font (in your case sans-serif) will be used.
Check out the article Using #font-face on CSS-Tricks. This is how your CSS could look like:
#font-face {
font-family: 'rift';
font-style: 'normal';
font-weight: '700';
src: url('../vendor/fonts/fort-foundry.eot'); /* IE9 Compat Modes */
src: url('../vendor/fonts/fort-foundry.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../vendor/fonts/fort-foundry.woff2') format('woff2'), /* Super Modern Browsers */
url('../vendor/fonts/fort-foundry.woff') format('woff'), /* Pretty Modern Browsers */
url('../vendor/fonts/fort-foundry.ttf') format('truetype'), /* Safari, Android, iOS */
url('../vendor/fonts/fort-foundry.svg#FortFoundry') format('svg'); /* Legacy iOS */
}
Troubleshooting
Visit your site and open the Developer Tools. Go to the tab Console.
Reload the page and look out for errors to make sure that the path to your font files is correct. If it's not, there will be an error 404 visible in the logs.
Related
I'm using google webfonts helper to generate the css for my fonts and then download the font files: https://google-webfonts-helper.herokuapp.com
I generated the following:
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'),
url('../Content/fonts/lato-v11-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../Content/fonts/lato-v11-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
My font files are stored in ~/Content/fonts
I referenced the font like so:
body {
font-family: 'Lato', sans-serif;
margin-bottom: 90px;
font-weight: 500;
}
However, it seems like no matter what I do, I can't get the font's working. I checked the computed font family in chrome and it's set to Lato. It also won't work in any other browser either.
I don't think your URL is correct.
url('../Content/fonts/lato-v11-latin-regular.woff2')
This means that from wherever your CSS file is located, go back one directory, then go to the foler Content/fonts, but if your fonts are stored at ~/Content/fonts and your CSS is stored in two sub folders e.g. /~/assets/css/mycssFile.css for example your url won't work.
You might try url('/Content/fonts/lato-v11-latin-regular.woff2') which will use the root directory of your website, or even better you can try:
url('/../Content/fonts/lato-v11-latin-regular.woff2') which will tell go to the root directory, and try and go back one folder further which should guarantee you get the root directory. If neither of these fixes your problem, then the issue isn't with the URL, but something else.
Ive been using webfonts on my website, using #font-face and it stopped working after some browser updates, now it doesnt really work on Chrome or Firefox (the two main browsers my users use).
I tried a couple of different things but none of them made it work again. Does anyone have any idea of what could have happened?
My website is http://goronah.blog.br/
The link for the CSS is: http://www.goronah.blog.br/wp-content/themes/goronahresponsive/style.css
The #font-face is:
#font-face{
font-family:Bebas Neue;
src: url('BebasNeue.otf');
font-style:normal;
font-weight:normal;
}
and a common use:
h2 {
font-size:2.4em;
font-family:"Bebas Neue";
font-weight:normal;
}
Chrome DevTools shows the following error regarding the font:
Font from origin 'http://www.goronah.blog.br' has been blocked from
loading by Cross-Origin Resource Sharing policy: No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://goronah.blog.br' is therefore not allowed
access.
Basically due to security reasons the browser won't download the font as it comes from another (sub)domain www.goronah.blog.br than your site goronah.blog.br. I noticed that the first simply redirects to the latter, so I assume it's simply an alias and all content is available from both url's.
The easiest way to solve this is to remove the www. part from the link to your stylesheet.
<link rel="stylesheet" type="text/css" href="http://www.goronah.blog.br/wp-content/themes/goronahresponsive/style.css" />
into
<link rel="stylesheet" type="text/css" href="http://goronah.blog.br/wp-content/themes/goronahresponsive/style.css" />
To make sure you cover all browsers with your font, you need to specifiy different font-types.
You need a:
WOFF or WOFF2 (Woff2 had better rendering)
SVG
EOT
TTF or OTF
To generate these fonts, you can use a webfont-generator like http://www.fontsquirrel.com/tools/webfont-generator.
If you have all the required font-types, you can include them like this (see comments in code for broswer support):
#font-face {
font-family: 'Bebas Neue';
src: url('BebasNeue.eot'); /* IE9 Compat Modes */
src: url('BebasNeue.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('BebasNeue.woff2') format('woff2'), /* Super Modern Browsers */
url('BebasNeue.woff') format('woff'), /* Pretty Modern Browsers */
url('BebasNeue.ttf') format('truetype'), /* Safari, Android, iOS */
url('BebasNeue.svg#svgFontName') format('svg'); /* Legacy iOS */
font-style:normal;
font-weight:normal;
}
I've been through a slew of questions here and I'm not seeing why what I'm doing isn't working — but it isn't. I want to use a couple nonstandard fonts in a website, embedded via css.
Here's what the CSS I got from FontSquirrel looks like:
#font-face {
font-family: 'CrimsonRoman';
src: url('Crimson-Roman-webfont.eot');
src: url('Crimson-Roman-webfont.eot?#iefix') format('embedded-opentype'),
url('Crimson-Roman-webfont.woff') format('woff'),
url('Crimson-Roman-webfont.ttf') format('truetype'),
url('Crimson-Roman-webfont.svg#CrimsonRoman') format('svg');
font-weight: normal;
font-style: normal;
Here's where it's referenced in my main css stylesheet:
p {
margin: 0 0 9px;
font-family: 'CrimsonRoman', Garamond, Times, Times New Roman, serif;
font-size: 13px;
line-height: 18px;
}
Everything's in the same directory right now, so I'm not even dealing with navigating through directories yet. The "p" declaration itself seems to be working, because if I change the first term to "Crimson," the name the font has on my computer, it loads it fine (or if I switch it to any other font I have installed locally). Whatever the problem is, I'm not seeing it.
Both sheets are linked successfully in my html doc, and the font's is linked before the main one.
I'm using Firefox to test.
Make sure your directory path is correct and pointing to the folder your font's are in on the server.
eg
#font-face {
font-family: 'CrimsonRoman';
src: url('/fonts/Crimson-Roman-webfont.eot');
src: url('/fonts/Crimson-Roman-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/Crimson-Roman-webfont.woff') format('woff'),
url('/fonts/Crimson-Roman-webfont.ttf') format('truetype'),
url('/fonts/Crimson-Roman-webfont.svg#CrimsonRoman') format('svg');
font-weight: normal;
font-style: normal;
}
It's turned out to be something in how Dreamweaver renders pages, or reads CSS, etc. I finally uploaded everything to the site so I could show a couple people what was going on and the fonts mysteriously loaded. So my lesson for tonight is to regard Dreamweaver's design view as a potentially inaccurate sketch, and to look at things exactly where they'll be before I spend hours trying to fix something that isn't broken. :\
Not the answer you looking for but I really want to advice to use Cufon for this. (Direct link to Cufon)
Although #font-face is more and more supported by browsers like IE it still doesn't work perfect on each computer.
Cufon is, as we speak, supported by:
Internet Explorer 6, 7 and 8
Internet Explorer 9 beta (as of 1.09i)
Mozilla Firefox 1.5+
Safari 3+
Opera 9.5+ (9.01+ as of 1.10)
Google Chrome 1.0+
iOS 2.0+
Opera Mini (to a certain degree)
...and gives next to that way more cool font-options.
As described above, I have issues with #font-face not displaying in IE9 although it displays fine in every other browser including IE8 and under. Additionally, when viewing locally on my computer, IE9 does display the font, just not when fully live.
The site is:
bigwavedesign.co.uk/gcc/gcc/
The code used is:
#font-face {
font-family: 'LeagueGothicRegular';
src: url('league_gothic_0-webfont.eot');
src: local('League Gothic Regular'), url('league_gothic_0-webfont.woff') format('woff'), url('league_gothic_0-webfont.ttf') format('truetype'), url('league_gothic_0-webfont.svg#webfonta36nFpyE') format('svg');font-weight: normal;font-style: normal;
}
Anyone any ideas why this might be occurring?
Cheers!
=============================================
EDIT
I have found the following site that displays the same font ok in IE9, anyine any ideas how he did that?
http://iamthomasbishop.com/
No answer, just confirmation: I have a similar kind of problem. Font works in all other IE versions except IE9, both using IETester and original browser. When changing Document Mode (F12 dev tools) font works. Not how I'd like it though.
Update: With some trickery I managed to get it working. Seems like IE9 is using the .woff version of the font (which I had excluded) over the .eot that I thought it would. I used the #font-face generator from fontsquirrel to get all the different font variations and included them in my project, using the smileyface-local. Did not have to alter my .htaccess file. Now works fine and looks the same in all IE versions:
#font-face {
font-family: "LucidaFax-bold";
src: url("_font/LucidaFax-bold.eot");
src: local("☺"),
url("_font/LucidaFax-bold.woff") format("woff"),
url("_font/LucidaFax-bold.ttf") format("truetype"),
url("_font/LucidaFax-bold.svg#LucidaFax-bold") format("svg");
}
h1 { font-family: "LucidaFax-bold", serif;}
(I even got mad fresh using Mark "Tarquin" Wilton-Jones' text-shadow hack, applying same look to IE versions as rest of the browser world. Old school? Looks great! Was it worth it? Well, learned a lot. ;)
I have just had the very same problem with Web Fonts hosted on an IIS7 site, as suggested by Grillz the issue was down to MIME Types.
I have elected to use "application/octet-stream" based upon the answers to the Mime type for WOFF question.
Open IIS and select the site that hosts the fonts (must be the same domain name for IE9 and Firefox)
Double click "Mime Types"
Click "Add..." in the top right hand corner.
In "File name extension:" enter ".woff"
In "MIME type:" enter "application/octet-stream"
Hope that saves someone 10 minutes in the future.
For us the trick was to just change the format on the .eot files we're serving up.
Works in IE6-9, Firefox 3-4, Chrome, Safari, Android, iPhone.
#font-face {
font-family: 'Museo';
src: url('/ui/museo300.eot?') format('eot'),
url('/ui/museo300.ttf') format('truetype')
}
Becomes:
#font-face {
font-family: 'Museo';
src: url('/ui/museo300.eot?') format('embedded-opentype'),
url('/ui/museo300.ttf') format('truetype')
}
My solution is to declare two different fonts:
#font-face {
font-family: "Dereza bold";
src: local("Dereza bold"), url("../../assets/otf/dereza_bold.otf") format("opentype");
}
#font-face {
font-family: "IE Dereza bold";
src: url("../../assets/eot/dereza_bold.eot");
}
And then:
.divclass {
font-family: "Dereza bold", "IE Dereza bold";
}
Abalore +1
My solution:
#font-face {
font-family: "OfficinaSansBookSCC";
src: url('font/OfficinaSansBookSCC.eot');
src: url('font/OfficinaSansBookSCC.eot') format('embedded-opentype'),
url( 'font/OfficinaSansBookSCC.ttf' ) format("truetype");
}
working in IE 7-9, chrome, opera, firefox.
first line needed for IE 9, second for IE 7-8.
Well since you've edited your post the below text won't be the answer. Are you pointing to the correct directory? Any chance of this being a mime type issue from the server?
====================================================
This might be it:
It’s important to note that your site must render in documentMode 9 in order to take advantage of the new features included with IE9 (that includes all new features in IE9, not only the ones related to web fonts). If you haven’t heard of documentMode before, Microsoft has put together a guide which explains what it is and how you can use it on your site.
from http://blog.typekit.com/2010/09/03/typekit-adds-experimental-support-for-ie9/
In IE9 - F12 look at the debug screen see if there are any CSS3117 errors.
See also: IE9 blocks download of cross-origin web font
Font Squirrel also provides a wonderful generator tool to help you create a font kit that will include the required formats, already-written CSS, and even a demo page to see how it's all used, along with help with problems you may encounter.
It was a breeze to incorporate its output into my site and it did fix the problem perfectly.
You should check out this blog post Paul Irish has a few things to say about the problems you are coming across and he comes up with what he calls a 'bulletproof' #font-face statement.
http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
http://www.fontsquirrel.com uses this for its sample CSS which worked OK for the project I was working on.
#font-face {
font-family: 'QuicksandBook';
src: url('/Quicksand_Book-webfont.eot');
src: url('/Quicksand_Book-webfont.eot?#iefix') format('embedded-opentype'),
url('/Quicksand_Book-webfont.woff') format('woff'),
url('/Quicksand_Book-webfont.ttf') format('truetype'),
url('/Quicksand_Book-webfont.svg#QuicksandBook') format('svg');
font-weight: normal;
font-style: normal;
}
I had this problem. Turns out I was missing a comma in the font-family declaration.
I wanted to add yet another thing that could possibly go wrong in this scenario. IE9 has a rule that discards all #font-face declarations that can not be cached after the first load. IE9 will actually use the font correctly on the first display, but on subsequent refreshes, the #font-face will be disabled. I discovered this after closing my browser by chance, and then reopening it to find that my font was working mysteriously, only to stop working one refresh later.
To fix this, you simple need to make sure that the request serving your font has a Cache-Control response header of something other than no-cache. I would recommend setting it to max-age=3600. This will ensure your font is cached for an hour. IE9 will then be able to display your font consistently.
I'm sure I'm not the only one that this has plagued, but I can't seem to find a solution.
#font-face works wonderfully in Firefox, Chrome, Safari with TTF fonts.
as so:
#font-face{
font-family: "Apple-Chancery" ;
src: url(images/Apple-Chancery.ttf ) format("truetype");
}
However, I understand that to be used in Microsoft, the font has to be in EOT format, so I converted it using http://ttf2eot.sebastiankippe.com/
And my code looks like this:
#font-face{
font-family: "Apple-Chancery" ;
src: local("Apple Chancery"), url(images/Apple-Chancery.eot), url(images/Apple-Chancery.ttf ) format("truetype"); /* non-IE */
}
but it's not working in Internet Explorer. I've tried putting two difference lines for src: I've tried using a different converter, different font, and all no go. I'm using IE8.
Also, to use multiple custom fonts, do I need multiple #font-face blocks or I use line them up font-family, src, font-family, src, etc.?
How about using font squirrel to generate all your files and your code?
This may help you,
#font-face {
font-family:"Apple-Chancery";
src: url('../font/Apple-Chancery.eot'); /* IE9 Compat Modes */
src: url('../font/Apple-Chancery.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../font/Apple-Chancery.woff') format('woff'), /* Modern Browsers */
url('../font/Apple-Chancery.ttf') format('truetype'), /* Safari, Android, iOS */
url('../font/Apple-Chancery.svg#svgFontName') format('svg'); /* Legacy iOS */
font-weight:bold;
font-style:normal;
}
This page may be useful to you: http://msdn.microsoft.com/en-us/library/ms530757%28VS.85%29.aspx
In particular, this line:
In Internet Explorer 8 and earlier versions, only one URL value is supported.
I think what you're trying to do may not work right until IE9 is available. It'd be worth getting a copy of the beta (assuming you're running something newer than Windows XP) to test and confirm this.
You need to put the IE (eot) one on a separate line, before the other ones.
The correct declaration is:
#font-face{
font-family: "Apple-Chancery" ;
src: url(images/Apple-Chancery.eot); /* IE */
src: local("Apple Chancery"), url(images/Apple-Chancery.ttf ) format("truetype"); /* non-IE */
}
But that's probably not enough to cover all the cases, you're missing svg font type for older chromes, etc.. I'd recommend using the font-face generator from fontsquirel.com, choose the Easy option then check out the generate css file and copy/paste the code and converted font files
I second the use of Font Squirrel.
You could also take a look at my post Adventures with #font-face which might help you.
Simpy upload your font on font2web it creates a css file and a demo HTML file.
Hope this help you