What is the best way to include non-standard fonts in a website

Hello

Please take a look at this website:

Website link

There is a font used on this, and other pages, that is a non-standard font.  The name of the font is TallFilmsExpandedObliqueRegular,arial

The font family is kept in a folder on the server, named fonts.

Is is used as a headline in several places on the page, including "News/Events".

I am rebuilding this site and I need to use that same font.

Using best practices, how do I recreate the method of the web visitor being able to see that font, even though it is not loaded in their local computer.  I don't want to replace the font with graphics for example.

I see in the fonts folder variations of the font  Tall_Films_Fine_Oblique.ttf, Tall_Films_Fine_Oblique.svg,  Tall_Films_Fine_Oblique.eot

In that same folder is another font. I am not sure if it is used on the site.  It has similar extensions, ColabReg.svg  ColabReg.otf  ColabReg.eot,  with the addition of ColabReg.woff

Thanks!

Rowby
LVL 9
Rowby GorenAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dave BaldwinFixer of ProblemsCommented:
Those are 'web fonts'.  At the very least, you need to keep all the @font-face declarations that are in the CSS files.  Look at the code and CSS to see how to use them and do the same thing yourself.  And don't move the fonts directories unless you understand what is going on.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Rowby GorenAuthor Commented:
FYI
/*
 * This CSS file has been generated by fontsquirrel.com and is based on the work of Paul Irish. 
* 
*/


/*
 *
 * The fonts included are copyrighted by the vendor listed below.
 *
 * @vendor:     Ralph Oliver du Carrois
 * @vendorurl:  http://www.carrois.com
 * @licenseurl: http://www.fontsquirrel.com/license/Colaborate
 *
 *
 */

@font-face {
	font-family: 'Colaborate-ThinRegular';
	src: url('ColabThi.eot');
	src: local('Colaborate-Thin Regular'), local('Colaborate-Thin'), url('ColabThi.woff') format('woff'), url('ColabThi.otf') format('opentype'), url('ColabThi.svg#Colaborate-Thin') format('svg');
}

@font-face {
	font-family: 'ColaborateLightRegular';
	src: url('ColabLig.eot');
	src: local('ColaborateLight Regular'), local('Colaborate-Light'), url('ColabLig.woff') format('woff'), url('ColabLig.otf') format('opentype'), url('ColabLig.svg#Colaborate-Light') format('svg');
}

@font-face {
	font-family: 'Colaborate-RegularRegular';
	src: url('ColabReg.eot');
	src: local('Colaborate-Regular Regular'), local('Colaborate-Regular'), url('ColabReg.woff') format('woff'), url('ColabReg.otf') format('opentype'), url('ColabReg.svg#Colaborate-Regular') format('svg');
}

@font-face {
	font-family: 'Colaborate-MediumRegular';
	src: url('ColabMed.eot');
	src: local('Colaborate-Medium Regular'), local('Colaborate-Medium'), url('ColabMed.woff') format('woff'), url('ColabMed.otf') format('opentype'), url('ColabMed.svg#Colaborate-Medium') format('svg');
}

@font-face {
	font-family: 'Colaborate-BoldRegular';
	src: url('ColabBol.eot');
	src: local('Colaborate-Bold Regular'), local('Colaborate-Bold'), url('ColabBol.woff') format('woff'), url('ColabBol.otf') format('opentype'), url('ColabBol.svg#Colaborate-Bold') format('svg');
}

Open in new window

There is a style sheet in the fonts folder with the following css
0
Dave BaldwinFixer of ProblemsCommented:
I saw 3 stylesheets in the page you linked above with @font-face, not just one.  You need to collect all of them.  The one you posted above may just be for the demo and not the actual web page.
<link rel="stylesheet" href="/templates/Galaxy/style.css" type="text/css" />
<link rel="stylesheet" href="/templates/Galaxy/MENU.css" type="text/css" />
<link rel="stylesheet" href="/templates/Galaxy/content.css" type="text/css" />

Open in new window

0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Rowby GorenAuthor Commented:
Hi Dave,

I get the concept.  I also see this in the style.css sheet

@font-face {
	font-family: 'TallFilmsFineObliqueRegular';
	src: url('fonts/Tall_Films_Fine_Oblique.eot');
	src: local('Tall Films Fine Oblique Regular'), local('TallFilmsFineOblique'), url('fonts/Tall_Films_Fine_Oblique.ttf') format('truetype'), url('fonts/Tall_Films_Fine_Oblique.svg#TallFilmsFineOblique') format('svg');
}

@font-face {
	font-family: 'TallFilmsExpandedRegular';
	src: url('fonts/Tall_Films_Expanded.eot');
	src: local('Tall Films Expanded Regular'), local('TallFilmsExpanded'), url('fonts/Tall_Films_Expanded.ttf') format('truetype'), url('fonts/Tall_Films_Expanded.svg#TallFilmsExpanded') format('svg');
}

@font-face {
	font-family: 'TallFilmsExpandedObliqueRegular';
	src: url('fonts/Tall_Films_Expanded_Oblique.eot');
	src: local('TallFilmsExpandedObliqueRegular,arialRegular'), local('TallFilmsExpandedOblique'), url('fonts/Tall_Films_Expanded_Oblique.ttf') format('truetype'), url('fonts/Tall_Films_Expanded_Oblique.svg#TallFilmsExpandedOblique') format('svg');
}

Open in new window

0
Rowby GorenAuthor Commented:
Hi Dave,

I get the concept and will be "testing" this today or tomorrow on the dev site.  I am sure it will be fine.

Stay tuned!

Rowby
0
Dave BaldwinFixer of ProblemsCommented:
Make sure and make copies of those stylesheets before you change things.
0
Rowby GorenAuthor Commented:
Thanks Dave

I copied over the @ style into and the fonts are working.  I have a few more questions, and will be posting another question in a second.

Rowby
0
Dave BaldwinFixer of ProblemsCommented:
You're welcome, glad to help.
0
Rowby GorenAuthor Commented:
This is my new question -- also using web fonts -- etc...

New question if you have time...
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.