How to correctly use Ubuntu font

Question

I tried to use the Ubuntu font in my page by adding a link:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin">

Here is the CSS:

body{
    font-family : Ubuntu;
}

It works but sometimes the font can't recognize slovak characters like "č, ž". These are a different font (not Ubuntu). For example in a mobile sized screen (when I push ctrl+shift+m in firefox = mobile view).

Do you know what the problem is?

Answer 1

In case the viewers of the site doesn't have the Ubuntu font in their devices please add this code:

Importing from external Provider:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin">

Then, add Ubuntu to your font family list:

body { font-family: Ubuntu, "Times new roman", Arial, San-serif, Ubuntu; }

Hope this helps.

Answer 2

I apologize, the code for importing external provider:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin">

Answer 3

Note that the link to the font says "subset=Latin". This is usually sufficient for ASCII-only text; for characters with diacritics, you need latin-ext, which means "extended Latin characters." This set should cover pretty much all characters used in European, Latin-script using languages (not Cyrillic, obviously).

This is configurable in the "character set" tab in Google's font picker.

Answer 4

I don't know about the slovak font showing it correctly. Maybe you need to add latin-ext (You need to check the latin-ext to see if it supports Slovak characters. But if you are getting wrong characters on different browsers, it is because you didn't explicitly set the charset. Add the following line to the header:

<meta charset="utf-8">

This will force the browser to show the website in UTF-8, which will fix your problem.