Using Custom Fonts for Nav, Headers, Paragraphs etc. « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

Kriesi.at - Wordpress Themes and HTML Templates

Support Forum » Propulsion

not resolved

Using Custom Fonts for Nav, Headers, Paragraphs etc.

14 posts from 4 voices

Started 1 year ago by saranganv
Latest reply from Chris Beard
This topic is not resolved

Tags:

saranganv
Member

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

Posted 1 year ago #
saranganv
Member

Hi does any one have a response for this please?

Posted 1 year ago #
Chris Beard

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

Posted 1 year ago #
saranganv
Member

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;

}

Posted 1 year ago #
Dude
Dude

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

Posted 1 year ago #
saranganv
Member

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?

Posted 1 year ago #
saranganv
Member

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?

Posted 1 year ago #
Dude
Dude

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.

Posted 1 year ago #
saranganv
Member

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

Posted 1 year ago #
Dude
Dude

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

Posted 1 year ago #
saranganv
Member

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

Posted 1 year ago #
Mya

Hi saranganv,

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

text-transform: none;

Regards,
Mya

Posted 1 year ago #
saranganv
Member

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.

Posted 1 year ago #
Chris Beard
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
Posted 1 year ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.

© Copyright Kriesi.at – Wordpress Themes and HTML Templates

top