6 replies to this topic

[lmkestle]

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:  

Please Login or Register to see this Hidden Content

Attached Files

•  firebug.jpg   160.6K  5 downloads
•  chrome.jpg   80.08K  6 downloads
•  chrome2.jpg   89.72K  5 downloads

[Danny]

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 ?

[lmkestle]

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

[Danny]

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.

[lmkestle]

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.

[lmkestle]

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';

}  

[Danny]

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:

 

Please Login or Register to see this Hidden Content

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.

 

Please Login or Register to see this Hidden Content

 

There is also more information and examples here - 

Please Login or Register to see this Hidden Content