Skip to content
This repository has been archived by the owner on Dec 4, 2018. It is now read-only.

Use self-hosted fonts from cf.gov #841

Merged
merged 3 commits into from
Dec 6, 2017
Merged

Use self-hosted fonts from cf.gov #841

merged 3 commits into from
Dec 6, 2017

Conversation

chosak
Copy link
Member

@chosak chosak commented Dec 5, 2017

This commit deprecates use of the font files in the private "eregsip" repository, instead using font files located at /static/fonts that are provided by cf.gov. Additionally, the ability to add these fonts locally is provided via a new static.in directory, akin to how cfgov-refresh does it. See documentation here:

https://cfpb.github.io/cfgov-refresh/installation/#webfonts

I've updated the README to make a note of this.

This commit deprecates use of the font files in the private "eregsip"
repository, instead using font files located at /static/fonts that are
provided by cf.gov. Additionally, the ability to add these fonts locally
is provided via a new static.in directory, akin to how cfgov-refresh
does it. See documentation here:

https://cfpb.github.io/cfgov-refresh/installation/#webfonts

I've updated the README to make a note of this.
src: url("../../eregsip/font/e9167238-3b3f-4813-a04a-a384394eed42.eot?iefix") format("embedded-opentype"),
url("../../eregsip/font/1e9892c0-6927-4412-9874-1b82801ba47a.woff") format("woff");
src: url("../../fonts/e9167238-3b3f-4813-a04a-a384394eed42.eot");
src: url("../../fonts/e9167238-3b3f-4813-a04a-a384394eed42.eot?iefix") format("embedded-opentype"),
Copy link
Member

@anselmbradford anselmbradford Dec 5, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can drop everything but woff and woff2 files. See https://[GHE]/CFPB/hubcap/issues/66

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See cfpb/capital-framework#697 for example.

url("../../eregsip/font/1e9892c0-6927-4412-9874-1b82801ba47a.woff") format("woff");
src: url("../../fonts/e9167238-3b3f-4813-a04a-a384394eed42.eot");
src: url("../../fonts/e9167238-3b3f-4813-a04a-a384394eed42.eot?iefix") format("embedded-opentype"),
url("../../fonts/1e9892c0-6927-4412-9874-1b82801ba47a.woff") format("woff");
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add woff2 format from https://[GHE]/CFGOV/cfgov-fonts

@chosak
Copy link
Member Author

chosak commented Dec 5, 2017

@anselmbradford thanks, I don't know a woff from a Waffle House. I'll make those changes.

@chosak
Copy link
Member Author

chosak commented Dec 6, 2017

Fonts updated to use only woff and woff2 format in 0d49600.

Copy link
Member

@niqjohnson niqjohnson left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm running eRegs as a standalone app instead of as part of cf.gov, so I couldn't get the fonts to load locally. Here's what I did starting from the root of regulations-site in this branch:

  1. cd static.in/ && git clone https://[GHE]/CFGOV/cfgov-fonts/
  2. cd ..
  3. ./frontendbuild.sh
  4. python manage.py runserver 8001

That gave me 404 errors for all the Avenir family fonts used on the page (the text in the screenshot is still in Avenir since I have it installed locally):

reg-fonts

Digging into the network panel a little, it looks like the other webfont used on the page, cf-icons, is coming from /static/regulations/font/ while the CSS is trying to pull Avenir from /static/fonts/, which doesn't exist in my local setup.

Again, I think this is because I'm running eRegs as a standalone app instead of as part of cf.gov and thus don't have a /static/fonts/ directory. So maybe the only "fix" we need is to note in the readme that you'll need to run eRegs as part of cf.gov to use the fonts locally?

README.md Outdated
If you want to install self-hosted fonts locally for use in development, you can place the font files in `/static.in/cfgov-fonts/fonts/` and restart the local web server. If you are a CFPB employee, you can perform this step with:

```
cd /static.in/ && git clone https://[GHE]/CFGOV/cfgov-fonts/
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This might just be me, but I had to drop the leading / in /static.in/ to switch to the right directory (I was in the root of regulations-site at the time):

cd static.in/ && git clone https://[GHE]/CFGOV/cfgov-fonts/

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, you're right, it should be without a leading /. Change made in 35970c5.

@chosak
Copy link
Member Author

chosak commented Dec 6, 2017

@niqjohnson thanks for the review. This should work standalone. Do you have a local static.in/cfgov-fonts/fonts directory? This line should include it in the static assets. Do you happen to have your DJANGO_SETTINGS_MODULE environment variable set to anything?

Copy link
Member

@niqjohnson niqjohnson left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We discovered the missing fonts were a side effect of how my local_settings.py file was set up to include eregsip. After a few small changes to my local_settings.py, the fonts worked locally as intended.

Since (a) that was a me thing and (b) we're going to get rid of including eregsip as part of this work anyway, this looks 👍 to me.

@chosak chosak merged commit 8281ec8 into master Dec 6, 2017
@chosak chosak deleted the use-self-hosted-fonts branch December 6, 2017 17:20
chosak added a commit that referenced this pull request Dec 6, 2017
This commit brings in eRegs assets specific to CFPB that previously
lived in a private "eregsip" repository.

This includes various reg-specific landing pages, the CFPB logo, and
some JS to pull down the latest CFPB-specific regs from the Federal
Register.

The "default" templates for all regs now include CFPB-specific branding.

All mentions and dependencies on the "eregsip" repository should be gone
after this PR (now that #841, self-hosted fonts, has been merged).
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants