Docs

[mauglz]

Hello Themeco,

I have been trying to upload a custom font (not Google Font, not Typekit) to my website, following advice and tutorials on this forum and elsewhere, yet I still can’t get it running. This is my situation:

– I picked a font, downloaded it, and then converted it to have all the necessary extensions using this webpage http://www.font2web.com/
– I copied the font folder with all the extensions to my child theme directory on my computer (my site is running on localhost at the moment, as I do not yet have a domain)

– Then I moved on to the CSS:
In the converted font package, there was a css file with these lines in it:
@font-face {
font-family: ‘Conv_OLIVES.MEDIUM’;
src: url(‘fonts/OLIVES.MEDIUM.eot’);
src: local(‘☺’), url(‘fonts/OLIVES.MEDIUM.woff’) format(‘woff’), url(‘fonts/OLIVES.MEDIUM.ttf’)
format(‘truetype’), url(‘fonts/OLIVES.MEDIUM.svg’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
– I copied them into the css file titled “style” in the child theme. However, the lines seem to be quite off – I am not sure what to replace that smiley face in “src: local” with, and whether the line “src: url” is correct at all, since I do not have a URL yet.
Could you please advise me on how to change the code so that I could use the font in my website?

If I succeed in importing the font into the theme, I would then like to use it for just one or two specific text elements. Is there a possibility to use a short-code in the text field to have just that one specific text written in the new font? Or can it be done using the “raw content” element? Or is it necessary to change the entire style of one of the headings (h1, h2…) in the Customizer –> CSS, and than use that heading for the text whose font I want to change?

Thank you very much!

[Darshana]

Hi there,

Please refer to the following step-by-step instructions (https://community.theme.co/forums/topic/adding-custom-font-to-theme-customizer/#post-184533).

Hope that helps.

[mauglz]

Thank you for the link! However, I am afraid it did not quite answer my question as of how to alter the CSS code to make the font work on localhost, when there is no URL to point it to.

The second part of my question remained unanswered as well: If I succeed in importing the font into the theme, I would then like to use it for just one or two specific text elements. Is there a possibility to use a short-code in the text field to have just that one specific text written in the new font? Or can it be done using the “raw content” element? Or is it necessary to change the entire style of one of the headings (h1, h2…) in the Customizer –> CSS, and than use that heading for the text whose font I want to change?

Kind regards,
Sam

[Friech]

Hi Sam,

Please follow this guide instead.

On that guide you can see that I’m working with FTP, but that should not be a problem as on live or local WordPress has the same directory path. Just make sure you have the slash [/], instead of the back slash [\]

To give you a head start:

– Gather all the font files in one folder
– Do not use the CSS that comes from the converted font package. Use the css code that I provided on that thread instead.

Regarding your second question.

You can add this to the STYLE field of a TExt element of a RAW content element.

font-family: 'font-family-name-here', sans-serif !important;

Or you can also declare a class on the Custom CSS on Customizer:

.myclass {
	font-family: 'font-family-name-here', sans-serif !important;
}

Then apply that CLASS (myclass) to your Text element of a RAW content element.

Or if you need to apply the font-family to a specific word on a paragraph.

Lorem ipsum dolor sit amet, <span class="myclass">consectetur</span> adipisicing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

Hope it helps, Cheers!

[Author]

Posts