Import Custom & Google Fonts

[fcalizo]

Hi all,

I've used the Google Fonts API a few times when creating basic HTML/CSS/JS webpages with no problem. I would simply go to their website and include the URL link of the font into my HTML File, or include the @Import link into my CSS File and the fonts would be available to me on my webpage.

The problem I am having now is that I want to save the fonts to my local Profound Server, so that I no longer have to call to the Google Fonts API outside the Profound Server. What would be the best approach to do this?

I've tried downloading the files from Google Fonts and what is downloaded are files in TTF Format. I'm having trouble finding the correct directory to place these downloaded files and how to call to them through an external CSS Style Sheet. Any input would be greatly appreciated.

Thanks!

[Megan]

Hello Francis,

If you have Version 6 Fix Pack 0.0 or later, you will be able to how to do this in profoundui.css, found at /www/your_instance/htdocs/profoundui/proddata/css. I like to use this website to help make the @font-face classes more easily.
https://google-webfonts-helper.herokuapp.com/fonts

One of the font face classes from profoundui.css

Code: Select all

@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 400;
  src: url(/profoundui/proddata/fonts/roboto/roboto-v18-latin-ext_greek_cyrillic_cyrillic-ext_greek-ext_latin_vietnamese-regular.eot);
  src: local('Roboto'), local('Roboto-Regular'), url(/profoundui/proddata/fonts/roboto/roboto-v18-latin-ext_greek_cyrillic_cyrillic-ext_greek-ext_latin_vietnamese-regular.eot?#iefix) format('embedded-opentype'), url(/profoundui/proddata/fonts/roboto/roboto-v18-latin-ext_greek_cyrillic_cyrillic-ext_greek-ext_latin_vietnamese-regular.woff2) format('woff2'), url(/profoundui/proddata/fonts/roboto/roboto-v18-latin-ext_greek_cyrillic_cyrillic-ext_greek-ext_latin_vietnamese-regular.woff) format('woff'), url(/profoundui/proddata/fonts/roboto/roboto-v18-latin-ext_greek_cyrillic_cyrillic-ext_greek-ext_latin_vietnamese-regular.ttf) format('truetype'), url(/profoundui/proddata/fonts/roboto/roboto-v18-latin-ext_greek_cyrillic_cyrillic-ext_greek-ext_latin_vietnamese-regular.svg#Roboto) format('svg')
}

You'll notice that there are urls for different file types, this is for cross browser compatibility.

You won't want to put your fonts in /proddata/fonts because they can be potentially lost when updating. Instead, you'll want to create a fonts folder in /userdata/custom.

For more information on @font-face: https://www.w3schools.com/cssref/css3_p ... e_rule.asp

[Scott Klement]

To clarify a couple of points on what Megan said:

1. The /www/YOUR-INSTANCE/htdocs/profoundui/userdata/custom directory (or a subdirectory beneath it) is a good place to put your CSS files. CSS or JavaScript files in userdata/custom, or any subdirectory beneath it, are automatically loaded into the Visual Designer and Rich Display launcher (/profoundui/start or the RDF launcher in Atrium). So you would not modify profoundui.css, but rather would create your own file (maybe googleFonts.css) within that directory.

2. If you're running this through Genie, you would want to add a <link> tag in your start.html file that links to the CSS file, above.

3. The actual font fonts (such as .TTF) would go directly under /profoundui/userdata -- since these aren't CSS or JavaScript, there's no value to putting these under "custom". Perhaps create a directory like /www/YOUR-INSTANCE/htdocs/profoundui/userdata/fonts and put them there. Then from the CSS you'd refer to them as /profoundui/userdata/fonts/XXXX.

4. You can then use the various "font" or "css class" properties of the widgets to refer to these fonts.

Good Luck

[fcalizo]

Thank you both! This works perfectly.