Can I link to external CSS?

[Anonymous User]

I know I can add CSS into a custom and footer, but is there a way to add an external reference to another CSS file for the entire hub site?

Specifically I'd like to use....

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

It could be handy if I could just point at my organizations existing CSS (although I do realize this creates possible conflicts and I'm not sure how they would be resolved)

Sort of related to this - it seems I can only set the font to a provider from an external URL. Is there a way I can override the font with one that "all computers have installed", like Sans-Serif or Times New Roman. The website I'm working on uses the following font definition:   Helvetica,Arial,"Roboto",sans-serif;

[KlaraSchmitt]

Hi Kevin,

Unfortunately, at this time we do not support linking out to external stylesheets, although, I do understand the desire for more robust styling and we do hope to expand upon shared themes in the future.

In regards to your font question, if you set a font through Google Fonts (eg. an external URL) to change your fonts within our Theme Builder in the Site Editor, this will carry the font into your theme and it will not matter whether people have a local copy installed. That is the benefit of importing a font through this method. It removes the need for the fallback method that we used to have to do in CSS to handle the situation you have above where (not all Windows machines had Helvetica, so it rolled back to Arial.)

If you set a font through Google fonts and for some unknown reason it were to fail, we do have fallback fonts in place in our code, and the first fallback font would be "Avenir Next", which is our brand font and which would be applied regardless of whether it exists on one's computer locally because we have a license to publish it across our apps.

Is your issue that you are worried that you will set a font and it will not be available to all computers or is it that Helvetica is your brand font, and you need it set across the board? If so, do you have a URL for your Helvetica license? Otherwise, you may find 5 Google Web Font Alternatives to Helvetica and Arial - UltraLinx useful if you don't need an exact replica.

[Anonymous User]

Thanks for the followup, Klara.

I'm trying to match the OpenData site to the existing website for the municipality I'm working with.

The only external font they reference is font-awesome to use some icons, besides this they simply have their font referenced as Helvetica,Arial,"Roboto",sans-serif;

So that's what I'm trying to mimic: set the base font order, plus add in one web font.

I know you don't support @import(...)

And I can only change the default font by linking to a web based font.

I don't think I can achieve the "installed on computer" font order, plus reference a single font

[KlaraSchmitt]

You are correct. We do not support @import for files on your local machine, and at this time, you can only set two default fonts (body text, heading text) and not the iconfont. If the municipality had a license for Arial or Helvetica, it's possible they have a webfont URL, but it's also possible that they are banking on everyone having either Helvetica or Arial on their computers. You could use Roboto though since it's in Google Fonts, since it is part of their fontstack, they may be fine with the site using it by default.

[GeneH_Chesco]

How do we use Google fonts if we can't do so by using <link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Source Sans Pro"> ?

[KlaraSchmitt]

@GeneH_Chesco 

You can add fonts to the Hub site theme by going to the site editor, then selecting theme, and then scrolling down past the list of colors where we have two fields for setting base font and heading font. Select the gear icon and this will launch a model where you can add your Google fonts.

 

[GeneH_Chesco]

Thanks Klara. I asked in the wrong section. I was hoping to do this in an Experience Builder app hosted on ArcGIS.com but don't see that option any longer. It seems to only be allowed on self-hosted Experience Builder apps. Thanks for showing how to do it in a Hub though for others to see!