Jump to content

Using Custom Fonts


z929669
 Share

Go to solution Solved by opentype,

Recommended Posts

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?):

image.thumb.png.33dabce404b912555ea68267b5487d42.png

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

Link to comment
Share on other sites

  • Solution
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. 

Link to comment
Share on other sites

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

Edited by z929669
added some context, as I am late to the v4 game
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...