Chrome Cut Off Oswald-Light Font

Custom font being cut off on webpage

Your "Light" and "Bold" fonts are the problem. Take a look at http://jsfiddle.net/FHCXf/1/

Google Oswald font not displaying correctly when installed on system

It seems that the local font is giving you problems. You can use the Paul Irish smily hack to disable the local font. Disabling it by defining an illegal font name will force the browser to load the web resource.

src: local('☺︎'),

Downloading a Google font and setting up an offline site that uses it

Just go to Google Fonts - http://www.google.com/fonts/ , add the font you like to your collection, and press the download button. And then just use the @fontface to connect this font to your web page.
Btw, if you open the link you are using, you'll see an example of using @fontface

http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300

For an example

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}

Just change the url address to the local link on the font file, you've downloaded.

You can do it even easier.

Just download the file, you've linked:

http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300

Name it opensans.css or so.

Then just change the links in url() to your path to font files.

And then replace your example string with:

<link href='opensans.css' rel='stylesheet' type='text/css'>

linked files not working when uploaded to web server

Few things.. "../../IMAGES\favicon\favicon-32x32.png" is probably not going to fly on a web server. If xxx.com is your site, and your images are in (webroot)/images/, then just link to

/images/favicon/favicon-32x32.png

Same with css.. Just make sure the directories line up.
In your example you are attempting to link to the webroot directory with

<link rel="stylesheet" href="connaitre_la_cftc.css">

However, you said your css files are in the css folder? So perhaps try

<link rel="stylesheet" href="/css/connaitre_la_cftc.css">

instead?

Honestly this is hard to help without seeing the page live but if you are in doubt that something is loading just inspect source and try to go to the file directly (right click, press inspect source, and click on the href to see if it loads, and where it is trying to load from). You can then move things around on your server until it works.

---

Related Topics