10 {{ upvoteCount | shortNum }}
10 {{ upvoteCount | shortNum }}

Wordpress - Please help change title font?

by Oscar D
7 replies
Good day,

Can someone please help me? How can I change the font of my header from the standard font to Lucida Calligraphy

Here is the style.css code for the font now, how can I change it?

Code:

#header {
margin: 0;
padding: 0;
height: 120px;
width: 780px;
border-style: solid;
border-color: #dddddd;
border-width: 1px;
background-color: #F88158;
background-image: url('images/header.jpg');
}

.header-title {
color: #FFFFFF;
font-size: 13px;
font-weight: nonr;
padding: 60px 0 0 30px;
text-align: left;
}
.header-title a{
color: #FFFFFF;
text-decoration:none;
border-bottom:none;
}
.header-title a:hover{
color:#FFFFFF;
text-decoration:none;
border-bottom:none;
}

Thanks
#change #font #title #wordpress
  • Profile picture of the author Bruce Hearder
    The trouble with fonts is that you have to be certain that the font is installed on everyoned computer, so that it gets displayed properly.

    If the font is not installed, it will fall to the default font, whcih in most case ruins the entire effect.

    If you want to use a font that is not widely installed (and this is one of those fonts), then make your writing as an image and upload the image.

    If it is a commonly displayed font, the following CSS can help:


    .header-title
    {
    font-family: "Lucida Calligraphy";
    color: #FFFFFF;
    font-size: 13px;
    font-weight: nonr;
    padding: 60px 0 0 30px;
    text-align: left;
    }

    Hope this helps

    Bruce
    {{ DiscussionBoard.errors[1312683].message }}
    • Profile picture of the author munkyscripts
      what he said, there is also an embedded font format but for now only works in ie for windows.
      Signature
      Wordpress Toplist Wordpress CSV Parser Free Web Templates Premium templates
      {{ DiscussionBoard.errors[1312732].message }}
      • Profile picture of the author LibertyUnc
        If you don't mind people seeing a different font, you could also specify multiple fonts...starting with the one you prefer and ending with fallback fonts in case people do not have it.

        If the font you want to use is free, you could tell people to grab a copy...and those who grab and install it will then see your site with that font.

        For multiple fonts:

        font-family: "Lucida Calligraphy", verdana, arial, courier;

        That would use your chosen font if the user has it, then fall back to verdana, arial, and finally courier if they did not.

        As munkyscripts noted, there is no reliable way to display unusual fonts currently...but it can be done for some browsers.

        If you absolutely want a specific look, images are the way to go...but I would avoid using too many if you want your pages to load in a snappy manner...a lot of people still have rather slow connections.
        {{ DiscussionBoard.errors[1314644].message }}
  • Profile picture of the author mad
    Don't forget to change the font in all .header-title, .header-title a, .header-title a:hover.
    I use only fonts from m$ Paint so you can be sure all users have this font.
    {{ DiscussionBoard.errors[1324916].message }}
  • Profile picture of the author RhondaGiarraffa
    When Changing fonts you need to be careful. There are certain fonts that are universal and some that are not.

    If you choose a font that is not, you will be taking a chance with some of your visitors that land on your page. The font text could look jacked up from their view if they do not have that particular font on their hard drive.

    There is a way to put the font you want in your formatting, and also have an alternative font that will auto load if your primary font is not accepted by certain viewers.

    I can't remember the relevant code to do this but I will ask some of my friends and get back to you.
    Signature
    Need to Learn Affiliate Marketing from Scratch Fast? Click Here (We just added Free Videos)
    Get Motivated for Success! Click Here
    Affiliate Training Pros Click Here
    {{ DiscussionBoard.errors[1325708].message }}
  • Profile picture of the author addyosmani
    From experience:

    Don't go for embedded fonts, sIFR or anything that requires additional post-load memory to get it looking the way you want. The experience and overload are just not worth it.

    If you're looking to use a specific font that may not be on all your users systems, simply open up an image editor and create a graphic with the typography in it instead.
    {{ DiscussionBoard.errors[1326433].message }}
  • Profile picture of the author edynas
    Banned
    if it's purely for the header why don't make you i an image and have the text hidden? That way you are always sure people will see it the way you intend it to be
    {{ DiscussionBoard.errors[1328880].message }}

Trending Topics