Jump to content


Photo
- - - - -

Adding a new font via @font-face

drop down menu color navigation font @font-face change fonts

  • Please log in to reply
6 replies to this topic

#1 lmkestle

lmkestle

    Member

  • Members

  • 14 posts
  • Framework Version:Professional Edition
  • Country: Country Flag

Posted 12 March 2013 - 10:16 AM

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



#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 16909 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 12 March 2013 - 10:50 AM

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 ?



#3 lmkestle

lmkestle

    Member

  • Members

  • 14 posts
  • Framework Version:Professional Edition
  • Country: Country Flag

Posted 12 March 2013 - 12:17 PM

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



#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 16909 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 12 March 2013 - 12:21 PM

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.



#5 lmkestle

lmkestle

    Member

  • Members

  • 14 posts
  • Framework Version:Professional Edition
  • Country: Country Flag

Posted 12 March 2013 - 12:27 PM

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.



#6 lmkestle

lmkestle

    Member

  • Members

  • 14 posts
  • Framework Version:Professional Edition
  • Country: Country Flag

Posted 12 March 2013 - 12:30 PM

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


#7 Danny

Danny

    Is Awesome!

  • Moderators
  • 16909 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 12 March 2013 - 12:37 PM

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

 







Also tagged with one or more of these keywords: drop down menu, color, navigation, font, @font-face, change fonts