Replace fonts with Google Webfonts

Goal: Replacing the default fresh.li fonts with one of the Google Webfonts.

Difficulty: Medium, some basic HTML knowledge is good but you’ll get really far by just trying it out and changing the example to your liking.

Google has made it possible to easily use a wide array of custom fonts with their font API. In this tutorial I am going to change the font used in the headers for the All-Out and the Inside-Out template. I am not saying this example looks better then the original, but I think you get my point.

BEFORE:


AFTER:


To do this go to your settings and check the box Use Custom Css, then click edit stylesheet. A popup box will open in wich you can paste the code. You can always uncheck the box if you do not want a custom css any more, or revert to default.


  • First you import the font you want to use from Google Webfonts by using the @import code. In the example I used Lobster. You can find this code if you click your desired font -> Get the code -> Advanced techniques.
  • Then write down the CSS selectors of all the titles (class and id names usually).
  • Then declare the font-family. The default font-weight for this example is bold, I wanted it to be normal, made it a little bigger and changed the color.

And that’s it! Copy the code below and paste it in the popup box to start customizing your portfolio.

@import url(http://fonts.googleapis.com/css?family=Lobster);

h3, #menu li.page, #menu li.page a,  #menu li.section{
  font-family: 'Lobster', arial, serif;
  font-weight: normal;
  font-size: 22px;
  color: #ff0060;
}

FAQ & Tutorials

Fresh.li has a new support page! Help us help you and ask us your questions or tutorial requests.


What do you want to know: How to create a shoutbox? How to save your images best for web? How to make a logo in Photoshop? How to change the colors of your links?

Ask us anything! Just push the button on the left.

How can I be found with google? — Asked by Anonymous

Search engines use crawlers to look  at a number of different factors to use for their algorithmic search results. However text is the main thing you can influence to be found:

  • Text you use to describe your images.
  • The file names of your images. (give them a name that makes sense instead of a number)
  • The description of your portfolio. (you can find the description form under settings)
  • Any other text you use on a page.
  • Note that text in an image will not be found. Don’t save your CV as a jpg, but copy/paste it as text.

Think about what you do and what people might type in google to find you and use that to descibe your work. To speed things up a little bit you can also add your URL to Google.

Don’t forget to make a contact page; when you are found, people might want to contact you ;-)

I would like to know how i can make a link on a fresh.li page? — Asked by Anonymous

If you want to make a link in your text, you can do so by using the following code:

(type your text here)[http://www.type-your-url-here.com]

For example:

In this example you can (click here)[http://www.fresh.li] and go to the Fresh.li home page.

Will produce:

In this example you can click here and go to the Fresh.li home page.

It’s in the details

As you might have gathered from our twitter feed we’ve been steadily collecting users the past few months. Just the past few weeks we have welcomed over a hundred new portfolios. Which of course is awesome!

Luckily for these new users we’ve been working behind the scenes on some incremental improvements to the site that should make the overall experience even better.

  • slightly bigger logo’s are now allowed (max width is now 720 pixels)
  • new works are now marked ‘show on homepage’ by default
  • color of hyperlinks is now configurable in each of the templates
  • page editor now saves when you click outside of the input field as well
  • the page editor save and cancel buttons are styled better so it’s easier to tell them apart
  • the markdown help was improved and is now shown next to your editor

Furthermore were working hard to show you how to get the max from your freshli portfolio. To this end we have created sample portfolio’s for each of the current templates:

Were also expanding exampleportfolio.com with pages on everything from how to use the Markdown markup language to tutorials on how to embed video in your portfolio. We’ll let you know as soon as new pages are added using our twitter account.

New low prices

We just announced our new prices on our monthly mailinglist, read more here: http://eepurl.com/2f5

The gist of it is:

  • Simple plan structure; either free or pro
  • No more subscriptions; just pay and go
  • New low price; €59/year (which is €4,95/month) for a Pro account

Gotten interested? Sign up now: http://fresh.li/accounts/choose_plan

New server = new power

We have just completed a move to a new dedicated server that gives us twice the CPUs, twice the memory and twice the disk space on a server all to ourselves. This should give our service room to grow in the future and it should should also take care of some of the slowness you might have been experiencing lately. (If you have been, sorry about that!)

In short; fresh.li is faster now! :)

Fresh Creation - Inspiration For Creative Minds

Track portfolio visits like a pro

We just released a new feature on fresh.li that allows you to add tracking code from any of the major analytics websites to your fresh.li portfolio.

When you login to your fresh.li dashboard today you’ll find a new field on the settings page of your portfolio called ‘tracking code’ where you can paste the Javascript snippet that is used by your analytics service of choice. Simply paste the snippet, save your settings and your on your way to start collecting any sort of visitor stat you could wish for.

To help you out we created a little tutorial video taking you through the different steps:

Remember to click the fullscreen button to see a bigger version of the video.

Some of the services we like are Google Analytics and Clicky. Go check them out!

Moved the weblog

We just moved our weblog to the Tumblr service allowing us to create posts a bit more easily and also moving the weblog to a different server so the information we post here will always be available even if, knock on wood, the fresh.li service itself is unavailable.

We did not move all our older posts though but if your desperate to read more about our service and the latest features there’s always our Newsletter archive of course…