[Edward WilliamsParticipant]

I promise I’ve read every related post and I’m still widely confused and nervous that I’m going to completely screw this up. These fonts are coming from MyFonts and their instructions for installation are archaic at best. I’ve looked through YouTube, here and other forums for the utmost clarification and have yet to come across it. Before I go fooling around with it I just have to make sure this is right.

This gets installed under child theme > functions.php, right?

@font-face {
	font-family: 'Volte-Regular';
	src: url('webfonts/32D590_0_0.eot');
	src: url('webfonts/32D590_0_0.eot?#iefix') format('embedded-opentype'),
	url('webfonts/32D590_0_0.woff2') format('woff2'),
	url('webfonts/32D590_0_0.woff') format('woff'),
	url('webfonts/32D590_0_0.ttf') format('truetype'),
	url('webfonts/32D590_0_0.svg#wf') format('svg');
}

@font-face {
	font-family: 'Volte-Light';
	src: url('webfonts/32D590_1_0.eot');
	src: url('webfonts/32D590_1_0.eot?#iefix') format('embedded-opentype'),
	url('webfonts/32D590_1_0.woff2') format('woff2'),
	url('webfonts/32D590_1_0.woff') format('woff'),
	url('webfonts/32D590_1_0.ttf') format('truetype'),
	url('webfonts/32D590_1_0.svg#wf') format('svg');
}

@font-face {
	font-family: 'Volte-Bold';
	src: url('webfonts/32D590_2_0.eot');
	src: url('webfonts/32D590_2_0.eot?#iefix') format('embedded-opentype'),
	url('webfonts/32D590_2_0.woff2') format('woff2'),
	url('webfonts/32D590_2_0.woff') format('woff'),
	url('webfonts/32D590_2_0.ttf') format('truetype'),
	url('webfonts/32D590_2_0.svg#wf') format('svg');
}

@font-face {
	font-family: 'Volte-LightItalic';
	src: url('webfonts/32D590_3_0.eot');
	src: url('webfonts/32D590_3_0.eot?#iefix') format('embedded-opentype'),
	url('webfonts/32D590_3_0.woff2') format('woff2'),
	url('webfonts/32D590_3_0.woff') format('woff'),
	url('webfonts/32D590_3_0.ttf') format('truetype'),
	url('webfonts/32D590_3_0.svg#wf') format('svg');
}

@font-face {
	font-family: 'Volte-BoldItalic';
	src: url('webfonts/32D590_4_0.eot');
	src: url('webfonts/32D590_4_0.eot?#iefix') format('embedded-opentype'),
	url('webfonts/32D590_4_0.woff2') format('woff2'),
	url('webfonts/32D590_4_0.woff') format('woff'),
	url('webfonts/32D590_4_0.ttf') format('truetype'),
	url('webfonts/32D590_4_0.svg#wf') format('svg');
}

@font-face {
	font-family: 'Volte-RegularItalic';
	src: url('webfonts/32D590_5_0.eot');
	src: url('webfonts/32D590_5_0.eot?#iefix') format('embedded-opentype'),
	url('webfonts/32D590_5_0.woff2') format('woff2'),
	url('webfonts/32D590_5_0.woff') format('woff'),
	url('webfonts/32D590_5_0.ttf') format('truetype'),
	url('webfonts/32D590_5_0.svg#wf') format('svg');
}

p, h1, h2, h3, h4, h5, h6, #site-logo, .post-title, .widgettitle {
    font-family: "Volte-Regular";
}

I have no idea where this goes:

/**
 * @license
 * MyFonts Webfont Build ID 3331472, 2017-01-13T23:34:48-0500
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: Volte-Regular by Indian Type Foundry
 * URL: http://www.myfonts.com/fonts/indian-type-foundry/volte/regular/
 * Copyright: Copyright 2015 Indian Type Foundry. All rights reserved.
 * 
 * Webfont: Volte-Light by Indian Type Foundry
 * URL: http://www.myfonts.com/fonts/indian-type-foundry/volte/light/
 * Copyright: Copyright 2015 Indian Type Foundry. All rights reserved.
 * 
 * Webfont: Volte-Bold by Indian Type Foundry
 * URL: http://www.myfonts.com/fonts/indian-type-foundry/volte/bold/
 * Copyright: Copyright 2015 Indian Type Foundry. All rights reserved.
 * 
 * Webfont: Volte-LightItalic by Indian Type Foundry
 * URL: http://www.myfonts.com/fonts/indian-type-foundry/volte/light-italic/
 * Copyright: Copyright © 2015 by Indian Type Foundry. All rights reserved.
 * 
 * Webfont: Volte-BoldItalic by Indian Type Foundry
 * URL: http://www.myfonts.com/fonts/indian-type-foundry/volte/bold-italic/
 * Copyright: Copyright © 2015 by Indian Type Foundry. All rights reserved.
 * 
 * Webfont: Volte-RegularItalic by Indian Type Foundry
 * URL: http://www.myfonts.com/fonts/indian-type-foundry/volte/italic/
 * Copyright: Copyright © 2015 by Indian Type Foundry. All rights reserved.
 * 
 * 
 * License: http://www.myfonts.com/viewlicense?type=web&buildid=3331472
 * Licensed pageviews: 10,000
 * 
 * © 2017 MyFonts Inc
*/

This seems important but again: No idea where it goes:

/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/32d590");

Do I also have to upload the font zip folder and put it in wp-content? Or does the CSS pull directly from MyFonts? I’m so confused.

[Edward WilliamsParticipant]

This reply has been marked as private.

[FriechModerator]

Hi There,

Thanks for writing in! All you need is the font files, please gather this files and place it on one folder.

Then follow the guide provided here thoroughly.

This gets installed under child theme > functions.php, right?

No, it should go on child theme’s style.css file.

If you need further assistance on this, Please provide us FTP credentials in private reply.

Hope it helps, Cheers!

[Edward WilliamsParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

I fixed the font path in your code and added it in child theme’s style.css file, please check the page and let us know if the issue is fixed.

Please remove following code from customizer :

html, body, input, button, select, textarea {
  font-family: "Volte", sans-serif;
}
h1, h2, h3, h4, h5, h6, p, a, span {
  font-family: "Volte", sans-serif;
}

Thanks.

[Edward WilliamsParticipant]

Hey there!

I cleared things out in the customizer. The font now seems to be Lato instead of Volte however.

[Paul RModerator]

Hi,

The filenames were wrong, I went ahead and fix it.

I change 32D590_0_0.eot to 32D5E4_0_0.eot same with all other filetypes.

Please check on your end.

Thanks

[Edward WilliamsParticipant]

Y’all are amazing.

Thank you so much!

[DarshanaModerator]

Glad we were able to help 🙂

[Edward WilliamsParticipant]

So just to clarify, if I want to install this font on another domain, I can simply copy and paste the code in the style.css sheet, right? I’d have to create a new font folder under that domain, then change the URLs of the fonts, correct?

[LelyModerator]

Hello There,

Yes, you’re correct. But then we still need to update the font path on your style.css:
For example, this is your current path:
https://learn.arclightcomics.com/wp-content/themes/x-child/framework/fonts/Volte/32D5E4_0_0.woff2
Update the URL with your new domain and make sure to add it on the same folder path.

Hope this helps.

[Edward WilliamsParticipant]

This reply has been marked as private.

[JadeModerator]

HI there,

Would you mind providing the login details for the other domain you installed the font in so that we could check it?

Thank you.

[Edward WilliamsParticipant]

This reply has been marked as private.

[JadeModerator]

Hi Edward,

I have checked and the font seems to be working correctly.

Is there any text on the site that you are trying to change specifically where the font doesn’t take effect?

[Author]

Posts