Jump to content
lmkestle

Adding a new font via @font-face

Recommended Posts

lmkestle    0
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:  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
Danny    1,327
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 ?


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
lmkestle    0
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

Share this post


Link to post
Share on other sites
Danny    1,327
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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
lmkestle    0
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.

Share this post


Link to post
Share on other sites
lmkestle    0
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';
}  

Share this post


Link to post
Share on other sites
Danny    1,327
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:

 

@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/

 


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • Barnaby Skinner
      By Barnaby Skinner+
      Hey all, hope I worded the topic correctly!
      I just need to know if either 1) I'm making a mistake or 2) this could be set as a new feature?
      Using the global settings typography parameters, I have a global paragraph font type (set using googlefonts) and have set the style to align:justify. When laying out <p> text inside a simple TEXT module, the <p> text adheres to both the font type and justification. Perfect.
      Now, when I set <p> text inside the PARAGRAPH TEXT field within an ELEMENT module, the <p> text adheres to the font type, but not the justification. It's rather annoying as I like to fully justify para text across the board and tend to use Element modules instead of text boxes for various reasons. It also seems silly that some PARAGRAPH TEXT fields adopt global settings, whilst other don't.
      Or I'm doing it wrong :S
      Any help or advice is much appreciated!
      Cheers
    • bnapoli
      By bnapoli+
      http://731.34b.myftpupload.com/ this website is using the NavPro navigation in Platform 5. It has a lot of menu items, so it breaks to two lines when the window is sized down. What is the media query to make the navigation either a) switch to "mobile mode" at a higher width, or b ) expand the nav into two lines. Thanks
    • nadielp
      By nadielp+
      Hi Everyone,
      I am trying to get a single navigation item to center. I am using a scroll menu in the navigation component of Impulse. I would like to have the item in the center of the page but it defaults right. I tried setting the item to center a few different ways and nothing is working. I added {
        display: inline-block;
        position: relative;
        text-align: center;
      }
      but that didn't work...any help would be appreciated. Site is at http://vetpaw.org/new
       
      Thanks!
      Daniel
    • John Olsson
      By John Olsson+
      Hello,
      I wondering (and custumers) when does Font Awesome 4.7 comes with an update of Pagelines?
    • yemoonyah
      By yemoonyah+
      I just installed and added the Flipper section to my home page and it makes my navigation/menu bar items disappear.
      They do show up again when scrolling down and everything seems normal on the other pages.
      http://yemoonyah.com
      Thanks.
       
×