• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

Having trouble importing fonts into my project

New Here ,
Jul 27, 2022 Jul 27, 2022

Copy link to clipboard

Copied

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.

TOPICS
New UI

Views

69

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 27, 2022 Jul 27, 2022

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 27, 2022 Jul 27, 2022

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 27, 2022 Jul 27, 2022

Copy link to clipboard

Copied

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.

 

Help others by clicking Correct Answer or Like if helpful. Found your answer elsewhere? Share it here.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 27, 2022 Jul 27, 2022

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 27, 2022 Jul 27, 2022

Copy link to clipboard

Copied

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.

 

Help others by clicking Correct Answer or Like if helpful. Found your answer elsewhere? Share it here.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 27, 2022 Jul 27, 2022

Copy link to clipboard

Copied

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.

 

Help others by clicking Correct Answer or Like if helpful. Found your answer elsewhere? Share it here.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 27, 2022 Jul 27, 2022

Copy link to clipboard

Copied

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.

 

 

 

Help others by clicking Correct Answer or Like if helpful. Found your answer elsewhere? Share it here.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 27, 2022 Jul 27, 2022

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 27, 2022 Jul 27, 2022

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 27, 2022 Jul 27, 2022

Copy link to clipboard

Copied

Reposting with my correct ID.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 27, 2022 Jul 27, 2022

Copy link to clipboard

Copied

LATEST

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.

 

image.png

 

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.

 

Help others by clicking Correct Answer or Like if helpful. Found your answer elsewhere? Share it here.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
RoboHelp Documentation
Download Adobe RoboHelp