Custom Fonts

[Anonymous]

Hi,

First of all I wanted to thank you for your support, otherwise it would be impossible for everyone to move forward, well done!

I wanted to ask you if there is a way to upload my own fonts for the website and if you could explain to me how to install and use them

Thanks in advance 😉

Add New Note to this Reply

[Anonymous]

Hi, I would really appreciate if you could help me out with this subject

regards

 

Billy

Add New Note to this Reply

[tinhbeng]

Hi,

If you don't use Google font then you will have to load a new font into Kidzone theme.

You can try to do the following guide:

Step 1: Create "fonts" folder in assets folder ->  you copy your font into this folder  ->  you create "css" in fonts folder-> create fonts.css file in css folder

Step 2: Import new font: you  call the font path into fonts.css.

(you can view more: http://wphelpclub.com/blog/wordpress-add-font/)

eg:

@font-face {

font-family: 'FontAwesome';

src: url('../fonts/fontawesome-webfont.eot?v=4.4.0');

src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');

font-weight: normal;

font-style: normal;

}

Then you find to yolo-enqueue-css.php (/yolo-kidzone/includes/functions/yolo-enqueue-css.) and add the following line:

wp_enqueue_style('yolo-new-font', get_template_directory_uri() . '/assets/fonts/css/fonts.css', array(), '');

- Step 3: You find to theme_setup.php(/yolo-kidzone/includes/theme_setup.php) and find to the following line and edit font family:

$default_values = array(

'primafy_color'         => '#000',

'secondary_color'       => '#000',

'font_family'           => 'Roboto',

'text_color'            => '#000',

'font_size'             => '14',

'font_weight'           => '400',

'headings_font_family'  => 'Lobster',

'headings_color'        => '#000',

'logo_color'            => '#000',

'logo_font_family'      => 'Roboto',

);

yolo_set_theme_default( $default_values );

Notice: you will not use google font in Customizer, if you use it, it will override your font

Hope it help!

Best regard,

Add New Note to this Reply

[Anonymous]

Hi!,

I managed to change the fonts without modifying the core of the site.

I used the editor and modified the css. Nevertheless, I tried to do the same thing in order to change the font of the navigation bar like this:

 

#menu-main ul li, navbar-nav{

font-family: mandingoregular !important;

border: 2px solid red;

}

.yolo-main-menu{

font-family: mandingoregular !important;

margin-left: 95px !important;

margin-right: 0 !important;

width: 100% !important;

}

 

unfortunately It is not working.

I tried to follow your instructions but I don't want to mess around with those files, is there any other way?

I really hope you can help me out.

 

Regards,

 

Billy

Add New Note to this Reply

[tinhbeng]

Hi,

To use font "mandingoregular ", please check it has been loaded on your site

(CTRL + U  -> view source and check it)

eg for font "OpenSan":

<link rel='stylesheet' id='open-sans-css' property='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans%3A300italic%2C400italic%2C600italic%2C300%2C400%2C600&subset=latin%2Clatin-ext&ver=4.5' type='text/css' media='all' />

 

Add New Note to this Reply

[Anonymous]

Hi,

I am already using the font in the body of the site with no problem, it is only the navigation that doesn't seem to get the css.

Any ideas?

 

 

Add New Note to this Reply

[tinhbeng]

Hi,

Please send me link your site. I will help you check.

Add New Note to this Reply

[Anonymous]

This reply has been marked as private.

Add New Note to this Reply

[tinhbeng]

Hi,

If there are any problems your product, please contact us.

We'll help you fix it as quickly as possible.

 

Best regard

Add New Note to this Reply

[Anonymous]

This reply has been marked as private.

Add New Note to this Reply

[tinhbeng]

Hi,

I  added "fonts" folder into "yolo-kidzone-child" and call font in "style.css" file(child theme).

Please active child theme.

Hope it help.

Add New Note to this Reply

[Anonymous]

Hi TinhBeng,

It did work!! thanks, even with the Slider Revolution
Unfortunately I have a new issue, mobile devices (IOS) is not catching the (font-family: Mandingo) therefore everything looks totally different! the other font (font-family: CenturyGothic) is working

I honestly hope you can help me because otherwise it would be catastrophic for the design.

I will send you login details in a separate message

 

 

Add New Note to this Reply

[Anonymous]

This reply has been marked as private.

Add New Note to this Reply

[Anonymous]

Hi TinhBeng,

I do apologise, I wrote everything back from zero and it's working now!!

Topic close

Add New Note to this Reply

[Author]

Posts