Archived

This topic is now archived and is closed to further replies.

  • 0

Adding a new font via @font-face


Question

Posted · Report post

I need to change the font used overall in my site.  I've downloaded the font and changed the css.  I can see via chrome and firebug that the site is looking for the font but can't find it (see attached).  I've uploaded what I think are the right font files to the font folder where the other fonts are stored.  Is this the correct place to put them?  Where should they be so that the website can find them.  Thanks so much.

 

Lorraine

 

site url:  http://www.kestlemedia.com/kooki/books/

post-39630-0-64335900-1363082902_thumb.j

post-39630-0-29406600-1363082912_thumb.j

post-39630-0-04537200-1363083382_thumb.j

Share this post


Link to post
Share on other sites

6 answers to this question

Posted · Report post

Hi,

 

Can you provide the @font-face CSS you have used please and also a link to where you have uploaded the font files and what are the files you have uploaded ?

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Danny,

 

Thanks for trying to help me out.  This is the code I was told to put on the site from the install instructions.

 

@font-face {

    font-family: 'Euphemia-UCAS';

    src:url('Euphemia-UCAS.ttf.woff') format('woff'),

        url('Euphemia-UCAS.ttf.svg#Euphemia-UCAS') format('svg'),

        url('Euphemia-UCAS.ttf.eot'),

        url('Euphemia-UCAS.ttf.eot?#iefix') format('embedded-opentype'); 

    font-weight: normal;

    font-style: normal;

}

 

I added that to the custom css area.  The I uploaded the following files via FTP to main folder where my site is stored.  It's at the same level as the wp-content files.  That is where I had it when the home page nav bar font changed, but none of the other stuff changed (other page nav bars, or paragraph text).  I also uploaded the files to the font folder under the theme but that didn't work at all.

 

Here's what I uploaded:  Euphemia-UCAS.ttf.svg, Euphemia-UCAS.ttf.woff and Euphemia-Ucas.ttf.eot.

 

I got the font and instructions from freefont.com

 

I don't know what you mean by link to where I've uploaded them as they were uploaded via FTP.  Sorry.

 

Lorraine

Share this post


Link to post
Share on other sites

Posted · Report post

You need to change the

 

src:url

 

To where you have uploaded the fonts, what you currently have isn't doing anything. If you have used a service to add your custom fonts, I recommend you contact them for support.

Share this post


Link to post
Share on other sites

Posted · Report post

It's not an online source.  I downloaded the font to my computer and then uploaded to the website.  So there is no source url from where I got them.  Usually you just have to upload the font to the site on the backend at least that's what I've done in the past.

Share this post


Link to post
Share on other sites

Posted · Report post

Here are there instruction...I uploaded directly to the domain.
 
 
1. Upload the files from this zip to your domain.
2. Add this code to your website:
 
@font-face {
    font-family: 'Euphemia-UCAS';
    src:url('Euphemia-UCAS.ttf.woff') format('woff'),
        url('Euphemia-UCAS.ttf.svg#Euphemia-UCAS') format('svg'),
        url('Euphemia-UCAS.ttf.eot'),
        url('Euphemia-UCAS.ttf.eot?#iefix') format('embedded-opentype'); 
    font-weight: normal;
    font-style: normal;
}
3. Integrate the fonts into your CSS:
Add the font name to your CSS styles. For example:
 
h1 { 
   font-family: 'Euphemia-UCAS';
}  

Share this post


Link to post
Share on other sites

Posted · Report post

The src is where you uploaded the font files to, you need to add this URL to the src line in the code.

 

For example:

 

@font-face {
    font-family: 'Euphemia-UCAS';
    src:url('http://www.my-site.com/fonts/Euphemia-UCAS.ttf.woff') format('woff'),


I recommend you read through the W3schools article I gave you in Live chat, it has all the information you require in order to add custom fonts to your site.

 

http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

 

There is also more information and examples here - http://www.font-face.com/

 

Share this post


Link to post
Share on other sites