Tagged: , ,

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #9670

    Hi, I want to usee custom fonts (from .otf or .ttf formats) within my site http://cheeses.testingse.com

    Can someone tell me how this can be done.

    Thanks

    #65524

    Hi does any one have a response for this please?

    #65525

    Hey,

    to use custom fonts there are some great guides. For example: This one or just a fast snippet:css-tricks.com/font-face.

    To use these you can add the given CSS to the top of your custom.css and add the styling to whichever element you’d like as explained in this support topics.

    If you’d like to use Google Fonts try this support topic..

    I hope this helps.

    Cheers,

    Chris

    #65526

    Thanks,

    I tried doing what the tutorial said. I put the following into the custom.css as well as the quick css option file and it didn’t change the font.

    Is there something that i’m missing?

    @font-face {

    font-family: ‘LondonTubeNormal’;

    src: url(‘london-tube-webfont.eot’);

    src: url(‘london-tube-webfont.eot?#iefix’) format(‘embedded-opentype’),

    url(‘london-tube-webfont.woff’) format(‘woff’),

    url(‘london-tube-webfont.ttf’) format(‘truetype’),

    url(‘london-tube-webfont.svg#LondonTubeNormal’) format(‘svg’);

    font-weight: normal;

    font-style: normal;

    }

    #65527

    Hi!

    Make sure that the font files are located in the same folder like custom.css. Otherwise you need to adjust the source paths.

    Best regards,

    Peter

    #65528

    Hi Dude,

    I created the font face files and put them in a folder called type within the css folder (the one that contains the custom css files)

    Do i need to set each of the h1,h2 etc. tags to the new font in the quick css or the custom css file?

    #65529

    I inserted the following into my custom css below the code i pasted earlier (@font face etc.) and it still doesn’t seem to have had an effect on the font family used in the site.

    h1{font-family: ‘LondonTubeNormal’ !important;}

    Can someone help with this please?

    #65530

    Hi,

    The fonts can’t be found on your server – please check the file names. I tried to download http://cheeses.testingse.com/wp-content/themes/propulsion/css/london-tube-webfont.ttf but I get a 404 error. You need to change the file names of the files or change them in custom.css.

    #65531

    Thanks,

    Is there a way i can use this font on certain elements as well as changing the colour that it appears in. Example all h1 heading to be the new font and #XXXXXX colour?

    thanks,

    Sarangan

    #65532

    Hi!

    Yes – sure. You can use the font-family property: http://www.w3schools.com/cssref/pr_font_font-family.asp to change the font family of certain elements.

    Regards,

    Peter

    #65533

    Hi,

    I’ve been trying to change the h5 style so that it doesn’t use small-caps and has a bigger font size. I used

    h5{font-family: ‘LondonTubeNormal’ !important;

    color: #3DA5DC;

    font-variant: normal;

    font-size: length 30px;}

    in the custom css and it hasn’t removed the small caps or increased the size.

    http://cheeses.testingse.com

    on the home page “

    WELCOME TO CHEESES ONLINE, CHEESE LOVERS.” text

    #65534

    Hi saranganv,

    Remove “length” after font-size: then add underneath font-size: 30px; this code:

    text-transform: none;

    Regards,

    Mya

    #65535

    h5{font-family: ‘LondonTubeNormal’ !important;

    color: #3DA5DC;

    font-variant: normal;

    font-size: 30px;

    text-transform: none;}

    The “Welcome to Cheeses…” text is still the same size, and in Small Caps#

    Not sure what went wrong there.

    #65536

    saranganv,

    have you tried using this code:

    .entry-content h5 {
    font-size: 30px;
    text-transform: none;
    }

    You can put it in the Quick CSS or in the custom.css file.

    Make sure to refresh your cache after adding the code in.

    Cheers,

    Chris

Viewing 14 posts - 1 through 14 (of 14 total)

The topic ‘Using Custom Fonts for Nav, Headers, Paragraphs etc.’ is closed to new replies.