0

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)

Fawaz Taj
  • 83
  • 1
  • 9
  • This is a broad and complicated design (and implementation) issue and cannot be appropriately answered in the SO format. As an example, even finding out what fonts are available in the user’s system is non-trivial, not to mention the problem of filtering out completely unsuitable fonts (like fantasy fonts). – Jukka K. Korpela Mar 04 '14 at 19:47
  • The idea is to have 3 to 5 Webfonts on the server, and provide the site users with an option to select the font he likes to read the article in, hope this clarifies the issue. – Fawaz Taj Mar 05 '14 at 13:02

2 Answers2

2
  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

Stephen Thomas
  • 13,843
  • 2
  • 32
  • 53
  • http://www.prothom-alo.com/bangladesh/article/160816/%E0%A6%9A%E0%A6%BE%E0%A6%AE%E0%A6%9A%E0%A6%BF%E0%A6%95%E0%A6%BE%E0%A6%B0_%E0%A6%AD%E0%A7%87%E0%A6%82%E0%A6%9A%E0%A6%BF_%E0%A6%B8%E0%A6%B9%E0%A7%8D%E0%A6%AF_%E0%A6%95%E0%A6%B0%E0%A6%BE_%E0%A6%AF%E0%A6%BE%E0%A7%9F_%E0%A6%A8%E0%A6%BE_%E0%A6%B6%E0%A7%87%E0%A6%96_%E0%A6%B8%E0%A7%87%E0%A6%B2%E0%A6%BF%E0%A6%AE If you go to this website at top right side you will see a zoom in and zoom out button. Are you looking something similar? – Choudhury A. M. Mar 04 '14 at 19:18
  • Exactly what I was thinking. – kylealonius Mar 04 '14 at 19:18
  • The Article or the core content is within a per-defined DIV and Class. We are not changing the websites font face, rather the article text only. – Fawaz Taj Mar 05 '14 at 13:04
  • @AdilMahmudChoudhury: Yes! Something Similar, but to change the font-face using web-fonts ... – Fawaz Taj Mar 05 '14 at 13:16
0

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.

TchiYuan
  • 4,258
  • 5
  • 28
  • 35
  • 1. The site is built on Drupal / 2. there is plenty of CSS & j Query on the front-end. / 3. By default the font that will load is "Tahoma" every time. / 4. When the user needs to change the Article's font he may do so based on the provided drop-down-list with 3 to 5 web-fonts that will be presented to him. – Fawaz Taj Mar 05 '14 at 13:04