Here is a quick resource I made for my racing server after seeing some speed limit display resources that were made using DrawText in a loop. I wanted to get a much more visually pleasing implementation while also making it more performant.
I made the speed limit sign images myself using the Highway Gothic font and the high-res sign layouts available from the USDoT Federal Highway Administration site here: Standard Highway Signs - FHWA MUTCD (dot.gov)
They are left intentionally over-sized (but not original size as the layout was huge) so you can increase the size of the on-screen signs without losing quality if you would like.
Q: How do I change the size of the speed limit sign on screen? A: In the file “html/index.html”, change the “max-width” value to your desired value. Default: 100px. A size of half the default would look as follows:
#speedlimit > img {
max-width: 50px;
}
Q: How do I change the position of the speed limit sign on screen? A: In the file “html/index.html”, change the “right” and “bottom” values to match your desired position. For example, a position above the minimap on the left would look as follows:
Download the “Speed limit signs – EPS” zip file and import the desired sign vector into an image editor of your choice at the resolution of your choice, edit away (road signs are easy to select a box and fill with white or another color to replace numbers). Might be a good idea to find the exact road sign font used in your region. In my case, it was Highway Gothic. You will need a file for every speed between 25 and 80 mph, moving by 5mph. My folder looks like this:
