Home

Welcome to the ClockFace-font wiki!

Using ClockFace on the web:

The ClockFace web preview updates the clocks like this:

function updateClocks() {
  document.querySelectorAll(".clock").forEach( (i) => i.innerHTML = timeNowToUnicode())
  document.getElementById("pagetime").innerHTML = timeNowToUnicode()
}

function startIconTime() {
  let interval = 300000
  // First wait for the next 5 minute interval
  var initialDelay = interval - (new Date().getTime() % interval)
  updateClocks()
  setTimeout(function(){
    // Wait every 5 minutes to update
    updateClocks()
    setInterval(updateClocks, interval)
  }, initialDelay)
}

function timeNowToUnicode() {
  let d = new Date()
  let h = d.getHours() % 12
  let x = d.getMinutes()
  let m = x - (x % 5) // nearest 5 mins
  let offset = Math.floor((h * 12) + ((m / 60) * 12))
  let unicodeChar = 0xF0000 + offset
  return `&#${unicodeChar}`
}

CSS:

@font-face {
  font-family: 'ClockFace-Regular';
  src: url('ClockFace-Regular.ttf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'ClockFaceRect-Regular';
  src: url('ClockFaceRect-Regular.ttf?2534122341');
  font-weight: normal;
  font-style: normal;
}

@font-face {
   font-family: 'ClockFaceSolid-Regular';
   src: url('ClockFaceSolid-Regular.ttf?2534122341');
   font-weight: normal;
   font-style: normal;
}

@font-face {
  font-family: 'ClockFaceRectSolid-Regular';
  src: url('ClockFaceRectSolid-Regular.ttf?2534122341');
  font-weight: normal;
  font-style: normal;
}

.regular {font-family: "ClockFace-Regular";}
.solid {font-family: "ClockFaceSolid-Regular";}
.rect {font-family: "ClockFaceRect-Regular";}
.rect-solid {font-family: "ClockFaceRectSolid-Regular";}