Reference a Font File

It is possible to reference a font file in CSS. Historically fonts were limited to those supported by the browser and operating system. This meant that the fonts used were chosen to ensure greatest compatibility, typically Arial, Verdana and Helvetica were used the most.

Font files can now be referenced using CSS3.

In the CSS stylesheet file for the website add a reference to the font name and where to find the font files. Note that this reference can appear anywhere within the file. However, I prefer to standardise on putting them at the top, together with imports.

@font-face
{
font-family: MyFont;
src: url('../fonts/MyFont.ttf'),
url('../fonts/MyFont.eot'); /* IE9 */
}

The font can now be referenced with the CSS as an additional option:

h1,h2,h3{
color:#d00;
font-weight:bold;
font-family:"MyFont",Verdana,Arial
}

Typically font files which are downloaded and used for reference will be for the default font. If a bold version is required that will need to be included as a separate reference. Advising the browser that it is the same font but a different weight:

@font-face
{
font-family: MyFont;
src: url('../fonts/MyFont_Bold.ttf'),
url('../fonts/MyFont_Bold.eot'); /* IE9 */
font-weight:bold;
}

Experimenting with a website, recently, for a customer. The reference to a typekit font was made. However, under Firefox/Iceweasel the font was not rendering the same as per Chrome, Opera etc. Firefox was ignoring the referenced file and using the next item in the list.

Firefox ignores font files which are not of the same domain. My understanding is that this is to ensure fonts which have been purchased are given their due credit. Also to prevent excessive burden on domains where a font file is referenced.

If the file has been downloaded to a server, but is assigned against another domain, for example example.com to host the file and example.co.uk to also reference it, editing the htaccess file on a Linux server can accommodate Firefox.

The .htaccess file needed access built in for the file types css and otf also, see below:

# deny *everything*
<FilesMatch ".*">
Order Allow,Deny
Deny from all
</FilesMatch># but now allow just *certain* necessary files:
<FilesMatch ".*\.(otf|css)$">
Order Allow,Deny
Allow from all
</FilesMatch>IndexIgnore */*OPTIONS -Indexes -ExecCGI# Define mime-types for fonts which aren't part of apache's config
AddType font/x-woff .woff
AddType font/opentype .otf
AddType font/ttf .ttf# add gzip to all non-png resources
AddOutputFilter DEFLATE html xhtml css xml svg js eot otf ttf# enable cross-site use of font-files
<FilesMatch "\.(css|svg|xml|ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

The reference in the CSS file is as below:

@font-face
{
font-family: CODE_Bold;
src: url("CODE Bold.otf") format("opentype");
src: local(CODE_Bight), url('CODE Bold.otf') format('opentype');
}@font-face{
font-family: CODE_Light;
src: url("CODE Light.otf") format("opentype");
src: local(CODE_Light), url('CODE Light.otf') format('opentype');
}

Using font files adds a new consideration, namely the type of file. As you might expect not all browsers and operating systems support all of the available font file types.