Forums

@ Font-Face

Permalink
Hi All

I am just working on a theme and I am having a hard time to get @font-face working.

I was wondering what other people do as I see there are several methods and I am not sure if I am mixing them up or not.

I currently have my font files in /themes/mytheme/fonts and they are the following:
fonts.css which contains the following code 
@font-face {
    font-family: 'helvetica_neueregular';
    src: url('helveticaneue-condensed-webfont.eot');
    src: url('helveticaneue-condensed-webfont.eot?#iefix') format('embedded-opentype'),
         url('helveticaneue-condensed-webfont.woff') format('woff'),
         url('helveticaneue-condensed-webfont.ttf') format('truetype'),
         url('helveticaneue-condensed-webfont.svg#helvetica_neueregular') format('svg');
    font-weight: normal;
    font-style: normal;
}


I also have the .eot file, .svg file, .ttf file and the .woff file in the same folder.

In my themes header.php file I call the normal styles.css using 
<link rel="stylesheet" charset="utf-8" media="screen" href="<?php echo $this->getStyleSheet('styles.css') ?>" />

and I have used the same code to call the font-face CSS file but with the change of directory to /fonts/fonts.css

In my styles CSS I am adding to my H1 for example
H1 {font-family: 'helveticaneue', arial, sans-serif; text-transform: uppercase; font-size: 14px; color: #7b072b; font-weight: bold; margin: 0; padding: 0}


I see that some people add there @font-face code to typography.css or even into the styles.css and various different versions of code for the header.php

Can anyone enlighten me as to where I am going wrong or what is the best practise for applying @font-face?

Thanks

Alex
madeforspace
 
mesuva replied on at Permalink Best Answer Reply
mesuva
Hi Alex,

my preference is to put the @font-face declaration into typography.css, for a couple of reasons:
- It means that your font will also be available in any content editor (tinymce), giving more accuracy to what headings and content actually look like
- You don't have to make another http request
- It's one less file to worry about

I put my fonts in /themes/mytheme/fonts, and then in typography.css put in the font declaration/linking. The only change I have to make from the code places like FontSquirrel provides is that I have to put in the /fonts path, so I'll have something like:
@font-face {
    font-family: 'OpenSansLight';
    src: url('fonts/OpenSans-Light-webfont.eot');
    src: url('fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Light-webfont.woff') format('woff'),
         url('fonts/OpenSans-Light-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
    font-weight: normal;
    font-style: normal;
}


Another thing I do is that in my header.php file for my theme, I link in the css files a little more directly, so I go:
<link rel="stylesheet" href="<?php echo $this->getThemePath() . '/main.css';?>">
     <link rel="stylesheet" href="<?php echo $this->getThemePath() . '/typography.css';?>">


The $this->getStyleSheet('styles.css') way of linking the stylesheet in makes concrete5 analyse and process the file to be able to make the 'Customize' feature for a theme in the dashboard work. This adds a little extra processing overhead, and for 95% of the sites I build I don't need them to be editable, so I disable the feature and link more directly.

But I think in your case it's not working because you aren't using the name of the font correctly. In your H1, you've used helveticaneue, but in your @font-face declaration you've got helvetica_neueregular. Fonts linked in like this don't automatically know what to use for regular, light, bold, etc..

In other words, the value for font-family needs to match between where you've declared the @font-face and where you use it. Change the H1 to helvetica_neueregular.

(I'll also point out that you may have mixed a few things up with the font, the declaration is for regular, but the font urls have the word condensed in them.)

Cheers
-Ryan
jordanlev replied on at Permalink Reply
jordanlev
Looks like @mesuva's advice solved your problem.

I want to point out that in my experience, using $this->getStylesheet() also chokes on apostrophes / quotes -- which might be another explanation for why it wasn't working before. Definitely use the $this->getThemePath() method that @mesuva points out above.