Updating Website Font

[ErinKas]

Hello AGAIN Community. Hoping you can help me. Branding has been updated which means the font on the website needs to be changed. I am hoping its not complicated..... Attached is a screen shot of the top of our css style sheet. Is it as easy as adding an import URL like in the screen shot? and removing the old fonts? and updating the instances of the old fonts to the new in the CSS? Any help is appreciated.  Thanks in advance!

[Anton · Accepted solution]

Hi @ErinKas,

yes, you can simply put the new font(s) in the first line(s), copy the name and replace all the old ones with the new. 

If you have a programm like Dreamweaver(paid), Atom(www.atom.io) or similar you can copy-paste the whole .css file into a new document and do a "find & replace" action. 

With this method you get everything correctly done in under 5 seconds 🙂

Shortcuts:

Dreamweaver: STRG+Shift+F // CMD+Shift+F
Atom:STRG+F // CMD+F

other programs: propably something similar

Enter the whole line with the font into the "search" line and the same in the "replace" line. Edit the font-name in the "replace" line.

The entered name must match the font name. 

Here's an example

old font:

html{
font-family: 'Roboto Condensed', sans-serif;
font-weight:300;}

 new font:

html{
font-family:'Arvo', sans-serif;
font-family:400;}

You don't need an !important tag in the font-family line. It's more important to add a fallback like "serif, sans-serif..." to the font-family. 

Here's a article with the difference and when to use which kind of font:

Serif vs. Sans-Serif on Deisgnerhack.net

A better, recomended  (and "future proof") solution whould be replacing the content of each font-family with a variable, like you've done with "templateWidth". In this case you'll need to change the font only in one place(if you'll need/want to change the font again)

To do so you have to do following steps:

1. Paste your Font URL in the first line(s) of your css file

2. write  following code below the url(it should be between the font url you've pasted and the first css part like "html"

{% set baseFontFamily    = "Lato, sans-serif" %}

you can name the "baseFontFamily" how you want. It doesn't really matter. The only thing I can recomend is, that it should be easy to remember. Some like "first_font" or so 🙂

3. Change the font name inside the quotation marks to the font name you wnat to use. 

It should look something like this

{% set first_font    = "Arvo, sans-serif" %}

Info: You can do as many variables as you want/need. 

4. replace every

font-family: 'OLD FONTNAME'

with

font-family: {{ first_font }}; 

The name must match the name you gave the variable at #3

5. Your new font is ready to use

For faster, and better results I recomend to use the "find & replace" thing I've described above. 

Important:

You've got many Fonts

- Arvo

- Quattrocento

- Reem Kufi 

- 2x Roboto Condensed (this makes no sense  )

- FontAwesome 4.7

I recomend you:

- to get them all in seperate links( it should be easier to manage them)

- decide which you want to use where like "Arvo as Headline font, Quattrocento for normal text"
- after you've made your desicion - eliminate the unnessary fonts. This will give you a small page-speed boost.

regards,
Anton