Using Custom Fonts

[z929669]

The IPS AdminCP infers that I can use Google Fonts or @font-face to use a custom font not available in IPS natively; however, I am unable to determine if the custom font can be injected into the software in a seamless way (i.e., added to the list of available fonts shown below?):

I see that @font-face is in injected via css according to these choices and understand that 'default' will use the font as defined in the native css (i.e., HelveticaNeue), but I cannot see the stylesheets so assume that is all in the DB.

How should I inject my custom font installed locally on the server using @font-face css? I can load my custom css by editing the global template header, but it does not load on all pages, and it also has no impact. I haven't found any clues on the forums of Google with respect to IPS 4, so I'm hoping to get answers on how to do this properly in a 'good' way that the IPS software expects.

Thanks

[opentype]

3 minutes ago, z929669 said:

The IPS AdminCP infers that I can use Google Fonts

Sounds like you misunderstand that part. That refers to the few given options like Lato, Open Sans, Roboto.  

3 minutes ago, z929669 said:

How should I inject my custom font installed locally on the server using @font-face css?

You can put the @font-face declarations in the theme’s custom.css.

After that you would have to assign this font to elements like “body”, “h1“ or something like that. 

[z929669]

Ahh, OK. I just stumbled across custom.css the other day ... haven't found any good references to customization in the doc, so I will scour these forums more in the future. I will assume that custom.css takes priority where there are conflicts in the system templates (like Mediawiki paradigm, fe).

Thanks for your response.

PS: I'm a IPS 4 n00b ... been on IPS 3.4.2 since 2014 and finally upgrading. Lots of theming UI work to do, so I will be lurking here often I suspect

[Pete T]

54 minutes ago, z929669 said:

Ahh, OK. I just stumbled across custom.css the other day ... haven't found any good references to customization in the doc, so I will scour these forums more in the future. I will assume that custom.css takes priority where there are conflicts in the system templates (like Mediawiki paradigm, fe).

Thanks for your response.

PS: I'm a IPS 4 n00b ... been on IPS 3.4.2 since 2014 and finally upgrading. Lots of theming UI work to do, so I will be lurking here often I suspect

I am not sure want build own theme or this just for own site you option add via custom.css like @opentype has posted or if this own site only can use this

or if this is custom theme to be build example would be this

@font-face {
	font-family: 'talldeco';
	src:url('{resource="fonts/talldeco/talldeco-webfont.eot" app="core" location="_base"}');
	src:url('{resource="fonts/talldeco/talldeco-webfont.woff" app="core" location="_base"}') format('woff'),
		url('{resource="fonts/talldeco/talldeco-webfont.ttf" app="core" location="_base"}') format('truetype'),
		url('{resource="fonts/talldeco/talldeco-webfont.svg" app="core" location="_base"}') format('svg');
	font-weight: normal;
	font-style: normal;
}

as see in that example see the url pointing to resource file best way understand this via 

 and hopefully this will guide you on adding resources to your theme.

[z929669]

Thanks @Pete T ... I will check out that Advanced Theming guide, and yes, I was planning on using the @font-face css method you posted via custom.css.

[Pete T]

5 minutes ago, z929669 said:

Thanks @Pete T ... I will check out that Advanced Theming guide, and yes, I was planning on using the @font-face css method you posted via custom.css.

@z929669 ok and i also forgot if using just one font can use this also @import 'https://fonts.googleapis.com/css?family=Raleway'; just find your font via google font.