Jump to content
Welcome! Community launches Feb. 1st ×
  • 0

How to do a global font change?


McMahon
 Share

Question

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?

Link to comment
Share on other sites

1 answer to this question

Recommended Posts

  • 0

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

 

 

 

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...