March 8, 201214 yr Good afternoon all, was just wondering/hoping one of you fine professionals out there could take a look at the below and see if you can spot any errors? Just that the font that I am using is not showing on other pc's. I have located the fonts in a folder called 'fonts' which is in my root folder. @font-face { font-family: 'NobileRegular'; src: url('fonts/nobile-webfont.eot'); src: url('fonts/nobile-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/nobile-webfont.woff') format('woff'), url('fonts/nobile-webfont.ttf') format('truetype'), url('fonts/nobile-webfont.svg#NobileRegular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'NobileBold'; src: url('../fonts/nobile_bold-webfont.eot'); src: url('../fonts/nobile_bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/nobile_bold-webfont.woff') format('woff'), url('../fonts/nobile_bold-webfont.ttf') format('truetype'), url('../fonts/nobile_bold-webfont.svg#NobileBold') format('svg'); font-weight: normal; font-style: normal; } Once again, any tips/advice is much appreciated. James
March 8, 201214 yr Author Sorry Renaissance, should have read . . . @font-face { font-family: 'NobileRegular'; src: url('../fonts/nobile-webfont.eot'); src: url('../fonts/nobile-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/nobile-webfont.woff') format('woff'), url('../fonts/nobile-webfont.ttf') format('truetype'), url('../fonts/nobile-webfont.svg#NobileRegular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'NobileBold'; src: url('../fonts/nobile_bold-webfont.eot'); src: url('../fonts/nobile_bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/nobile_bold-webfont.woff') format('woff'), url('../fonts/nobile_bold-webfont.ttf') format('truetype'), url('../fonts/nobile_bold-webfont.svg#NobileBold') format('svg'); font-weight: normal; font-style: normal; }
March 8, 201214 yr try something like this and stick all the font files themselves in the same folder as the css file you're using @font-face { font-family: 'MuseoSlab500'; src: url('Museo_Slab_500-webfont.eot'); src: url('Museo_Slab_500-webfont.eot?#iefix') format('embedded-opentype'), url('Museo_Slab_500-webfont.woff') format('woff'), url('Museo_Slab_500-webfont.ttf') format('truetype'), url('Museo_Slab_500-webfont.svg#MuseoSlab500') format('svg'); font-weight: normal; font-style: normal; } obviously substitute the font for yours Edited March 8, 201214 yr by oakleaves
March 8, 201214 yr Hi James, The problem you have is that if the users computer viewing your website does not have the font you have specified on your website then it will substitute that font for one that it does have. With the wide age range and operating systems involved this can cause problems with formatting and the reason why most websites use the same typeface for text. The most commonly used font family being Arial, Helvetica, sans-serif and these fonts will be used in this order of availability. Edited March 8, 201214 yr by richwdf
March 8, 201214 yr @font-face is pretty safe to use now because latest versions of all major browsers support it, see http://caniuse.com/fontface provided that you have the font in several formats, see http://www.miltonbayer.com/font-face/ and provided that you style a fallback, like:- h1.matchbook { font: 40px/44px 'MatchbookMatchbook', arial, sans-serif; letter-spacing: 2px; margin: 4px 0; font-weight: bold; }
March 8, 201214 yr Hi James, The problem you have is that if the users computer viewing your website does not have the font you have specified on your website then it will substitute that font for one that it does have. With the wide age range and operating systems involved this can cause problems with formatting and the reason why most websites use the same typeface for text. The most commonly used font family being Arial, Helvetica, sans-serif and these fonts will be used in this order of availability. Edited March 8, 201214 yr by brightonmike
March 8, 201214 yr Hi James, The problem you have is that if the users computer viewing your website does not have the font you have specified on your website then it will substitute that font for one that it does have. With the wide age range and operating systems involved this can cause problems with formatting and the reason why most websites use the same typeface for text. The most commonly used font family being Arial, Helvetica, sans-serif and these fonts will be used in this order of availability. Read the original question! We all have; it refers to this. After the night I have had, that just made me chuckle LMFAO!!
March 8, 201214 yr I know I'm being a bit cruel, but come on, there is no excuses for not knowing about font-face.
March 8, 201214 yr I know I'm being a bit cruel, but come on, there is no excuses for not knowing about font-face. Haha, very funny, cruel to be kind...So let's remind ourselves that we are supposed to be helping out others and learning - not taking the p***. So let's take a look at the header tag of a website: <!doctype html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--> <head> <meta charset="utf-8"> <title>...</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/css/style.css"> <link rel="stylesheet" href="/css/bootstrap.css"> <link rel="stylesheet" href="/css/bootstrap-responsive.css"> <link rel="stylesheet" href="/css/app.css"> <link href='http://fonts.googleapis.com/css?family=Open+Sans:600italic,400,600,700,800,300' rel='stylesheet' type='text/css'> <link rel="alternate" type="application/rss+xml" title="Feed" href=""> <script src="/js/libs/modernizr-2.5.3.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="/js/libs/jquery-1.7.1.min.js"><\/script>')</script> <script type='text/javascript' src='/js/plugins.js'></script> <script type='text/javascript' src='/js/script.js'></script> <link rel="canonical" href=""> </head> And similarly another website header: <!DOCTYPE html> <html lang="en"> <head> <!-- Meta Data & SEO --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Web Design - Website Designers | </title> <meta name="description" content="Professional web design company in , , specialising in the design and development of beautiful, w3c standards compliant web sites." /> <meta name="keywords" content="web design, freelance web designer, standards compliant, " /> <meta name="robots" content="noodp,noydir" /> <link rel="canonical" href="" /> <!-- /Meta Data & SEO --> <!-- Styles & Links --> <link href="/assets/css/cssloader.css" rel="stylesheet" type="text/css" /> <link rel="shortcut icon" href="" type="image/x-icon" /> <!-- /Styles & Links --> </head> And that's only the header tags of these two apparently professional 'Web Developers', just wait till you read the code! What more can I say Edited March 9, 201214 yr by Wickham Anonymized.
March 9, 201214 yr Haha, very funny, cruel to be kind...So let's remind ourselves that we are supposed to be helping out others and learning - not taking the p***. So let's take a look at the header tag of x website: (code snipped) And similarly y's website header: (code snipped) And that's only the header tags of these two apparently professional 'Web Developers', just wait till you read the code! What more can I say What more you can say is exactly what problem you find with the code you quoted. I can see a couple of minor opportunities for improvement, but no errors and definitely nothing that would call their professionalism into question. Back up your point, please. I appreciate that you may feel a bit put out by the response you've received in this thread, but it's clear from your first post that you either didn't read or didn't understand the question. Edited March 9, 201214 yr by Wickham
March 9, 201214 yr Haha, very funny, cruel to be kind...So let's remind ourselves that we are supposed to be helping out others and learning - not taking the p***. So let's take a look at the header tag of a website: <!doctype html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/css/style.css"> <link rel="stylesheet" href="/css/bootstrap.css"> <link rel="stylesheet" href="/css/bootstrap-responsive.css"> <link rel="stylesheet" href="/css/app.css"> <link href='http://fonts.googleapis.com/css?family=Open+Sans:600italic,400,600,700,800,300' rel='stylesheet' type='text/css'> <link rel="alternate" type="application/rss+xml" title="" href=""> <script src="/js/libs/modernizr-2.5.3.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="/js/libs/jquery-1.7.1.min.js"><\/script>')</script> <script type='text/javascript' src='/js/plugins.js'></script> <script type='text/javascript' src='/js/script.js'></script> <link rel="canonical" href=""> </head> And similarly another website header: <!DOCTYPE html> <html lang="en"> <head> <!-- Meta Data & SEO --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Web Design - Website Designers | </title> <meta name="description" content="Professional web design company in , , specialising in the design and development of beautiful, w3c standards compliant web sites." /> <meta name="keywords" content="web design, freelance web designer, standards compliant, " /> <meta name="robots" content="noodp,noydir" /> <link rel="canonical" href="" /> <!-- /Meta Data & SEO --> <!-- Styles & Links --> <link href="/assets/css/cssloader.css" rel="stylesheet" type="text/css" /> <link rel="shortcut icon" href="" type="image/x-icon" /> <!-- /Styles & Links --> </head> And that's only the header tags of these two apparently professional 'Web Developers', just wait till you read the code! What more can I say Erm, have I missed something here? Your point? Please elaborate... Edited March 9, 201214 yr by Wickham Anonymized.
March 9, 201214 yr @OP: Maybe post the site so we can Firebug it? if Oakleaves suggestion didn't fix it. @randomness: lmao, wtf's it got to do with mike and roots website... ~evu.
March 9, 201214 yr I appreciate that you may feel a bit put out by the response you've received in this thread, but it's clear from your first post that you either didn't read or didn't understand the question. ^ This. Sorry richwdf but if you put such a silly response you deserve some stick... that doesn't give you the right to start insulting other peoples work, that's out of line. In regards to the OP it definitely sounds like a paths problem, try stripping it back to one typeface then add the rest after it works.
March 9, 201214 yr ^ This. Sorry richwdf but if you put such a silly response you deserve some stick... that doesn't give you the right to start insulting other peoples work, that's out of line. In regards to the OP it definitely sounds like a paths problem, try stripping it back to one typeface then add the rest after it works. Hey I can take the critiscism, just nice to have a solid, backed-up, argument that's all EDIT: Yeah, sorry OP, kind of gone off track. In all honesty, I would try the absolute path to the fonts first (http://www.yoursite.com/your-folder/yourfont.ttf) and see if that works. If not then could be an issue with the font file itself. Did you download from font squirrel? Edited March 9, 201214 yr by roothost
March 9, 201214 yr Really don't appreciate being called out like that, I spend a lot of my time helping people on here. I feel I was being fairly light-hearted. FYI, my header is based on HTML5 Boilerplate, written by industry professionals such as Paul Irish. It uses some slightly experimental techniques, that's about it. Can't see anything wrong with Roots either.
March 9, 201214 yr Really don't appreciate being called out like that, I spend a lot of my time helping people on here. I feel I was being fairly light-hearted. FYI, my header is based on HTML5 Boilerplate, written by industry professionals such as Paul Irish. It uses some slightly experimental techniques, that's about it. Can't see anything wrong with Roots either. Only thing with mine is I haven't changed it since the site was done. All clients site I do now use a variation of the same boilerplate (allbeit modified a hell of a lot lol).
March 9, 201214 yr This has gone a bit off-topic. Lets sort out the OP's problem, then I'll be happy to step anyone through both your headers line by line.
March 9, 201214 yr Author Lol, just read all the responses, definitely brightens up a dull day coming on here. Like I have mentioned before in some of my other posts I am new to web design and that's the whole reason I joined a forum...to learn from professionals out there. Once again I really do appreciate all the advice and tips that I'm given and do take it all on board. I have stripped it right back and started from scratch so I'll let you know if I'm still having problems. Thanks for the www.miltonbayer.com/font-face link, that's been lots of help in itself. Thanks again James
March 9, 201214 yr As a side suggestion, you could download a font-face ZIP pack from font-squirrel, and check out their syntax and file arrangement. Then just imitate it, you might even find the font you want on there. I've had issues like this myself and downloading demo kits with it all set up for you helps. Can a mod please remove my code from this page? If I'm honest, I don't want anybody who might search my name finding this! Just not something I'd want a potential client/employer to see, and they do look you up... I know I'm being a pain but it has my full name in it which I don't disclose on here. Edited March 9, 201214 yr by brightonmike
March 9, 201214 yr I've anonymized it for the moment, because we're all interested in knowing what richwdf found in there. If he doesn't come back with a sensible answer after a while I'll be happy to delete the off-topic stuff from the thread.
Create an account or sign in to comment