How do I make my website compatible with Google Web Fonts?

  • 1
  • Question
  • Updated 7 years ago
  • Answered
I understand that Yola has preset fonts that allows for the same viewing experience of the website on all browsers, however there just isn't any 'wow' in these fonts anymore.

When looking to see alternatives to copying and pasting text written in another font, I came across the page source of www.ubuntu.com . I looked at their source, and saw an html tag referring to Google Web Fonts. I then looked up this service, and tried to apply the Ubuntu font to my home page.

No dice.

How can I incorporate compatibility with Google Web Fonts using Yola?

External links: http://www.google.com/webfonts/family...
Photo of Michael Cooke

Michael Cooke

  • 126 Posts
  • 14 Reply Likes
  • sad

Posted 7 years ago

  • 1
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Hello, 

Thanks for your message. It appears that Google Fonts can needs to be added to the head section of your site. Unfortunately you don't have access to the head section of your site. What does work for some people is to add the head section of code in one HTML Widget and the body section of the code into another HTML Widget. Here are steps to using the HTML Widget:

  1. Drag-and-drop an HTML Widget from the Sidebar on the right onto your page (the icon for this is a blue sphere).

  2. An HTML editor will open up that will allow you to write or paste your code (use right-click > paste or ctrl-V to paste).

  3. When you are done, click "Save" and you will see the way that the HTML displays on your page.


I also see that it can be added via Custom CSS. This is a feature available to our Yola Silver customers, however, I have not had experience using Google Fonts on a Yola site. Please give either of these options a try and let me know if you need further assistance. I will be happy to grab our HTML team to take a closer look at whether or not implementing this is an option.
Photo of Michael Cooke

Michael Cooke

  • 126 Posts
  • 14 Reply Likes
I apologize if I wasn't clear on my first post - I have followed the instructions on the URL provided, using an HTML widget with a (head) tag. (Replace parenthesis with respective angle bracket for html.) The (head)(/head) tag in an HTML widget always works for me when I incorporate javascript plugins, etc.

Here is the exact HTML I used in my index page as instructed:


<head>
<link href='http://fonts.googleapis.com/css?family=Ubuntu&v1' rel='stylesheet' type='text/css'>
</head>


And the CSS as instructed...


h1 { font-family: 'Ubuntu', arial, serif; }


...And yet, I'm drawing a blank.

I have only applied this to my index page www.552clan.com and manually pasted sample text from a word processor on my test page www.552clan.com/test

I also replaced the first title and paragraph on my homepage using pasted text from a word processor using the Google web font I wish to use on my website.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Michael,

Have you added style tags to your CSS? It should look like this:

<!--<style type="text/css">
your css code goes in here
</style>-->

Please give that a try and see if that works.

p.s. Don't include the <!--and -->.
Photo of Michael Cooke

Michael Cooke

  • 126 Posts
  • 14 Reply Likes
I just put the CSS into the CSS editor console. Should I insert the CSS with an HTML widget with that style tag on every page?
Photo of Michael Cooke

Michael Cooke

  • 126 Posts
  • 14 Reply Likes
I removed the font CSS fromt he CSS editor console and used that style tag to inject the CSS in... no luck. The exact code that I put in was this:


<style type="text/css">
h1 { font-family: 'Ubuntu', arial, serif; }
</style>
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Michael,

We mark it as "answered" to indicate that we have read this thread - it's a way of moderating our forum. Don't worry, we will continue to keep working with you.

As this is for your H1 tag, when you write up your text, you'll need to add <h1>your text goes here</h1>

Does that work for you?
Photo of Michael Cooke

Michael Cooke

  • 126 Posts
  • 14 Reply Likes
This didn't work unfortunately...
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Hi Michael,
Can you show us what your code looks like or a link to the page where the H1 tag is not working. Please also let us know what text is supposed to have the H1 attribute. Thanks much!
Photo of Michael Cooke

Michael Cooke

  • 126 Posts
  • 14 Reply Likes
Here is the page I test everything on, everything that I have done will be highlighted there. http://www.552industries.com/test
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Everyone

I saw this thread and wanted to help since I use Google Web Fonts all the time on my Yola Site.

Paste this code into an HTML Widget at the top of your page:



<link href='http://fonts.googleapis.com/css?family=Ubuntu&v1' rel='stylesheet' type='text/css'>

<style type="text/css">
h1 {
font-family: 'Ubuntu', arial, sans-serif !important;
}
</style>

<h1>Ubuntu</h1>



And then you should see a header with the font "Ubuntu" and it should say "Ubuntu"

I tried this on a test page and it worked: Test page

If it doesn't work, please let me know.

Nathan
Photo of Michael Cooke

Michael Cooke

  • 126 Posts
  • 14 Reply Likes
Great! Now we just have to figure out how to apply that font to every character on my page while maintaining size format, etc. I would much rather type something into a text widget and trusting that it will just work rather than type into a clunky HTML editor.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
So you want all of text on your page to have the Ubuntu font? No problem, just change "h1" to body in the CSS and it should work. Like this:

body {
font-family: 'Ubuntu', arial, sans-serif;
}

Let me know if it works.

Thanks,
Nathan
Photo of Michael Cooke

Michael Cooke

  • 126 Posts
  • 14 Reply Likes
Thank you so much! I'd give you a hug if it wasn't creepy! Hahaha!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hahaha! Your welcome! :) If you ever have any problems with Google Web Fonts, feel free let us know.

Kind regards,
Nathan