Wednesday 23 August 2017

Getting started with web fonts in CSS

Now a simple topic in this article. We will look into how to use web fonts in CSS. Web fonts lets you add additional fonts that the users can view on your web site and offer a variation to the usual fonts that different systems support. The standard fonts or web safe fonts will become tedious and boring in the long run, web fonts will offer you variation on a grand scale! First off, we need a source for fonts where we can download fonts. You can for example download web fonts from the following site:

Font Squirrel (www.fontsquirrel.com)

Look for a web font to test out, for example Gooddog. Choose the pane Webfont kit and then hit the button Download @Font-Face kit after selecting formats to download. The format WOFF (.woff) is most compatible with different browsers. Then a .zip file is downloaded where you already can test out a demo page with the necessary CSS and HTML to get started.

First off, put the .woff file into a folder near the CSS of your web page. Now define the web font as a resource in CSS using @font-face like the following CSS rule:

@font-face {
    font-family: Good-dog;
    src: url(../fonts/GoodDog-webfont.woff) format('woff');
}

You have now defined the font resource and can use it with the friendly name you defined for font-family. For example, for the standard ASP.NET Mvc sample site for Visual Studio 2017, add this rule:
h1 {
    font-family: Good-dog;
}

.lead {
    font-family: Good-dog;
}


The result is then:
Note that you get excellent support in VS 2017 for defining such CSS rules! Also check out the license terms for the different web fonts you download. Some fonts is not free to use in commercial applications or other production. The WOFF format is not supported in IE browsers predating IE 8. Internet Explorer may also not work with uppercase letters in the url attribute of src. More info about @font-face on the following w3schools page:

@font-face CSS rule
Note that you should provide a fallback to the places in your CSS rules where you make use of the web font, such as fallback to Arial and so on. Mozilla Firefox might also deactivate web fonts intially as a security measure. Tip how to disable in Google Chrome and Mozilla Firefox:
Disable web fonts tip
Share this article on LinkedIn.

3 comments:

  1. What a stuff of un-ambiguity and preserveness of valuable experience about unexpected emotions.Thank you for sharing your info.

    Arcade VST Crack

    RoboForm Crack

    Crack Software

    Pc License Keys

    ReplyDelete
  2. Whoаh this weblߋg is eхcellent i love studying your articles.Keep up the goⲟd woгk! You undеrstand, many peгsons are hunting around for this information, you could help them greatly.
    Final Cut Pro Crack Free

    Crack Software

    ReplyDelete
  3. I am extremely inspired with your writing talents and also with the structure on your blog.Either way keep up the nice quality writing, it’s rare to peer a great weblog like this one today.
    AVG PC Tuneup Crack
    Bitdefender Total Security Crack
    AOMEI Backupper Pro Crack
    Youtube By Click Premium Crack
    EaseUS Partition Master Crack
    uTorrent Pro Crack
    MS Office Crack

    ReplyDelete