Domanda

I came to a problem with google fonts - I needed to use diacritics, characters like ěščřžýáíé, ..., When I edited the font page in google font "Pop out" page, it worked, but when I used the default generated code on the "Quick-use" page, diacritics didnt work...

Eventually I found the solution by checking the google "Quick-use" page's source code.

Solved below...

È stato utile?

Soluzione

2021 EDIT: DON'T CONFUSE NEW "auto-detect" unicode-range functionality with a diacritic support! (it is NOT)

Recently there was a new functionality added which resulted in removal of the subset=... param, since most current modern browsers support unicode-range @font-face property.

However, don't confuse this with an actual support of all diacritics in that language set, which this is not. That one still depends on each individual font, meaning as of 2021, this Answer still stays valid. Historically, you had to define subsets(that just may contain your diacritics/characters) if you didn't want the browser to download all possible subsets, now the browser - if unicode-ranges are defined properly - can select those subsets, that still just MAY, contain that character automatically for you.

2021 interface

CAUTION: SET DOES
NOT ALWAYS GUARANTEE ALL CHARS!

LATIN EXTENDED CAUTION

For example, fact that a font has latin-extended set does NOT mean it has all caron / ring letter-variants - especially "ů" is oftentimes missing...
I would be very cautious about this for any language that contains diacritics - always test it first with a Pangram

Even interface changed recently, now, in 2021 (February) the steps are following:

  1. Find a Pangram = "sentence using every letter of a given alphabet at least once" - to test the whole set of target language at once
  2. go to http://www.google.com/fonts/
  3. Somewhere in the middle you should see an input with a placeholder saying "Type something" - if not, it should be the one next to the search, where there's dropdown from which you can select "Custom" (or go to this reset link - https://fonts.google.com/?preview.text=&preview.text_type=custom)
  4. In the input fill in your Pangram
  5. Be cautious, check EVERY letter from the Pangram AKA every letter of target alphabet.

old answer / interface:

Many of them do, to find out wether they do or dont contain your characters go to http://www.google.com/fonts/ and find your font, open it by "Pop out" button and look for your characters. If the font contains characters you need, go back and click on "Quick-use" button - this will open the page where you can adjust some options and it will generate a code for your page - something like this:

<link href='http://fonts.googleapis.com/css?family=Meie+Script' rel='stylesheet' type='text/css'>

Now you have 2 options:

  1. You dont care much about the page load - just add &subset=all to the href attribute and the link will load all the characters the font has. So you will have something like this:

<link href='http://fonts.googleapis.com/css?family=Meie+Script&subset=all' rel='stylesheet' type='text/css'>

  1. However if you do care about the page load, you should load only character sets you need - on the google font page which generates the code to use - notice the "2. Choose the character sets you want:" section - there you can use ("Quick-use" page) choose which character sets you will be using and you will get something like

<link href='http://fonts.googleapis.com/css?family=Meie+Script&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

Notice that now there is a list of character sets in the &subset attribute .

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top