Google Fonts in Skuid?

  • 1
  • Question
  • Updated 3 years ago
  • Answered
Has anyone managed to use Google Fonts in a Skuid page? The usual , e.g. , needs to go in the of the HTML page, which I don't think we can access, can we?
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,738 Points 5k badge 2x thumb

Posted 5 years ago

  • 1
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,738 Points 5k badge 2x thumb
Answered my own question on this. I just put the full Google Font CSS (rather than trying to link to it using a tag) into my custom CSS on the Skuid page and it worked.
Photo of Anna Wiersema

Anna Wiersema

  • 10,890 Points 10k badge 2x thumb
So cool! Great idea!
Photo of Gary Bailey

Gary Bailey

  • 1,628 Points 1k badge 2x thumb
Could you provide an example of how you "put the full Google Font CSS" into your page?  Did you add it as a custom css resource or did you actually embed it in the template code in your page? 

I'm trying this code in a template field but it isn't working. (example below). 

Should I be putting the @import in my external stylesheet and then calling it from the template code instead?

Here is the code in my template field:

<p style="@import url(http://fonts.googleapis.com/css?family=Roboto:400,700,500); font-family: 'Roboto', sans-serif;";>Roboto Text</p>
Photo of Ben Hubbard

Ben Hubbard, Employee

  • 12,470 Points 10k badge 2x thumb
Go to the resources tab in the Skuid Page Builder and create a new CSS Resource.  Set the resource location as external and just enter the url for your font (except use https) for the Resource URL.  For you it would be https://fonts.googleapis.com/css?family=Roboto:400,700,500 .  Then you just need to put the font-family css in the places where you want that font to show up.
Photo of Anthony Davis

Anthony Davis

  • 152 Points 100 badge 2x thumb
New to this sort of thing, how do I "put the font-family css in the places I want?"