How to do a global font change?

[McMahon]

Hi - I am new to sports engine, and am setting up our site. We're not a Hockey or Soccer team league - we're Squash, and will have some work to do to integrate with US Squash (Which is how leagues are rostered and played). That's a more complex subject for later.

 

For now, I want to do something simple.

I would like to change the base font used in the Itasca theme in the CSS to Open Sans.

 

<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,800" rel="stylesheet">

 

font-family: 'Open Sans', sans-serif;

 

Any advice on the best way to do this?

[docnzok]

So I have done this on an NGIN site an there are a few things to consider

 

First, you are on the right track as you have to load the font family from somewhere. Google fonts is usually the best, but I used one of my own font families.  I simply loaded the font files onto a disabled page and used that link to reference the font in the css font-family tag.

 

There are some things that DO NOT WORK correctly when doing this.  Firefox will not load the font (more than occasionally) because the file is located inside your domain and if you look at the console when it doesnt load, you will see a CORS error.  Firefox is very picky about that and the only way to get it to work in Firefox is to load an add-on (thats the only way I got it to work anyway). 

 

As far as setting it up, here is my CSS

 

@font-face {

    font-family: NexaLight;

    src: url('https://cdn4.sportngin.com/attachments/document/0155/1611/Nexa_Light.otf') format('opentype');

}

 

Then you can reference that font wherever you want it to apply, including the .body tag if you want.  I use it in specific locations so my call is this.

 

li.theme-nav-item {

font-family: 'NexaLight';

}

 

If you have any more questions, let me know and I can try to help.

 

Mark

 

To see the NEXA font take over the whole page - take a look at lifezone360lax.com