Embed MyFonts

[jonas]

Hi Swift Team,

I was trying to embed a Font from MyFonts but cant’t get it working.

I have put the appropriate font folder in the root directory, added the code to the header and put the custom CSS in the theme options.
When looking at the pages code, the new font (texta thin) is shown but overwritten…

I know I have to add the important expression somewhere to get it to work, but don’t know where…

Can you please help?

Jonas

[Kyle – SUPPORT]

Hi

Check now?

– Kyle

[jonas]

Hi Kyle,

still not working. Now everything is mixed, fonts from font options (i put the comic sans font) and fallback font… but Texta thin is still not shown.

Jonas

[Kyle – SUPPORT]

Check now?

If that hasn’t worked please check the property that you’re supposed to use, are you sure it’s “Texta-Thin”

– Kyle

[jonas]

I think I forgot to edit the themes style.css?

According to MyFonts, I have to put code at the bottom of the style.css…
What editor can you recommend for that?

Jonas

[Kyle – SUPPORT]

No, adding it to Custom CSS is fine, you should never edit the theme’s style.css file

– Kyle

[jonas]

Ok, i added the additional code (@font-face etc…) to the custom CSS and now the font is working on the landing page for h1, but nowhere else 🙁

In my custom css section there is a snippet from MyFonts with an @important expression which seems not to be allowed there?
It also says above that snippet: “/* @import must be at top of file, otherwise CSS will not work */”.
Maybe I need to put it somewhere else?

Jonas

[Kyle – SUPPORT]

For start you’re not using a child theme, which you need to as you have made an edit to the header.php. This should be saved in the child theme.

You also need to make sure the link to the fonts is correct, because currently it’s not.

Please do not remove my custom css again

– Kyle

[jonas]

Hi Kyle,

ok, I put the child theme in place. Can you guide me through on how to save the edit of the header in the child theme?

Checked the link in the header to the fonts css (MyFontsWebfontsKit.css, which is in the root folder) seems to be correct and in the fonts css, the link is also to the correct folder.

I did not delete your custom css… maybe it happened by accident.

Jonas

[Kyle – SUPPORT]

For the link all you’ve put is:

<link rel="stylesheet" type="text/css" href="MyFontsWebfontsKit.css">

(see screenshot)

It needs to be the full path to the css file

– Kyle

Attachments:

You must be logged in to view attached files.

[jonas]

OK, got most of it working. Only the H1 on the landing page can’t somehow pull the font.
The body font on the product detail page and on the news overview page also seems not to be working? On the news detail page, the bottom items: comments, categories, likes also cannot pull the proper body font.

Jonas

[Kyle – SUPPORT]

You need to put the header.php file in your child theme

– Kyle

[jonas]

I put the header in the child theme folder, but no change…

Jonas

[jonas]

After installig the child theme, the page builder cannot be activated…

Jonas

[Kyle – SUPPORT]

Your header.php file is blank? (see screenshot)

– Kyle

Attachments:

You must be logged in to view attached files.