Scribd Logo
Importer

Bienvenue sur Scribd !

  • Enabling Custom Web Font in Drupal Website

    Transféré par

    Bella andy
    11 vues8 pages
    Enabling Drupal custom web fonts to your Drupal website creates an impact on user’s impression. In this blog, I have enabled font-your-face contributed module to customize the fonts.

    Titre original

    Enabling custom web font in Drupal website

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document
    Enabling Drupal custom web fonts to your Drupal website creates an impact on user’s impression. In this blog, I have enabled font-your-face contributed module to customize the fonts.

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    11 vues8 pages

    Enabling Custom Web Font in Drupal Website

    Transféré par

    Bella andy
    Enabling Drupal custom web fonts to your Drupal website creates an impact on user’s impression. In this blog, I have enabled font-your-face contributed module to customize the fonts.

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 8

    Enabling custom web font in Drupal

    website

    This blog will walk you through one the contributed module in Drupal community that has been a
    heave of sigh for me whenever I was in trouble for web building activity. Couple of weeks back, I
    have been assigned with a task where the requirement was to enable Benton-sans Regular font
    throughout the site. Initially, I thought it would be an easy task and can be done easily. But I was
    wrong.

    No issues! If you facing similar difficulties. Here, I am going to discuss how you can enable
    Benton-sans Regular font seamlessly using Drupal font-your-face module.

    Earlier, I thought of writing a custom CSS for all the basic usable tags like
    <p>,<a>,<h1>,<h2>,<h3>,<h4>,<h5>,<h6>,<b>,<i>,<ul>,<li>,<ol> and <body> by adding a font
    attribute Font-family. However, I was not cognizant of the font availability that it is equally
    important to render content with new fonts. At that point of time, the only values that was present
    on Firebug to debug was -webkit-body, -webkit-pictograph, cursive, fantasy, inherit, initial,
    monospace, sans-serif, serif and Unset.
    Solution: Here I am going to share the same solution that I applied for the above-mentioned issue.
    After doing little research I came across font-your-face module that turned out to be a life saviour
    for me. Note that there are many other lightweight module available in community, such as

    Icon fonts (https://www.drupal.org/project/iconfonts)


    Google fonts (https://www.drupal.org/project/google_fonts)
    sweaver (https://www.drupal.org/project/sweaver)

    The reason behind choosing font-your-face module is that it offers admin interface to manage and
    apply new fonts. With this module, admin can also add module through CSS selector and enable
    font for the sub-theme.

    Prerequisites: Font file is required to enable Font. Here format should be EOT(embedded
    opentype) or TTF (truetype fonts) or WOFF (Web open font format), SVG (Scalable vector
    Graphics font format). Below is the list of browser that supports Font format type.

    Lets start by enabling contributed module.

    Go for the normal installation as we do for all contributed module.

    Click on Configure button, it will redirect you to http://127.0.0.1/local/admin/config/user-


    interface/fontyourface
    Now under General quick tab, you can see three different options: Providers, Advanced and
    Preview

    Here Providers display enabled font count, Advanced provides a checkbox (see below) and
    Preview holds sample text to be displayed while previewing enabled font.

    Checkbox

    1. Load fonts in all themes, including admin themes.


    2. Keep detailed watchdog logs.

    Select the Load fonts in all themes, including themes checkbox


    Import Local Font quick tab having Font information fieldset with multiple font type upload
    option.

    Note: While adding a new font to the site, admin can provide basic information like font
    name, style of the font (Normal, Italic, Oblique), CSS font weight (Normal, bold, Bolder,
    lighter, 100, 200, 300, ..900).

    Now upload your choice of Font file like EOT/TTF/ WOFF/ SVG and click on confirm button.
    When you will submit the font, it will reflect on
    https://127.0.0.1/admin/appearance/fontyourface/browse/local_fonts. See below.
    Now under @font-your-face, enable fonts tab that has three sub-tabs, namely:

    1. By Font
    2. By CSS Selector
    3. In Themes

    By Font: This tab allows you to add CSS selector class. Select the check box and save the
    setting.
    Once you save the setting, Font tab will start listing up Enabled Fonts.

    By CSS Selector: This tab lists html tag where admin can individually assign font to each tag. Now
    click on save applied fonts.
    After assigning new font to the desired tags, you can see the font reflection while loading the page.

    Note: Dont forget to clear the cache.

    That's it! The above steps is walk-through for @fontyourfacecontributed module that supports
    multiple service provider like Typekit.com, google font, font.com, font Squirrel and Fontdeck. There
    are many other lightweight modules available in drupal.org that you can choose as per your
    requirement.

    We, at Valuebound, recommend trying out multiple font styles to find out what works good for your
    current project or requirements. Also, we invite you to comment below or ask any questions you
    may have.

    Vous aimerez peut-être aussi