Having trouble importing fonts into my project

[Rich Crowe]

Hi,

I'm having trouble importing fonts into my local project. Here's a snippet of what I added to the beginning of the CSS file:

------------------------------------------

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

@Font-face {
font-family: 'Acre-Medium';
src: url('//cdn2.hubspot.net/hubfs/7364297/Fonts/3AF24C_0_0.eot');
src: url('//cdn2.hubspot.net/hubfs/7364297/Fonts/3AF24C_0_0.eot?#iefix') format('embedded-opentype'), url('//cdn2.hubspot.net/hubfs/7364297/Fonts/3AF24C_0_0.woff2') format('woff2'), url('//cdn2.hubspot.net/hubfs/7364297/Fonts/3AF24C_0_0.woff') format('woff'), url('//cdn2.hubspot.net/hubfs/7364297/Fonts/3AF24C_0_0.ttf') format('truetype');
}

------------------------------------------

When I use this method, the fonts are not available in my local project. When I generate the project, RoboHelp generates warnings stating the external fonts are skipped.

I also tried copying the fonts to my fonts folder on my laptop. After doing that, they are available in my project. When I generate the output, I see the fonts are properly applied because they reside on my laptop. But when I upload the output to our site, they are not available.

I'm trying to figure out how to have them display on our site. I'm using RoboHelp 2020.

Thanks in advance.

[Jeff_Coatsworth]

Have you had a look at Peter's site - https://www.grainge.org/pages/authoring/fonts/fonts.htm ?

[Rich Crowe]

Hi Jeff. Thanks for the reply. I have looked at it Peter's site. I tried the @Font-face method he describes. Although I can apply and see the fonts on my local machine, they are discarded when I upload the output to our server or copy the output to another laptop to test it.

[Peter Grainge]

See if this helps. Using Font Awesome, Google Fonts, @font-face and SVGs in RoboHelp (grainge.org)

________________________________________________________

My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.

[Rich Crowe]

Hi Peter. Thank you for your reply also. As I mentioned in my response to Jeff the fonts are ignored when uploading the output to our server or when copying it to another laptop to test. Correct me if I'm mistaken, but in previous releases, there was a baggage file where one could place fonts. Has the baggage file been removed in this release? I also tired using the Google Fonts method you describe but haven't had any success with that. I'm going to try that again to see if I might have messed up the syntax.

[Peter Grainge]

It's late here but look again. What's behind that problem is covered. I'll look in the morning.

________________________________________________________
My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.

[Peter Grainge]

It's the font face method you need get working.

________________________________________________________
My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.

[Peter Grainge]

I think the answer is change Step 4 to @Import. I need to look up something to confirm that and will do that in the morning. Try that though for now.

________________________________________________________

My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.

[Amebr]

Css is case sensitive. If you change to @ import and  @ font-face does it work?

[Amebr]

Sorry, I should be more precise and say "some parts of css are case sensitive".

[Peter Grainge Rh]

Reposting with my correct ID.

[Peter Grainge]

Going back on what I suggested. @ import is a font awesome thing.

Here's how I have it working in the demo on my site.

Note that I copied the Quicksand-Regular.ott file into assets. Then in the CSS I added what you see.

See if that works. Note the font filename is not necessarily the font name.

________________________________________________________

My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.