Having trouble with @font-face

Sara Chapman Johnston · February 2014

I am implementing a jQuery slider plugin on our site and the navigation uses an icon font that comes packaged with the slider. I have attempted to put the font files in a folder in the "Files" and then access them through there using @font-face in the css. The font is not being recognized. Are there any tips for hosting fonts on our server? I know that externally hosted fonts work, but can I host them locally?

Thanks!

Sara

Warren Sherliker · February 2014

You should be able to put the font files one by one into the document library amending the CSS to point to url(document.doc?id=...) and then everything should work.

You need to do this as sometimes your site will use https:// and I suspect any external font host would not work - it has to be a local reference without any http://.. in it.

Not sure about the "Files" you mention but document library will work - have done it before many times...

Sara Chapman Johnston · February 2014

Yes, thank you, I have them in the document library ( sorry about my terminology, when I navigate to the document library from the site explorer menu, it is referred to as "Files". Must be something to do with my URL. I'll keep trying.

Karen Badham · February 2014

Hey Sara and Warren,

Neither of yall are using the wrong terms. Warren is just talking about it in the old way, and Sara is talking about it in the new way. Documents library and Site Explorer, Files are the same thing.

Thanks!

Karen

Warren Sherliker · February 2014

Thanks Karen - explains a few comments I had recently. I'll have to update NC...

I suspect the URL, try in the CSS just the url(/document.doc?id=...) and not any of the rest of the web address for the site... or if the whole site is in a subdirectory it would be url(/subdir/document.doc?id=...)

Cheers

W.

Sara Chapman Johnston · February 2014

I notice that some of the documents in the document library are in a directory with a little "gear icon" - these have document ids. My fonts directory I created does not. It doesn't seem like this shoud matter, as I was able to reference my js files in a folder without the gear...but could someone explain the difference between the two types of directories present in this document library?

Sara Chapman Johnston · February 2014

Right now I'm using the following url:

"/files/fonts/font-file.ttf" etc...but this could be incorrect given that I'm referencing it from a stylesheet. Because I have no idea where BBs stylesheets are stored in the file structure, I'm not sure if that URL is accurate. Any hints on accessing those files from a BB stylesheet? Or should I just move the css for the slider into a file in the same directory? MY font files do not have document ids.

Warren Sherliker · February 2014

When you click on the preview icon next to the file that should give you the direct URL. As far as I know you then just take off any https://domain from that and it gives you the CSS url to use i.e. http://www.soasalumni.org/document.do... becomes

@font-face

{

font-family: myFirstFont;

src: url(/document.doc?id=309);

}

It should not matter weather the file is a document.doc one or any other URL, you just need the path relative to the root of your domain...

Sara Chapman Johnston · February 2014

Yes, thanks - that is what I did, but it is not happy for some reason...I'll keep plugging!

Chris McGrane · September 2015

Have you tried this method in your CSS?

@import url(//fonts.googleapis.com/css?family=Open+Sans);

Then you can just reference the font via...

body { font-family: 'Open Sans', sans-serif; }

Tested / Working.

CM

Having trouble with @font-face

Comments

Categories