4 {{ upvoteCount | shortNum }}
4 {{ upvoteCount | shortNum }}

Need Help on CSS External Font Setting

by shipwrecked
3 replies
  • WEB DESIGN
    • |
Hello,

I get ugly large Times New Roman fonts on my site, despite having set external font types with the TTF font files uploaded as well...

Details...

This is the inline setting in the HTML page:

<p id="pink-title">Title</p>

And this is the CSS setting:

p#pink-title{
text-indent: 0px;
line-height: 1.2;
font-size: 48px !important;
color: #EF1B9E !important;
font-weight: thinner;
font-style: normal;
font-family: "Steelfish Rg" !important;
src: url('steelfish.ttf') !important;
}

How can I set the titles to be fed by the uploaded steelfish.ttf font file?

Currently the settings only run on machines that have the Steelfish font uploaded.
#css #external #font #setting
  • Profile picture of the author ronc0011
    The code you are showing has the server looking for the font in the same folder as wherever that code is located
    Here's an example I got this font online while searching for webfonts and embedding fonts the font is called "DestroyRegular" and I uploaded the file with the font to a directory I named "FONTS."

    Here's the CSS that I placed at the top of teh "style.css file

    Code:
     
@font-face {
font-family: 'DestroyRegular';
src: url('http://thepreppersforum.com/wp-content/FONTS/DESTROY_-webfont.eot');
src: url('http://thepreppersforum.com/wp-content/FONTS/DESTROY_-webfont.eot?#iefix')format('embedded-opentype'),
url('http://thepreppersforum.com/wp-content/FONTS/DESTROY_-webfont.woff')format('woff'),
url('http://thepreppersforum.com/wp-content/FONTS/DESTROY_-webfont.ttf')format('truetype'),
url('http://thepreppersforum.com/wp-content/FONTS/DESTROY_-webfont.svg#DestroyRegular')format('svg');
font-weight: normal;
font-style: normal;
　
　
}

    And here is the CSS for an h1 element using the font

    Code:
     
h1.title
{
font: 60px/68px'DestroyRegular',Arial,sans-serif;
letter-spacing: 0;
}
    You might try Googling Embeded Webfonts

    Also servers can be real persnickety about the structure of your code you use to build this things like directory path etc. etc.
    {{ DiscussionBoard.errors[7161434].message }}
  • Profile picture of the author shipwrecked
    Sorry... that's not working for me...

    I tried this and uploaded 4 formats for the font:

    @font-face {
    font-family: 'Calibri';
    src: url('calibri.eot');
    src: url('calibri.eot?#iefix') format('embedded-opentype'),
    url('calibri.woff') format('woff'),
    url('calibri.ttf') format('truetype'),
    url('calibri.svg#Calibri') format('svg');
    font-weight: normal;
    font-style: normal;
    }

    I am able to use it successfully with several titles, but it doesn't work in IE!
    {{ DiscussionBoard.errors[7161572].message }}
  • Profile picture of the author shipwrecked
    ...meanwhile I managed to solve the problem

    Obviously these browser incompatibilities and the .ttf to .eot converters were the primary cause of the problem.

    But I rewrote the code an now it works!
    {{ DiscussionBoard.errors[7169956].message }}

Trending Topics