[Victoria SParticipant]

Hi again!

Ok, so I have a client who has bought Letter Gothic from fonts.com and want to use that on their website.
I’ve searched and read on all places I can think of but now I’m only more confused than ever.
Is there a step-by-step on how to get this custom font implemented with the x theme?

My problem is that I cant seem to figure out which css selectors are used for the different parts of the site. For example: if i want to change the text in the navbar, is that h1 or h2 or something else? Or the text widget in the footer?
How do I know the names of the css selectors and what they control?

From what I understand I’m supposed to, on fonts.com, put in that h1 = letter gothic bold for example.
Once all that is done I have the option of a javascript code such as:
<script type=”text/javascript” src=”http://fast.fonts.net/jsapi/766d31fe-5fb9-4a49-b681-d44a99d40054.js”></script>

or

“Reference Your Web Fonts Directly (Optional)
If you would like to reference a Web font by its font name, you can use the following font-family names directly in your CSS or HTML code. This will not prevent you referencing Web fonts by the CSS selectors they are assigned to as both methods can be used within your code.
font-family:’LetterGothicW01-Regular’;
font-family:’LetterGothicW01-Oblique’;
font-family:’Letter Gothic W01 Bold’;
font-family:’LetterGothicW01-BoldObl’;”

What part/s do I use and where do I put them? And where do I decide the font size of the different css selectors?

I know this is all probably really basic and that I’m just very slow, but I would really really appreciate if there is a straight-forward (and hopefully very easy) solution to this headache of mine! 🙂

Thank you so much for an awesome support!

Victoria

[ChristianModerator]

Hey Victoria,

The fastest way to know any website’s styles is by using Inspect Element in Google Chrome. You just need to right click on a heading for example then choose Inspect Element a window will popup showing you the code for that element so you know what classes are assigned to it.

To add the font to your site, in your functions.php, please add the code

function my_font() {
    echo '<script type="text/javascript" src="http://fast.fonts.net/jsapi/766d31fe-5fb9-4a49-b681-d44a99d40054.js"></script>';
}

add_action('wp_head', 'my_font');

What that does is load your font using the script given to you by your font provider. You can then use the font in the CSS like:

h1 { font-family:'LetterGothicW01-Bold'; }

Hope that helps. 🙂

[Victoria SParticipant]

You guys are the BEST support I’ve ever come across!
Thank you!!

[Victoria SParticipant]

I have however not figured out how to use the same font in my revolution slider…. Do you know if that is even possible?

[ChristianModerator]

Hey Victoria,

Please try to edit the style of your text (see http://prntscr.com/3h0o1x).

Hope that helps. 🙂

[Pavle LParticipant]

Support, I downloaded font-awesome files, and put them in child theme folder.

I got console error in chrome

Resource interpreted as Script but transferred with MIME type text/css Resource interpreted as Script but transferred with MIME type text/css: “http://localhost/root/dynamint5/wp-content/themes/x-child-renew/css/font-awesome.min.css”.
Uncaught SyntaxError: Unexpected token ILLEGAL

[CousettMember]

Font Awesome fonts are already integrated in X. You can use them using the icon shortcode. This KB article goes through using icons – https://theme.co/x/member/kb/shortcode-walkthrough-icon-list/ You can also see the shortcodes in action on this page http://theme.co/x/demo/integrity/1/shortcodes/icons/

Hope this helps.

[Author]

Posts