How can I change the font-face of a web page that is on the client-side already?

StackOverflow https://stackoverflow.com/questions/22180843

Frage

How can I change the font-face of a web page that is on the client-side already ? Example although the site is in Arabic, I want to provide an option for the client to change the font-face of the article so that he can read the article in a way that he most likes.

Ex. URL: http://beta.aawsat.com/home/article/49661

Note, we already have an option to "-" or "+" to control the size of the font-size. What would be the best way that I can provide the client to change the font face on the fly as well ?

For an example on Font-Squirrel you can change the property of the fonts by selecting the option on a drop down box ...

Ex. URL: http://www.fontsquirrel.com/fonts/amble

Is there anyway that I can do something like this to change the Font-Face of an Article ? Ideally will provide a drop-down with 3-5 web-font options to select from and then the article will change the font on the fly ...

Any advise or reference links or ideas?

Notes:

  1. The website currently is working on Drupal.

  2. By default the font that loads for the article is "Tahoma"

  3. Similar to the function of having the text larger or smaller using "+/-" buttons, I'm trying to see how I also can provide a feature that the end user can select the font that he wants to read the article with.

  4. I want to give the end-user the option of a 3-5 fonts as a drop-down list, and when he selects the font, the Article text would be re-loaded or changed with that selection.

  5. On the client-side (i.e. Front-End), there are CSS, jQuery that is used currently.

  6. Of-course the point is we will be using Web-fonts, the fonts are based on the server side web-fonts and not going to capture the fonts on the clients system. (i.e. the site already uses web-fonts, we will add 3 to 5 more web fonts that can be used for this feature)

Keine korrekte Lösung

Andere Tipps

  1. Define different CSS classes for each font.
  2. Set different fonts in your CSS style sheet for each class.
  3. Use a interface element to select a font and apply the appropriate class to the <body> element.

Example in this fiddle

If you want a more specific answer then you'll have to provide a little more details. What client side and server side technologies are you using ?

If you want the user's chosen font to persist so that every time he visits the website his chosen font is applied by default then you'll have to save those settings server side.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top