[smsfthinkerParticipant]

Hello there,

Can you please tell me how to add the free font ‘Playlist Script’ to my theme?

Kind regards
Helen

[FriechModerator]

Hi Helen,

Thanks for writing in! Please follow this post: https://community.theme.co/forums/topic/menu-font-changes/page/2/#post-881256 on how you can install a custom font on your site.

Let us know how it goes.

Cheers!

[smsfthinkerParticipant]

Hi there Friech,

I thought I followed the instructions but it doesn’t seem to be working.

1. Per the instructions, in my child theme I added the following 3 fonts to a ‘fonts’ folder

i. Playlist Caps.otf
ii. Playlist Ornament.otf
iii. Playlist Script.otf

2. Then in the child theme CSS file I added the following code. (I thought I’d try to get one font correct before adding the other two, hence only adding code for Playlist Script and not the Caps and Ornament versions too.

@font-face {
font-family: ‘playlist-script’;
src:url(‘./framework/fonts/playlist-script/Playlist Script.eot?#iefix’) format(’embedded-opentype’);

}

3. Then in Cornerstone when I add a text field and input the following into the Style box nothing happens.

font-family: ‘playlist-script’, sans-serif !important;

Can you please help?

Ultimately I would like all 3 versions of the font added to my theme.

Thanks in anticipation of your help.

Helen

[ChristopherModerator]

Hi there,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks.

[smsfthinkerParticipant]

Hey there,

I have provided my login details in the past. Do you have a record of them on file?

Thanks,
Helen

[ChristopherModerator]

Hi there,

I checked previous posts and couldn’t find FTP credentials. I need to check your host files.

Thanks.

[smsfthinkerParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Please check this thread https://community.theme.co/forums/topic/menu-font-changes/page/2/#post-881256 and convert your font to other formats. You should have following formats :

.eot,.woff and .ttf

Remove the space from font name and update your code to :

@font-face {
    font-family: 'playlist-script';
    src:url('http://blogwithconfidence.com/wp-content/themes/x-child/framework/fonts/playlist-script/Playlist-Script.eot?#iefix') format('embedded-opentype');
  src:url('http://blogwithconfidence.com/wp-content/themes/x-child/framework/fonts/playlist-script/Playlist-Script.woff') format('woff'),
        url('http://blogwithconfidence.com/wp-content/themes/x-child/framework/fonts/playlist-script/Playlist-Script.svg#playlist-script/Playlist-Script') format('svg'),
        url('http://blogwithconfidence.com/wp-content/themes/x-child/framework/fonts/playlist-script/Playlist-Script.eot'),
        url('http://blogwithconfidence.com/wp-content/themes/x-child/framework/fonts/playlist-script/Playlist-Script.ttf') format('truetype'),
        url('http://blogwithconfidence.com/wp-content/themes/x-child/framework/fonts/playlist-script/Playlist-Script.eot?#iefix') format('embedded-opentype');                      
}

body{
 font-family: 'playlist-script';
}

Hope it helps.

[smsfthinkerParticipant]

Hello there,

Sorry to report that it’s still not working.

Any ideas?

[JadeModerator]

Hi there,

They are not working because the font files in the font directory are incorrect.

They are all Playlist ***.otf instead of .eot,.woff and .ttf that Christopher suggested previously.

Please convert the font files here: https://www.fontsquirrel.com/tools/webfont-generator

Hope this helps.

[smsfthinkerParticipant]

Hi there again,

Hmmm – it’s still not working.

Any ideas?

Kind regards,
Helen

[Rue NelModerator]

Hello Helen,

Thanks for updating in! Your code doesn’t work because the font filenames is incorrect.

Please have your code updated and make use of this instead:

@font-face {
    font-family: 'playlist-script';
    src:url('http://blogwithconfidence.com/wp-content/themes/x-child/framework/fonts/playlist-script/playlist_script-webfont.eot?#iefix') format('embedded-opentype');
  src:url('http://blogwithconfidence.com/wp-content/themes/x-child/framework/fonts/playlist-script/playlist_script-webfont.woff') format('woff'),
    src:url('http://blogwithconfidence.com/wp-content/themes/x-child/framework/fonts/playlist-script/playlist_script-webfont.woff2') format('woff2'),
        url('http://blogwithconfidence.com/wp-content/themes/x-child/framework/fonts/playlist-script/playlist_script-webfont.svg#playlist-script/Playlist-Script') format('svg'),
        url('http://blogwithconfidence.com/wp-content/themes/x-child/framework/fonts/playlist-script/playlist_script-webfont.eot'),
        url('http://blogwithconfidence.com/wp-content/themes/x-child/framework/fonts/playlist-script/playlist_script-webfont.ttf') format('truetype'),
        url('http://blogwithconfidence.com/wp-content/themes/x-child/framework/fonts/playlist-script/playlist_script-webfont.eot?#iefix') format('embedded-opentype');                      
}

Please let us know if this works out for you.

[smsfthinkerParticipant]

Hi there,

Still not working.

Could it have anything to do with me adding the following to Style in Cornerstone (per instructions early in this post):

font-family: ‘playlist-script’, sans-serif !important;

Regards,
Helen

[Paul RModerator]

Hi Helen,

I was able to fix it.

There is a syntax error in your style.css preventing the codes below it from working.

I change this

@import 'https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i';

to this

@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i');

Please check – http://blogwithconfidence.com/font-test/

Thanks

[smsfthinkerParticipant]

Hi Paul,

Thank you so much for your help.

Champion!

Regards,
Helen

[Author]

Posts