Using Fonts in Processwire

[pwired]

Hi,

Just curious about how you guys are using Fonts in Processwire ?

1. Do you use absolute paths to the font location ?
That would not be handy if you have to move the website around.
But on the other hand, it would not be that much work to rewrite
the absolute paths.

2. Do you use relative paths to the font location ?
But then you can not set the url path in the external css file
and have to use inline style and use something like url(<?= $font ?>)

3. Would you use <style>   </style> to declare a font family and if yes
where would you do that, on a template file or a view file holding the
html format ?

Thanks in advance.

 

[horst]

I ever use absolute urls, because then I can match them from within different located css files.

Normally I store all fonts under /site/templates/styles/fonts/.

Spoiler

/* noto-sans-regular - latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: url('/site/templates/styles/fonts/noto-sans-v7-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Noto Sans'), local('NotoSans'),
       url('/site/templates/styles/fonts/noto-sans-v7-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/site/templates/styles/fonts/noto-sans-v7-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/site/templates/styles/fonts/noto-sans-v7-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/site/templates/styles/fonts/noto-sans-v7-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/site/templates/styles/fonts/noto-sans-v7-latin-regular.svg#NotoSans') format('svg'); /* Legacy iOS */
}

/* noto-sans-700 - latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  src: url('/site/templates/styles/fonts/noto-sans-v7-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Noto Sans Bold'), local('NotoSans-Bold'),
       url('/site/templates/styles/fonts/noto-sans-v7-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/site/templates/styles/fonts/noto-sans-v7-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('/site/templates/styles/fonts/noto-sans-v7-latin-700.woff') format('woff'), /* Modern Browsers */
       url('/site/templates/styles/fonts/noto-sans-v7-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/site/templates/styles/fonts/noto-sans-v7-latin-700.svg#NotoSans') format('svg'); /* Legacy iOS */
}

/* noto-sans-700-italic - latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 700;
  src: url('/site/templates/styles/fonts/noto-sans-v7-latin-700italic.eot'); /* IE9 Compat Modes */
  src: local('Noto Sans Bold Italic'), local('NotoSans-BoldItalic'),
       url('/site/templates/styles/fonts/noto-sans-v7-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/site/templates/styles/fonts/noto-sans-v7-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('/site/templates/styles/fonts/noto-sans-v7-latin-700italic.woff') format('woff'), /* Modern Browsers */
       url('/site/templates/styles/fonts/noto-sans-v7-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/site/templates/styles/fonts/noto-sans-v7-latin-700italic.svg#NotoSans') format('svg'); /* Legacy iOS */
}

/* noto-sans-400-italic - latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 400;
  src: url('/site/templates/styles/fonts/noto-sans-v7-latin-italic.eot'); /* IE9 Compat Modes */
  src: local('Noto Sans Italic'), local('NotoSans-Italic'),
       url('/site/templates/styles/fonts/noto-sans-v7-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/site/templates/styles/fonts/noto-sans-v7-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('/site/templates/styles/fonts/noto-sans-v7-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('/site/templates/styles/fonts/noto-sans-v7-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/site/templates/styles/fonts/noto-sans-v7-latin-italic.svg#NotoSans') format('svg'); /* Legacy iOS */
}

 

 

[tpr]

This may come handy ?

https://google-webfonts-helper.herokuapp.com/fonts

[wbmnfktr]

In ProcessWire itself I've never used custom fonts. For projects I do it the exact same way as @horst does. 

As I use .less for CSS I create a _fonts.less import with everything I need. One exception is Typekit. That always gets included with JS.

[wbmnfktr]

8 minutes ago, tpr said:

This may come handy ?

https://google-webfonts-helper.herokuapp.com/fonts

This little helper does an amazing job!

[tpr]

I also use something like @horst but only with without eot, svg and ttf (plus with a stylus or scss mixin), see

https://stackoverflow.com/questions/36105194/are-eot-ttf-and-svg-still-necessary-in-the-font-face-declaration

[Autofahrn]

I'm missing a question:

4. If you are using Google Webfonts, do you use the preferred method by google (loading from Google servers) or hosting them locally?

and probably:

5. When using local copies of Google Fonts, do you observe the font list for availability and if the local files are still up-to-date? (used monospaced Droid font in the past which is no longer available for free)

Until last weeks I've used to use the recommended method and let Google serve client-optimized css declarations, but with upcoming GDPR I've changed my mind and reworked all my sites to host the required fonts locally. Of course I've started using the already mentioned webfont-helper but ended with an own PW module which takes the Google font string (like 'Didact+Gothic:regular|Syncopate:regular|Playfair+Display:italic'), downloads all required variants and creates the required CSS which makes transition rather smooth (if anyone volunteers to make a well documented PW module out of it, please send me a PM). That way I (or my customers) may continue manage required fonts from the Admin.

And, to at least answer one of the original questions:

Since my projects are rather simple with mostly a single CSS file (may be built from LESS) which is included within the <head>, so it was rather simple to use relative paths for now. For more complex sites I'd probably use absolute paths as well.

[wbmnfktr]

17 hours ago, Autofahrn said:

4. If you are using Google Webfonts, do you use the preferred method by google (loading from Google servers) or hosting them locally?

For a long time I used to use the recommended Google way by just placing their snippets.

Then some clients wanted to have their sites faster. Less requests. Less files. As fast and as clean as possible. I moved over to hosting fonts on their servers.
But... this only works in some cases. Sometimes you can't use this method as you are not allowed to do so or don't get the files you need.

If possible I add the fonts to the server. Do I take care of updated or removed versions? Not that much to be honest.

Recently I just stopped using webfonts at all for smaller projects (or landing pages, micro sites).
If there is absolutely no need for a special font I use system fonts.

html {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

It works pretty well so far. You won't get an FWA award for those sites but who cares.

[dragan]

On 5/13/2018 at 5:58 PM, Autofahrn said:

Until last weeks I've used to use the recommended method and let Google serve client-optimized css declarations, but with upcoming GDPR I've changed my mind

How does loading a CSS + fonts from another server violate the GDPR? I totally understand the need to adjust your T+C / privacy policy with stuff like Google Analytics etc. - but fonts?

[Autofahrn]

Its just because of the fact, that each request sends the user's IP to the remote server which may do anything with it. Including storing or merging with other available data. Even if Google (currently) states that Fonts (and reCaptcha) are served from separated servers not connected to the remaining Google infrastructure, this is hard to verify from outside. Additionally Google states that they do use requests for analytics to determine popular Fonts.

Since the user's IP address may be interpreted as personal data, it is rather critical to send this outside the EU. There are many discussions about this stuff on german sites, but I also found some in english, like this one:

https://theme.co/apex/forum/t/google-fonts-and-eu-privacy-statement-2018/25956/2

I'm not a lawyer nor do I have the time or budget for juristical battles, so I prefer to serve those locally.

[FrancisChung]

I Just wanted to add that if you're using Procache (which you should be if you value performance), just be wary that you MAY have to use relative paths.

I had an issue where the fonts were not being loaded using a path of /site/templates/fonts/....

It used to work flawlessly but it stopped working 1 day.
Tried to get to the bottom of it with no success, but Ryan suggest a workaround to use a relative path.

i.e ../fonts/....